所以我基本上想将这个网站的所有内容都包含在一个 div 中。这是一个成功。我的菜单栏位于主菜单的 div 内。通过重新排列代码和修改 CSS，我的图片库 div 位于正确的位置。但是，这对其他决议有效吗？有没有更简单的方法让我的画廊出现在我的菜单栏旁边？该网站的现场演示可以在accessorizewithstyle.tk找到。任何帮助，将不胜感激。我正在尝试使该站点动态扩展，以便无论使用哪种浏览器/分辨率查看它，它看起来都不错。
代码：
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Accessorize With Style | Index</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
// create the image rotator
setInterval("rotateImages()", 2000);
});
function rotateImages() {
var oCurPhoto = $('#gallery div.current');
var oNxtPhoto = oCurPhoto.next();
if (oNxtPhoto.length == 0)
oNxtPhoto = $('#gallery div:first');
oCurPhoto.removeClass('current').addClass('previous');
oNxtPhoto.css({ opacity: 0.0 }).addClass('current').animate({ opacity: 1.0 }, 1000,
function() {
oCurPhoto.removeClass('previous');
});
}
</script>
<style type="text/css">
body {
overflow:hidden;
}
img.background {
position:absolute;
top:0;
left:0;
width: 100%;
z-index:-3;
}
img.background {
width:auto\9;
max-width:100%;
}
.menu{
margin:0;
padding:0;
width:300px;
list-style:none;
background:rgb(255,255,255);
}
.menu li{
padding:0;
margin:0 0 1px 0;
height:40px;
display:block;
}
.menu li a{
text-align:left;
height:40px;
padding:0px 25px;
font:16px Verdana, Arial, Helvetica, sans-serif;
color:rgb(255,255,255);
display:block;
background:url('images/verMenuImages.png') 0px 0px no-repeat;
text-decoration:none;
}
.menu li a:hover{
background:url('images/verMenuImages.png') 0px -40px no-repeat;
color:rgb(0,0,0);
}
.menu li a.active, .menu li a.active:hover{
background:url('images/verMenuImages.png') 0px -80px no-repeat;
color:rgb(255,255,255);
}
.menu li a span{
line-height:40px;
}
#site {
width:85%;
margin:0 auto;
}
#menubar {
position: relative;
left: 0px;
}
#gallery {
position: absolute;
left: 35%;
height:400px;
width:400px;
}
#gallery div {
position:absolute;
z-index: 0;
}
#gallery div.previous {
z-index: 1;
}
#gallery div.current {
z-index: 2;
}
</style>
</head>
<body>
<img src="images/background.jpg" class="background" />
<div id="site">
<P><center><img src="images/logo.png" class="logo" /></center></P>
<div id="menubar">
<div id="gallery" align="center">
<div class="current">
<img src="http://i.istockimg.com/file_thumbview_approve/1459298/2/stock-photo-1459298-jewllery-2.jpg" alt="Photo Gallery" width="400" height="400" class="gallery" />
</div>
<div>
<img src="http://i.istockimg.com/file_thumbview_approve/3480966/2/stock-photo-3480966-bracelet.jpg" alt="Photo Gallery" width="400" height="400" class="gallery" />
</div>
<div>
<img src="http://i.istockimg.com/file_thumbview_approve/14879331/2/stock-photo-14879331-earrings.jpg" alt="Photo Gallery" width="400" height="400" class="gallery" />
</div>
<div>
<img src="http://i.istockimg.com/file_thumbview_approve/2741073/2/stock-photo-2741073-wedding-rings.jpg" alt="Photo Gallery" width="400" height="400" class="gallery" />
</div>
<div>
<img src="http://i.istockimg.com/file_thumbview_approve/15490304/2/stock-photo-15490304-scarf.jpg" alt="Photo Gallery" width="400" height="400" class="gallery" />
</div>
</div>
<ul class="menu">
<li><a href="index.html" class="active"><span>Home</span></a></li>
<li><a href="about.html"><span>About</span></a></li>
<li><a href="necklaces.html"><span>Necklaces</span></a></li>
<li><a href="bracelets.html"><span>Bracelets</span></a></li>
<li><a href="earings.html"><span>Earings</span></a></li>
<li><a href="rings.html"><span>Rings</span></a></li>
<li><a href="scarves.html"><span>Scarves</span></a></li>
<li><a href="contact.html"><span>Contact</span></a></li>
</ul>
</div>
</div>
</body>
</html>