关于CSS的小问题的解答

发布者：s5s5 关于CSS的小问题的解答有 18 条评论

开心就好 提出了一个 关于CSS的小问题，题目是这样的~
这样的结构：

程序代码
<div id=”Header”>这是标题</div>
<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 的兼容，其他的懒的搞了，也没多少人用哈~
请大家指点一二~

第一种结构~

程序代码
@charset “utf-8”;
*{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;}

第二种结构~

程序代码
@charset “utf-8”;
*{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;}

第三种结构~

程序代码
@charset “utf-8”;
*{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;}

点此下载

发布者：s5s5

https://s5s5.me

“关于CSS的小问题的解答”上的18条回复

  1. 一直不喜欢用z-index和margin/padding的负值布局………..

  3. 第一种布局，难度就在宽度上
    Margin-right为负值，当内容很多的时候，就会被隐藏掉一些，所以这个方法是不可取的

  7. [tx] 楼上好无趣哦~我本来就很牛，用不着大家说了~

评论已关闭。

退出移动版