html布局练习

来源：互联网发布：ubuntu kylin 14.04 编辑：程序博客网时间：2024/05/22 23:27

做出来的最后结果

<!DOCTYPE html><html><head><title>layout</title><link rel="stylesheet" type="text/css" href="layout.css"/></head><body><div id="container"><div id="head"><div id="head_left"><!--头部的左边--></div><div id="head_mid"><!--头部的中间--></div><div id="head_right"><!--头部的右边--></div></div><div class="nav"></div><div id="head_menu"><!--头部的导航--><ol><li><a href="#">联系我们</a></li><li class="tiao"></li> <!--做导航中间的黑条--><li><a href="#">联系我们</a></li><li class="tiao"></li><li><a href="#">联系我们</a></li><li class="tiao"></li><li><a href="#">联系我们</a></li><li class="tiao"></li><li><a href="#">联系我们</a></li></ol></div><div class="nav"></div><div id="main"> <!--中间容器--><div id="main_left"> <!--中间左边--><div id="left_one"> <div class="title"><h3>热门文章</h3></div><div class="content"><ol><li><a href="#">aaaaaaaaaaaaaaaa</a></li><li><a href="#">aaaaaaaaaaaaaaaa</a></li><li><a href="#">aaaaaaaaaaaaaaaa</a></li><li><a href="#">aaaaaaaaaaaaaaaa</a></li><li><a href="#">aaaaaaaaaaaaaaaa</a></li><li><a href="#">aaaaaaaaaaaaaaaa</a></li></ol></div></div><div id="left_two"></div><div class="nav"></div><div id="left_one"></div><div id="left_two"></div></div><div id="main_right">  <!--中间右边--></div></div><div class="nav"></div><div id="ad"></div><div class="nav"></div><div id="footer">  <!--页脚--></div></div></body></html>

body{margin:0px; padding:0px;/*清理body的内边框与外边框*/}#container{margin-left:auto;margin-right:auto;width:960px;/*左边距与右边距自动，即可居中*/}.nav{width:960px;height:10px;clean:both;float:left;/*往左浮动，并且清除两边的浮动相等于换行了*/}#head{width:100%;height:120;}#head #head_left{width:200px;height:90px;background-color:yellow;float:left;}#head #head_mid{width:540px;height:90px;background-color:green;float:left;margin-left:10px;margin-right:10px;}#head #head_right{width:200px;height:90px;background-color:blue;float:left;}#head_menu{width:100%;height:30px;float:left;background-color:gray;}#main{width:100%;height:600px;float:left;}#main #main_left{width:650px;height:600px;float:left;}#main #main_left #left_one{width:220px;height:295px;float:left;background-color:yellow;}#main #main_left #left_two{width:420px;height:295px;float:right;background-color:yellow;}#main #main_right{width:300px;height:600px;float:right;background-color:red;}#ad{width:960px;height:80px;background-color:green;float:left;}#footer{width:960px;height:80px;background-color:blue;float:left;}ol{font-size:12px;list-style:none;margin:0px;padding:0px;}#head_menu li{float:left;text-align:center;width:80px;line-height:30px;}#head_menu .tiao{float:left;background-color:black;width:1px;height:20px;margin-top:6px;}#head_menu li a {color:white;}#head_menu li a:hover {position:relative;top:1px;left:1px;}.title {float:left;width:100%;height:26px;background:url(images/title.png) no-repeat right ;/*背景从右开始，获得右边的圆角*/}.title h3 {margin:0px;padding:0px;padding-left:10px;width:100px;line-height:26px;font-size:14px;background:url(images/title.png) no-repeat left ;/*背景从左边开始，获得左边的圆角，然后只显示一部分*/}.content a{font-size:14px;padding-left:15px;background:url(images/li_icon.gif) no-repeat left;line-height:18px;}.content li{background:url(images/dot.gif) repeat-x bottom;}

0 0