我是一名新程序员,我正在使用 HTML 和 CSS 制作一个网站,但我遇到了一个重大问题。我在页面上放置了图像(就在结束 BODY 标记之前的图像),我希望它们留在一个位置,但是每当我调整浏览器的大小时,它们就会开始到处移动。我进行了搜索和搜索,但似乎没有任何帮助对我有用,与我的问题不完全相关,或者太令人困惑了。有些人甚至问过同样的问题,但其他试图回答的人似乎被难住或困惑,所以我发现他们帮不上什么忙。请帮忙,谢谢。
HTML 如下...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>New Product</title>
<style>
body {background-image:url('gradient_back_ground_05.jpg');
background-repeat:repeat-x;}
</style>
<style type="text/css">
.textOverlay
{
position: relative; left: 375px; top: 1px;
}
</style>
<link href="zzv_styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="picture">
<div class="textOverlay">
<h2><font color=white><font face="Arial, Helvetica, sans-serif"><em>We Proudly Presents<br />a Brand New Product.</em></font></font></h2>
</div>
</div>
<div align="center"><img src="assets/zz_banner.jpg" alt="Banner" width="700" height="140" /></div>
<p class="body_text"><img src="assets/info_box.png" alt="Information Box" width="350" height="500" hspace="5" vspace="5" border="0" align="right" />
<p class="body_text"><img src="assets/zz_logo.png" alt="Logo" width="350" height="125" hspace="5" vspace="5" border="0" align="left" />
<p class="body_text"><img src="assets/bulleted_info_box.png" alt="Bulleted Box 1" width="350" height="125" hspace="5" vspace="5" border="0" align="left" />
<p class="body_text"><img src="assets/bulleted_info_box.png" alt="Bulleted Box 2" width="350" height="125" hspace="5" vspace="5" border="0" align="left" />
<div align="center"><img src="assets/RN_footer.jpg" alt="Footer" width="700" height="110" /></div>
</body>
</html>
这是CSS
@charset "UTF-8";
/* CSS Document */
.image {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
position: absolute;
top: 30px;
left: 0;
width: 100%;
}