CSS常用布局实例
单行一列
Example Source Code
body{margin:0px;padding:0px;text-align:center;}
#content{margin-left:auto;margin-right:auto;width:400px;}
两行一列
Example Source Code
body{margin:0px;padding:0px;text-align:center;}
#content-top{margin-left:auto;margin-right:auto;width:400px;}
#content-end{margin-left:auto;margin-right:auto;width:400px;}
三行一列
Example Source Code
body{margin:0px;padding:0px;text-align:center;}
#content-top{margin-left:auto;margin-right:auto;width:400px;width:370px;}
#content-mid{margin-left:auto;margin-right:auto;width:400px;}
#content-end{margin-left:auto;margin-right:auto;width:400px;}
单行两列
Example Source Code
#bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}
#bodycenter#dv1{float:left;width:280px;}
#bodycenter#dv2{float:right;width:420px;}
两行两列
Example Source Code
#header{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}
#bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}
#bodycenter#dv1{float:left;width:280px;}
#bodycenter#dv2{float:right;width:420px;}
三行两列
Example Source Code
#header{width:700px;margin-right:auto;margin-left:auto;}
#bodycenter{width:700px;margin-right:auto;margin-left:auto;}
#bodycenter#dv1{float:left;width:280px;}
#bodycenter#dv2{float:right;width:420px;}
#footer{width:700px;margin-right:auto;margin-left:auto;overflow:auto;clear:both;}
单行三列
绝对定位
Example Source Code
#left{position:absolute;top:0px;left:0px;width:120px;}
#middle{margin:0px190px0px190px;}
#right{position:absolute;top:0px;right:0px;width:120px;}
float定位一
xhtml代码:
Example Source Code
<div id="wrap">
<div id="column">
<div id="column1">这里是第一列</div>
<div id="column2">这里是第二列</div>
/*用法web标准不建议,但是记住下面元素需要清除浮动*/
</div>
<divid="column3">这里是第三列</div>
/*用法web标准不建议,但是记住下面元素需要清除浮动*/
</div>
CSS代码:
Example Source Code
#wrap{width:100;height:auto;}
#column{float:left;width:60;}
#column1{float:left;width:30;}
#column2{float:right;width:30;}
#column3{float:right;width:40;}
.clear{clear:both;}
单行一列
Example Source Code
body{margin:0px;padding:0px;text-align:center;}
#content{margin-left:auto;margin-right:auto;width:400px;}
两行一列
Example Source Code
body{margin:0px;padding:0px;text-align:center;}
#content-top{margin-left:auto;margin-right:auto;width:400px;}
#content-end{margin-left:auto;margin-right:auto;width:400px;}
三行一列
Example Source Code
body{margin:0px;padding:0px;text-align:center;}
#content-top{margin-left:auto;margin-right:auto;width:400px;width:370px;}
#content-mid{margin-left:auto;margin-right:auto;width:400px;}
#content-end{margin-left:auto;margin-right:auto;width:400px;}
单行两列
Example Source Code
#bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}
#bodycenter#dv1{float:left;width:280px;}
#bodycenter#dv2{float:right;width:420px;}
两行两列
Example Source Code
#header{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}
#bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}
#bodycenter#dv1{float:left;width:280px;}
#bodycenter#dv2{float:right;width:420px;}
三行两列
Example Source Code
#header{width:700px;margin-right:auto;margin-left:auto;}
#bodycenter{width:700px;margin-right:auto;margin-left:auto;}
#bodycenter#dv1{float:left;width:280px;}
#bodycenter#dv2{float:right;width:420px;}
#footer{width:700px;margin-right:auto;margin-left:auto;overflow:auto;clear:both;}
单行三列
绝对定位
Example Source Code
#left{position:absolute;top:0px;left:0px;width:120px;}
#middle{margin:0px190px0px190px;}
#right{position:absolute;top:0px;right:0px;width:120px;}
float定位一
xhtml代码:
Example Source Code
<div id="wrap">
<div id="column">
<div id="column1">这里是第一列</div>
<div id="column2">这里是第二列</div>
/*用法web标准不建议,但是记住下面元素需要清除浮动*/
</div>
<divid="column3">这里是第三列</div>
/*用法web标准不建议,但是记住下面元素需要清除浮动*/
</div>
CSS代码:
Example Source Code
#wrap{width:100;height:auto;}
#column{float:left;width:60;}
#column1{float:left;width:30;}
#column2{float:right;width:30;}
#column3{float:right;width:40;}
.clear{clear:both;}
float定位二
xhtml代码:
Example Source Code
<div id="center"class="column">
<h1>Thisisthemaincontent.</h1>
</div>
<div id="left"class="column">
<h2>Thisistheleftsidebar.</h2>
</div>
<div id="right"class="column">
<h2>Thisistherightsidebar.</h2>
</div>
CSS代码:
Example Source Code
body{
margin:0;
padding-left:200px;/*LCfullwidth*/
padding-right:190px;/*RCfullwidth CCpadding*/
min-width:200px;/*LCfullwidth CCpadding*/
}
.column{
position:relative;
float:left;
}
#center{
width:100;
}
#left{
width:200px;/*LCwidth*/
right:200px;/*LCfullwidth*/
margin-left:-100;
}
#right{
width:190px;/*RCwidth*/
margin-right:-100;
}
分享到:
相关推荐
《DIV+CSS 3.0:网页布局案例精粹》系统地介绍了CSS样式的基础理论和实际应用技术,并结合实例来介绍使用Div+CSS布局制作网页的方法和技巧。在介绍使用CSS样式进行设计的同时,还结合实际网页制作中可能遇到的问题,...
通过多个实例讲解目前流行的DIV+CSS布局方式 结合实际工作中的问题提供了解决的思路、方法、技巧 “商业实战”系列丛书,通过列举典型的实例,
介绍DIV和CSS的使用方法和常用技巧。DIV+CSS页面布局基础知识,适用于技术与平台中心无css基础研发人员
《精通CSS+DIV网页样式与布局》从零开始,细致介绍CSS的语法规则,透彻讲解CSS应用于各种网页元素的步骤和技巧深入剖析,CSS+DIV布局的思路和方法比较,IE和Firefox浏览器对CSS支持的不同效果,扩展CSS与JavaScript...
《精通CSS+DIV网页样式与布局》从零开始,细致介绍CSS的语法规则,透彻讲解CSS应用于各种网页元素的步骤和技巧深入剖析,CSS+DIV布局的思路和方法比较,IE和Firefox浏览器对CSS支持的不同效果,扩展CSS与JavaScript,Ajax,...
不仅介绍了Dreamweaver 8、Firework 8等常用软件的使用,更重要的是,结合实际网页制作中可能遇到的问题,提供了解决问题的思路、方法、技巧,即使是初学者也可以轻松掌握DIV+CSS布局方式,制作出精美的网页并搭建...
本教程介绍了商业类型的网页设计,以及目前流行的DIV+CSS标准布局方法和实战技法。通过对十个经典案例进行分析,分别从不同类型网站的布局风格以及实现方法来讲解DIV+CSS网页布局和制作方法。本教程系统地讲解了CSS...
除了还不能全面支持我们常用的大多数浏器之外,CSS在实现其它承诺方面作得相当出色。CSS在改变我们制作样式表的方法。它为大部分的网页创新奠定了基石。 之后的5天,我们将漫游样式表的世界。你将学到样式表的基本...
利用CSS的Expression自定义属性来实现表格的OnMouseOver 特效 需要掌握的八个CSS布局技巧 用css实现链接经过时显示浮动图片背景的效果 自适应大小的CSS圆角盒子 div+css实现Firefox和IE6兼容的垂直居中...
本书用相当的篇幅重点介绍了用CSS+DIV进行网页布局的方法和技巧,配合经典的布局案例,帮助读者掌握CSS最核心的应用技术。 4. 高级的混合应用技术 真正的网页除了外观表现之外,还需要结构标准语言和行为标准的结合...
DIV+CSS网页布局常用的方法与技巧 我这是txt格式的,跟适合与大家在手机上学习, 对这方面感兴趣的,请加qq:695328420
CSS的十八般技巧 使用CSS布局方法以来所有的技巧和兼容方案
这是一个基于JavaScript的简单选项卡代码,陪新手练习一下Div+CSS排版的技巧,本选项卡可以继续美化修饰完善,选项卡在目前在众多网站上应用广泛,确实是一个很不错的网页布局方法。 运行效果截图如下: 在线演示...
是根据我对文章的理解意译的,你就别挑哪里翻译的不对了,我的目的只是传达这个CSS技巧 许多网页设计师都喜欢,将两个或者多个容器等高的并排放置,并在里面展示每个容器的内容,就象经典表格布局中的单元格控制几个...
CSS布局常用思路方法 CSS常用布局例子 CSS布局高级窍门技巧
div+css有实例,易学易懂第1 章 Web 标准布局的本质 第8 页 1.1 为什么要建立Web 标准 1.1.1 建立Web 标准的目的 1.1.2 使用Web 标准的好处 1.2 什么是Web 标准 1.3 内容、结构和表现 1.4 两种思考方式 1.5 Web 标准...
本书用相当的篇幅重点介绍了用CSS+DIV进行网页布局的方法和技巧,配合经典的布局案例,帮助读者掌握CSS最核心的应用技术。 4. 高级的混合应用技术 真正的网页除了外观表现之外,还需要结构标准语言和行为标准的结合...
本书用相当的篇幅重点介绍了用CSS+DIV进行网页布局的方法和技巧,配合经典的布局案例,帮助读者掌握CSS最核心的应用技术。 4. 高级的混合应用技术 真正的网页除了外观表现之外,还需要结构标准语言和行为标准的结合...
不仅介绍了Dreamweaver 8、Firework 8等常用软件的使用,更重要的是,结合实际网页制作中可能遇到的问题,提供了解决问题的思路、方法、技巧,即使是初学者也可以轻松掌握DIV+CSS布局方式,制作出精美的网页并搭建...
behavior55.chm CSS 2.0 中文手册.chm ... DIVCSS布局大全.pdf dom10.chm web标准化设计:常用的CSS命名规范.mht 学习网页技术CSS样式表整理的20个技巧.txt 样式表滤镜中文手册.chm 样式表中文手册.chm