<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>web浮动练习</title> <!-- 先写结构然后结构优化 然后写css样式 --> <style type="text/css"> body,div,#header,#content,#footer,ul,li,#box,#contentright,#contentleft{margin:0px; padding:0px;} /* 重置css标签*/ #header,#content,#footer,ul{width:800px; margin:0 auto; font-weight:bold; font-style:normal;}/* 集体声明 水平居中 字体加粗 字体样式 标准*/ #header{height: 80px;background:#85C8FA;} #content{ background:#0F0; overflow:hidden;} /*解决溢出问题 */ /*去掉高度 内容在文本流之中缩小为0 overflow: hidden;解决问题 父级盒子高度自适应不要用清除浮动*/ #box{background:#ffc; width:100%; height:500px; float:left;} #contentright{ margin-left:600px;background:#CCF; height:500px; width:200px; float:left; display:inline;} /*留出600px的边距*/ #contentleft{ background:#999; height:500px; width:600px; float:left;margin-left:-800px; display:inline;} /*去掉霸权主义 左边距负100 正好跨越一个页面 到最左边右边的留出一块相对距离正好组成一个页面*/ #footer{height:100px; background:#85C8FA;} ul{background: #60F; height:40px; margin-bottom:1px #333; } ul li { height:40px; line-height:40px; float:left; list-style:none;} /*设置高度 行高 使其垂直居中*/ ul li a{ color:#fff; padding:0 20px;text-decoration:none; float:left; display:block;} /*设置a的内边距撑大 a盒子让连接范围扩大到边距 去掉下划线 设置ie6 不识别块状元素bug*/ ul li a:hover{ background: #FE9827;} /*设置鼠标移动效果 背景颜色*/ </style> </head> <body> <div id="header">web布局练习</div> <div id="nav"> <ul> <li><a href="#">首页</a></li> <li><a href="#">jquery</a></li> <li><a href="#">Javascript</a></li> <li><a href="#">xhtml</a></li> <li><a href="#">css3</a></li> <li><a href="#">html5</a></li> <li><a href="#">关于作者</a></li> </div> <div id="content"> <div id="box"> <div id="contentright"></div> </div> <div id="contentleft"></div> </div> <div id="footer">footer</div> </body> </html>