开心就好 提出了一个 关于CSS的小问题,题目是这样的~
这样的结构:
<div id=”Main”>
<div id=”Content”>这是主内容</div>
<div id=”Sidebar”>
<div id=”Stats”>
<ul>
<li>主页</li>
<li>目录1</li>
<li>目录2</li>
</ul>
</div>
<div class=”other”>这是其它内容</div>
</div>
</div>
<div id=”Footer”>这是结尾</div>
然后用CSS来实现下面的表现~
我研究了半天,搞出来了~
只做了IE6 IE7 FF2 的兼容,其他的懒的搞了,也没多少人用哈~
请大家指点一二~
第一种结构~
*{margin:0; padding:0; border:0; line-height:1.22em;}
ul{list-style:none;}
#Header{background:#CF0;}
#Main{background:#C90; padding-left:200px; overflow:hidden; height:1%;}
#Content{background:#C30; width:100%; float:right; margin-bottom:-32767px; padding-bottom:32767px;}
#Sidebar{background:#F00; width:200px; float:left; margin-left:-200px; _margin-left:-100px; margin-bottom:-32767px; padding-bottom:32767px;}
#Stats{background:#F60;}
.other{background:#FC0;}
#Footer{background:#FF3; clear:both;}
第二种结构~
*{margin:0; padding:0; border:0; line-height:1.22em;}
ul{list-style:none;}
#Header{background:#CF0;}
#Main{background:#C90; padding:0 200px; overflow:hidden; height:1%;}
#Content{background:#C30; width:100%; margin-right:-100%; float:left; margin-bottom:-32767px; padding-bottom:32767px;}
#Sidebar{background:#F00;}
#Stats{background:#F60; margin-left:-200px; width:200px; float:left; margin-bottom:-32767px; padding-bottom:32767px;}
.other{background:#FC0; float:right; width:200px; margin-right:-200px; _margin-right:-100px; margin-bottom:-32767px; padding-bottom:32767px;}
#Footer{background:#FF3; clear:both;}
第三种结构~
*{margin:0; padding:0; border:0; line-height:1.22em;}
ul{list-style:none;}
#Header{background:#CF0;}
#Main{background:#C90; padding-top:1.22em; position:relative;}
#Content{background:#C30; margin-left:200px; z-index:2; position:relative;}
#Sidebar{background:#F00; width:100%; position:absolute; top:0; z-index:1;}
#Stats{background:#F60; width:100%; position:absolute;}
#Stats ul{overflow:hidden;}
#Stats li{float:left;}
.other{background:#FC0; width:200px; position:relative; top:1.22em;}
#Footer{background:#FF3; margin-left:200px; position:relative; z-index:2;}