html代码
<!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=gb2312" /> <title>DIV+CSS布局网站首页实例</title> <link rel="stylesheet" type="text/css" href="css/layout.css" rel="external nofollow" /> </head> <body> <div id="container"> <div id="header"> <div id="logo"> </div> <div id="banner"> </div> <div id="tool"> </div> <div class="nav"></div> <div id="menu"> <ul> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >联系我们</a></li> <li class="tiao"></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >联系我们</a></li> <li class="tiao"></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >联系我们</a></li> <li class="tiao"></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >联系我们</a></li> <li class="tiao"></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >联系我们</a></li> <li class="tiao"></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >联系我们</a></li> </ul> </div> </div> <div class="nav"></div> <div id="main"> <div class="leftbox"> <div class="left"> <div class="tit"><h3>热门文章</h3></div> <div class="content"> <ul> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >aaaaaaaaaa</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >aaaaaaaaaa</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >aaaaaaaaaa</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >aaaaaaaaaa</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >aaaaaaaaaa</a></li> </ul> </div> </div> <div class="right"> </div> <div class="nav"></div> <div class="left"> </div> <div class="right"> </div> </div> <div class="rightbox"> </div> <div class="nav"></div> <div class="guanggao"> <div class="tit"><h3>热门文章</h3></div> </div> <div class="nav"></div> <div class="leftbox"> <div class="left"> <div class="tit"><h3>热门文章</h3></div> <div class="content"></div> </div> <div class="right"> </div> <div class="nav"></div> <div class="left"> </div> <div class="right"> </div> </div> <div class="rightbox"> </div> </div> <div class="nav"></div> <div id="footer"> </div> </div> </body> </html>
layout.css代码
/* CSS Document */ body{ margin:0px; padding:0px; font:12px "宋体"; text-align:center; } #container{ margin-left:auto; margin-right:auto; width:1300px; text-align:left; } #header{ width:100%; float:left; } #header #logo{ width:19%; height:80px; background:#ff00ff; float:left; } #header #banner{ width:65%; height:80px; margin-left:1%; background:blue; float:left; } #header #tool{ width:14%; height:80px; background:black; float:right; } #header #menu{ width:100%; /*height:28px;*/ background-color:#aaa; float:inherit; /*float:left; float:both;*/ } #main{ width:1300px; float:left; } #main .leftbox{ float:left; width:990px; } .leftbox .left{ float:left; width:400px; height:195px; background:yellow; } .tit{ float:left; width:100%; height:26px; background:url(../images/title.png) no-repeat right; } .content{ float:left; width:398px !important; width:400px; height:169px; border:1px solid #bbb; } .content li{ width:100%; text-align:left; padding-left:5px; line-height:20px; font-size:16px; } .content li{ background:url(../images/li_icon.gif) no-repeat 0 center; padding-left:15px; } .content li a{ text-decoration:none; background:url(../images/dot.gif) repeat-x bottom; } .tit h3{ margin:0px; padding:0px; padding-left:5px; width:350px; line-height:26px; font-size:14px; background:url(../images/title.png) no-repeat left; } .leftbox .right{ float:right; width:580px; height:195px; background:yellow; } #main .rightbox{ float:right; width:300px; height:400px; background:red; } .guanggao{ float:left; width:100%; height:100px; background:green; } ul{ background:yellow; margin:0px; padding:0px; list-style:none; } #menu li{ height:20px; line-height:20px; padding-top:5px; padding-bottom:5px; width:100px; float:left; text-align:center; } #menu a{ color:white; } #header #menu .tiao{ width:1px; height:10px; margin-top:5px; overflow:hidden; background:#000; float:left; } #footer{ width:1300px; height:80px; background:blue; float:left; } .nav{ width:100%; height:10px; clear:both; overflow:hidden; /*IE指定的最小高度为18px，所以我们让超出部分隐藏*/ float:left; } a:hover{ position:relative; top:1px; left:1px; color:red; }
