Question

所以我基本上想把这个网站的所有内容都包含在一个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>

Answer 1

我是否可以建议您长时间仔细研究Matthew James Taylor对液体布局的精彩css设计。

设计（有很多）不仅是液体（自动调整大小以适应浏览器的大小），但它们也非常友好的SEO

http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts

Answer 2

当你重新缩放时，首先你的背景会变得混乱并缩小，所以可能会将它设置在你的身体背景上。

就个人而言，我会有1个包装div最大宽度960，最小宽度可能是400然后内部的两个div然后浮动左边在菜单上放置一个右边距并在图像滑块上有一个自动边距然后如果你调整大小到图像滑块的指定高度以下，以及图像幻灯片应自动切换到菜单下方的菜单。

您的另一个选择是使用@media查询，但这有点复杂。

将两个div放在另外两个div（在另一个div内）

2 个答案: