第七节Float属性

《网站设计基础》教学讲义2012年2月Float属性：定义：float属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在CSS中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。用处：两栏或多栏式页面布局，下拉导航菜单属性值：left(靠左浮动)、right(靠右浮动)、none。实例1：图文混排Chap3/float.htmlhtmlxmlns==Content-Typecontent=text/html;charset=gb2312/title无标题文档/titlestyletype=text/css!--body{font-size:18px;line-height:200%;}#image{float:left}--/style/headbodydivid=imageimgsrc=images/stars/9.jpgwidth=200height=150//divdivid=content如果不定义浮动的话，各个div的内容在页面上是由上向下排列的。而如果某个div定义了float:left，那么这个div就会出现在上层div下最靠左的位置，而与它同一等级，但列在它后面的div就会显示在他的右侧了。同样，如果定义了float:right，那么这个div就会出现在上层div下最靠右的位置，而与它同等级，但列在它前面的div就会显示在他的左侧。如果不定义浮动的话，各个div的内容在页面上是由上向下排列的。而如果某个div定义了float:left，那么这个div就会出现在上层div下最靠左的位置，而与它同一等级，但列在它后面的div就会显示在他的右侧了。同样，如果定义了float:right，那么这个div就会出现在上层div下最靠右的位置，而与它同等级，但列在它前面的div就会显示在他的左侧。/div/body/html执行结果如下：《网站设计基础》教学讲义2012年2月实例2：上左右下布局Chap2/layout.html《网站设计基础》教学讲义2012年2月htmlxmlns==Content-Typecontent=text/html;charset=gb2312/title无标题文档/titlestyletype=text/css!--*{margin:0;}#top{background:green;width:800px;height:150px;margin:0pxauto;}#main{width:800px;height:300px;margin:0pxauto;}#left{background:blue;width:200px;height:300px;float:left;margin:0pxauto;}#right{background:silver;width:600px;height:300px;margin:0pxauto;float:left;}#bottom{background-color:yellow;width:800px;height:150px;margin:0pxauto;}--/style/headbodydivid=top/divdivid=maindivid=left/divdivid=right/div/divdivid=bottom/div/body/html执行结果如下：《网站设计基础》教学讲义2012年2月实例3：横向二级导航菜单Chap3/menuexample.html《网站设计基础》教学讲义2012年2月!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN==Content-Typecontent=text/html;charset=gb2312/title无标题文档/titlestyletype=text/css!--body{font-size:12px;}#menuullia{display:block;color:#FFFFFF;text-decoration:none;width:100px;height:30px;line-height:30px;border:#FFFFFFsolid1px;text-align:center;}#menu{width:816px;height:30px;margin:0pxauto;background-color:#FF9900;}#menuul{margin:0;}#menuulli{list-style:none;float:left;position:relative;}#menuullia:hover{background:#669999;}#menuulliul{display:none;}#menuulli:hoverul{display:block;position:absolute;《网站设计基础》教学讲义2012年2月top:31px;left:0px;width:102px;list-style:none;}#menuulli:hoverullia{display:block;background:#faeec7;color:#000;}#menuulli:hoverullia:hover{background:#dfc184;color:#000;}--/style/headbodydivid=menuulliahref=#首页/a/liliahref=#网页版式布局/aulliahref=#exampleone/a/liliahref=#weftfonts/a/liliahref=#verticalalign/a/li/ul/liliahref=#div+css教程/a/liliahref=#div+css实例/a/liliahref=#常用代码/a/liliahref=#实例源代码/a/liliahref=#网站论坛/a/liliahref=#联系我们/a/li/ul/div/body/html执行结果：《网站设计基础》教学讲义2012年2月出现问题：用IE6二级菜单不显示，在火狐狸里能够显示原因：ie6不识别ulli:hover解决方法：参考：综合大作业。1运用div+css做首页面index.html的整体布局；细节可用表格布局。2首页面包含内容：网站LOGO;二级下拉导航菜单；菜单内容自定。滚动新闻；登录窗口；友情链接；版权；简短自我介绍和照片。可通过作业列表超级链接到homework7主页面。一句话：将所有平时完成的作业都通过首页面能够浏览到！1CSS样式需要放到单独的CSS文件中，即采用外部链接式使用CSS。2如需特殊附操作说明，请在首页面显眼位置作以说明。3五一之后第一次课上交