0

我的页面左侧有一个菜单，页面其余部分有内容。我有一个深色的纹理背景，所以我想要左侧菜单 div 的半透明背景和内容 div 的半透明背景。但是，似乎 body div 与菜单 div 重叠并堆叠其透明度，并使菜单 div 的内容透明。

我宁愿在两个部分之间留一个空间。有人可以看看我的代码并提供建议吗？

我在下面列出了一些代码，但请查看 jsfiddle 以获得完整的图片。

http://jsfiddle.net/5xmze/ （注意，链接的颜色应该与标题相同）

CSS：

#body{
 padding-left:2px;
 width: 85%;
 position: relative;
 background-color:rgba(0,0,0,0.6);
}

#leftside {
 float: left;
 width: 15%;
 height: 100%;
}

HTML：

<div><span id="leftside">
    <ul class="leftmenu">
        <li class="leftmenu"><a href="index.php">Home</a></li>
        <li class="leftmenu"><a href="projects.php">Projects</a></li>
        <li class="leftmenu"><a href="resume.php">Resume</a></li>
        <li class="leftmenu"><a href="contact.php">Contact</a></li>
    </ul></span>
</div>
<div id="body">
Content here...
</div>

这是我试图完成的事情： 这就是我想要完成的

4

2 回答 2

1

最好的方法是将菜单和正文放入同一个父 div，然后float:left;将正文放在菜单旁边。

不要忘记为两个元素设置宽度，因为如果#body的宽度大于页面上的可用空间，它将显示在菜单下。

于 2012-12-15T04:15:15.137 回答
0 
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready( function(){ 
$(window).resize( function() {
var s = $("body").width();
$("body").css({ "min-width":s+"px" });
});
});
</script>
<style>
/* style.css */

body {
font-size: 1em;
background-image:url('http://i1358.photobucket.com/albums/q764/kenny_johnson5/blackorchid_zpsc8d78a87.png');
color:#FFF;
font-family:Arial;
width:85%;
margin-left:16%;
}

h1 {
 font-family:Cambria,Serif;
 color:#81E500;
 text-align:center;
}

#top{
 width: 85%;
 position: relative;
}

#body{
padding-left:90px;
width: 85%;
position: relative;
background-color:rgba(0,0,0,0.6);
}

a {
color:#81E500;
font-family:Cambria,Serif;
font-size:1.5em;
}

#leftside {
 float: left;
 width: 15%;
 height: 100%;
    margin-left:-15%;
    z-index:999;
}

ul.leftmenu {
 list-style-type:none;
 margin:0px;
 padding:1px;
 background-color:rgba(0,0,0,0.6);
 border: 1px solid;
 border-color:#000;
 height:100%;
}

li.leftmenu {
padding:5px;

}
</style>
<html>

<div><div id="leftside">
    <ul class="leftmenu">
        <li class="leftmenu"><a href="index.php">Home</a></li>
        <li class="leftmenu"><a href="projects.php">Projects</a></li>
        <li class="leftmenu"><a href="resume.php">Resume</a></li>
        <li class="leftmenu"><a href="contact.php">Contact</a></li>
    </ul></div>
</div>



<div id="body">
<div id="top">
<h1>Header</h1>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt erat sit amet dolor imperdiet dignissim. Nunc eu enim erat. Suspendisse commodo faucibus risus at facilisis. Phasellus tortor urna, fringilla sed blandit non, porta vel enim. Vivamus placerat, risus et molestie elementum, risus elit dignissim elit, non porttitor nisl tortor sed lorem. Maecenas scelerisque mattis massa, vel blandit erat blandit sed. Vivamus erat augue, varius ac aliquet non, commodo id massa. Maecenas sit amet est posuere turpis ultrices aliquam. Nulla feugiat ultrices diam vitae egestas. Phasellus risus augue, dapibus nec condimentum non, tempus eu massa. Etiam sodales sodales dolor eu convallis.
</p>
<p>
Aenean in dignissim metus. Suspendisse placerat pharetra justo, et tristique neque vestibulum non. Quisque malesuada scelerisque diam eget suscipit. Donec non sollicitudin justo. Etiam sit amet massa felis. Maecenas aliquet cursus tristique. Etiam sollicitudin augue in risus venenatis rhoncus. Pellentesque tellus diam, porttitor in dapibus eu, rutrum eu lectus. Vestibulum luctus hendrerit augue vitae interdum. Donec in turpis malesuada arcu tempor placerat. Aliquam eget nisl ipsum. Cras blandit elementum vulputate. Ut vulputate ullamcorper urna, quis congue mauris laoreet nec. Morbi vitae dui eros.
</p>
<p>
Phasellus rhoncus ultrices sem et dictum. Ut ut nisl eget eros porttitor commodo auctor vitae leo. Quisque sed nulla augue, vel venenatis augue. Pellentesque bibendum sodales lectus, quis malesuada risus consectetur a. Aliquam lobortis aliquet vulputate. Duis sed velit est, in venenatis est. Vivamus viverra lacinia sapien non sodales. Aenean eleifend quam diam, id gravida tellus. Praesent dui sem, volutpat eu blandit in, volutpat ornare nulla. Nunc sed eros dolor.
</p>
<p>
Quisque sit amet diam nisl, volutpat interdum arcu. Proin et justo lorem. Mauris vitae egestas lacus. Nullam ut laoreet turpis. Donec eget metus enim, id porta orci. Nam condimentum feugiat tempor. Nunc ultricies pellentesque euismod. In hac habitasse platea dictumst. Etiam fringilla bibendum sapien, eu vestibulum nisi imperdiet tempus. Duis tincidunt magna id sapien porta vel aliquam massa tincidunt. Maecenas ut metus id augue congue scelerisque id nec enim. Ut ac nibh est, et laoreet orci. Nulla fermentum laoreet augue, in vulputate risus varius vel. Sed ac nunc quis tortor scelerisque rutrum.
</p>
<p>
Nullam adipiscing ultricies lacus ac pretium. In hac habitasse platea dictumst. Nullam convallis libero non augue sollicitudin mattis. Nunc commodo pharetra magna, tempor sagittis sem vehicula nec. Quisque massa ligula, gravida nec fringilla quis, tempus vel dolor. Nam et sem bibendum mi consectetur tincidunt. Nam placerat venenatis odio sit amet imperdiet. Integer luctus quam quis quam lobortis aliquam. Cras dignissim semper erat, ac laoreet leo volutpat quis. </p>

</div>
</body>
</html>
于 2012-12-15T03:33:48.313 回答