- 本栏最新文章
- CSS十大密技 08-16
- 在Photoshop中手绘水墨风格美女 08-15
- Photoshop手绘保时捷911 Carrera S MT 08-15
- 陈天桥20亿冲刺网络迪斯尼 08-14
- Fireworks抠图之枝繁叶茂的树木 08-12
- 简单使用历史画笔快速美化照片 08-08
- Photoshop鼠绘美女剑客插画教程 08-06
- 根本不存在DIV+CSS布局这回事 08-05
- CSS framework：浅谈CSS框架利弊 08-04
- photoshop制作彩色飘带 08-04
- 本栏推荐文章
- 中小企业站点是否有机会盈利？ 08-27
- 社交网站页面广告盈利模式遭遇挑战 08-27
- 中秋节网站推广十大方法 08-22
- 李彦宏的百度变形记 08-22
- 看雅虎与口碑是如何优势互补的 08-18
- CSS十大密技 08-16
- 个人网站如何去推广 08-16
- 在Photoshop中手绘水墨风格美女 08-15
- Photoshop手绘保时捷911 Carrera S MT 08-15
- 陈天桥20亿冲刺网络迪斯尼 08-14
关于CSS的小问题的解答
简介：开心就好 提出了一个 关于CSS的小问题，题目是这样的~这样的结构：
<div id="Header">这是标题</div><div id="Main"><div id="Content">这是主内容</div><div id="Sidebar"><div id="Stats"><ul><l ...
关键字：问题解答
开心就好 提出了一个 关于CSS的小问题，题目是这样的~
这样的结构：
然后用CSS来实现下面的表现~
我研究了半天，搞出来了~
只做了IE6 IE7 FF2 的兼容，其他的懒的搞了，也没多少人用哈~
请大家指点一二~
第一种结构~
第二种结构~
第三种结构~
点此下载
这样的结构：
<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>
<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;}
*{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;}
*{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;}
*{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;}
点此下载 
