DIVCSS层结构布局实例教程

DIVCSS层结构布局实例教程

ID:37764723

大小:375.81 KB

页数:12页

时间:2019-05-30

DIVCSS层结构布局实例教程_第1页
DIVCSS层结构布局实例教程_第2页
DIVCSS层结构布局实例教程_第3页
DIVCSS层结构布局实例教程_第4页
DIVCSS层结构布局实例教程_第5页
资源描述:

《DIVCSS层结构布局实例教程》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库

1、DIV+CSS一列布局一列固定宽度#layout{height:300px;width:400px;background:#99FFcc;}一列固定宽度居中margin属性用于控制对象的上、右、下、左四个方向的外边距,设置左右两边为auto,即可实现居中。一列布局(续)一列自适应宽度#layout{height:300px;width:80%;background:#99FFcc;}一列自适应宽度居中#layout{margin:auto;height:300px;width:80%;background:#

2、99FFcc;}一列二至多块布局一列布局(续)#head{background-color:#0099CC;height:80px;width:80%;margin-top:5px;margin-right:auto;margin-left:auto;}#main{background-color:#996600;height:300px;width:80%;margin-top:5px;margin-right:auto;margin-left:auto;}#foot{background-color:#9

3、99966;height:100px;width:80%;margin-top:5px;margin-right:auto;margin-left:auto;}两列固定宽度为了实现二列式布局,要使用了一个全新的属性——float。float属性是CSS布局中非常重要的一个属性,用于控制对象的浮动布局方式,我们的大部分div布局基本上都通过float的控制来实现布局,float的可选参数为:none/left/right。float使用none值时表示对象不浮动,而使用left时,对象将向左浮动。二列和三列布局

4、二列和三列布局(续)#left{background-color:#E8F5FE;border:1pxsolid#A9C9E2;float:left;height:300px;width:200px;}#right{background-color:#F2FDDB;border:1pxsolid#A5CF3D;float:left;height:300px;width:200px;}两列宽度自适应二列和三列布局(续)#left{background-color:#E8F5FE;border:1pxsolid#

5、A9C9E2;float:left;height:300px;width:20%;}#right{background-color:#F2FDDB;border:1pxsolid#A5CF3D;float:left;height:300px;width:70%;}两列固定,宽度居中需要利用div的嵌套式设计来完成,使用一个居中的div作为容器,将二列分栏的两个div放置在容器中,从而实现二列的居中显示。二列和三列布局(续)#layout{width:404px;margin-top:0px;margin-ri

6、ght:auto;margin-bottom:0px;margin-left:auto;}#left{float:left;height:300px;width:200px;}#right{float:left;height:300px;width:200px;}float属性float是个重点,在CSS中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素;且要指明一个宽度,否则它会尽可能地窄;另外当可供浮动的空间小于浮动元素时,它会跑到下一行,直到拥有足够放下它的空间。二列和三列布局(续

7、)三列固定宽度三列固定宽度要在三列div上添加一个父div,比如,设id为content为父容器。然后把光标定位在“content”内,连续插入三个div,并把前两个设置float:left,第三个div设置float:right。二列和三列布局(续)二列和三列布局(续)#content{background-color:#99CC99;height:300px;width:600px;}#left{height:300px;width:200px;background-color:#9999FF;float

8、:left;}#main{background-color:#996600;float:left;height:300px;width:200px;}#right{background-color:#0066CC;float:right;height:300px;width:200px;}IE6的3像素bug3像素bug是IE6的一个著名的bug,当浮动元素与非浮动元素相邻时,这个3像素的Bug就会

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。