2、定义CSS样式使用链入式CSS样式表为页面添加样式“浮动与清除.css”,参考CSS代码如下:body,di" /> 2、定义CSS样式使用链入式CSS样式表为页面添加样式“浮动与清除.css”,参考CSS代码如下:body,di" />

全文预览

实训2浮动与清除浮动

上传者：徐小白 |  格式：doc  |  页数：3 |  大小：85KB

文档介绍
浮动与清浮动</title></head><body><divclass="mainclearfix"><divclass="left"></div><divclass="right"></div></div><divclass="footer"></div></body></html>2、定义CSS样式使用链入式CSS样式表为页面添加样式“浮动与清除.css”,参考CSS代码如下:body,div,ul,li,ol,h1,h2,h3,h4,h5,input,textarea,p{?margin:0;?padding:0;}.main{?width:800px;?margin:0auto;}.left{?width:390px;?height:200px;?background-color:#0FF;?float:left;}.right{?width:400px;?height:200px;?background-color:#F90;?float:right;}.footer{?height:100px;?width:800px;?background-color:#CCC;?margin:0auto}保存后,在谷歌浏览器中预览,此时页面底部的灰色背景被遮住,效果如图2所示。图2清除浮动之前效果在CSS样式中加入清除浮动代码,如下所示:.clearfix:after{/*对父元素应用after伪对象样式*/display:block;clear:both;content:"";visibility:hidden;height:0;}保存后,在谷歌浏览器中预览,此时页面的灰色背景显示出来,效果如图3所示。图3清除浮动之后效果注意:清除浮动的方法有3种,具体如下:使用空标记清除浮动。使用overflow属性清除浮动。使用after伪对象清除浮动。以上案例使用的是第3种方法。
猜你喜欢

收藏

分享

举报
下载此文档