DIVCSS层结构布局实例教程.ppt_第1页
DIVCSS层结构布局实例教程.ppt_第2页
DIVCSS层结构布局实例教程.ppt_第3页
DIVCSS层结构布局实例教程.ppt_第4页
DIVCSS层结构布局实例教程.ppt_第5页
已阅读5页,还剩7页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

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: #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: #999966; 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时,对象将向左浮动 。,二列和三列布局,二列和三列布局 (续),#left background-color: #E8F5FE; border: 1px solid #A9C9E2; float: left; height: 300px; width: 200px; ,#right background-color: #F2FDDB; border: 1px solid #A5CF3D; float: left; height: 300px; width: 200px; ,两列宽度自适应,二列和三列布局 (续),#left background-color: #E8F5FE; border: 1px solid #A9C9E2; float: left; height: 300px; width: 20%; ,#right background-color: #F2FDDB; border: 1px solid #A5CF3D; float: left; height: 300px; width: 70%; ,两列固定,宽度居中 需要利用div的嵌套式设计来完成,使用一个居中的div作为容器,将二列分栏的两个div放置在容器中,从而实现二列的居中显示 。,二列和三列布局 (续),#layout width: 404px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; ,#left float: left; height: 300px; width: 200px; ,#right float: left; height: 300px; width: 200px; ,float属性 float是个重点,在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素;且要指明一个宽度,否则它会尽可能地窄;另外当可供浮动的空间小于浮动元素时,它会跑到下一行,直到拥有足够放下它的空间。,二列和三列布局 (续),三列固定宽度 三列固定宽度要在三列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: left; #main background-color: #996600; float: left; height: 300px; width: 200px; #right background-color: #0066CC; float: right; height: 300px; width: 200px;,IE6的3像素bug 3像素bug是IE6的一个著名的bug,当浮动元素与非浮动元素相邻时,这个3像素的Bug就会出现,但在IE7以上

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论