html代码
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>DIV+CSS布局网站首页实例</title> 6 <link rel="stylesheet" type="text/css" href="css/layout.css" /> 7 </head> 8 9 <body> 10 <div id="container"> 11 <div id="header"> 12 <div id="logo"> 13 14 </div> 15 <div id="banner"> 16 17 </div> 18 <div id="tool"> 19 20 </div> 21 <div class="nav"></div> 22 <div id="menu"> 23 <ul> 24 <li><a href="#">联系我们</a></li> 25 <li class="tiao"></li> 26 <li><a href="#">联系我们</a></li> 27 <li class="tiao"></li> 28 <li><a href="#">联系我们</a></li> 29 <li class="tiao"></li> 30 <li><a href="#">联系我们</a></li> 31 <li class="tiao"></li> 32 <li><a href="#">联系我们</a></li> 33 <li class="tiao"></li> 34 <li><a href="#">联系我们</a></li> 35 </ul> 36 </div> 37 </div> 38 <div class="nav"></div> 39 <div id="main"> 40 <div class="leftbox"> 41 <div class="left"> 42 <div class="tit"><h3>热门文章</h3></div> 43 44 <div class="content"> 45 <ul> 46 <li><a href="#">aaaaaaaaaa</a></li> 47 <li><a href="#">aaaaaaaaaa</a></li> 48 <li><a href="#">aaaaaaaaaa</a></li> 49 <li><a href="#">aaaaaaaaaa</a></li> 50 <li><a href="#">aaaaaaaaaa</a></li> 51 </ul> 52 </div> 53 </div> 54 <div class="right"> 55 56 </div> 57 <div class="nav"></div> 58 <div class="left"> 59 60 </div> 61 <div class="right"> 62 63 </div> 64 </div> 65 <div class="rightbox"> 66 67 </div> 68 <div class="nav"></div> 69 <div class="guanggao"> 70 <div class="tit"><h3>热门文章</h3></div> 71 </div> 72 <div class="nav"></div> 73 <div class="leftbox"> 74 <div class="left"> 75 <div class="tit"><h3>热门文章</h3></div> 76 77 <div class="content"></div> 78 </div> 79 <div class="right"> 80 81 </div> 82 <div class="nav"></div> 83 <div class="left"> 84 85 </div> 86 <div class="right"> 87 88 </div> 89 </div> 90 <div class="rightbox"> 91 92 </div> 93 </div> 94 <div class="nav"></div> 95 <div id="footer"> 96 97 </div> 98 </div> 99 </body> 100 </html>
layout.css代码
1 /* CSS Document */ 2 body{ 3 margin:0px; 4 padding:0px; 5 font:12px "宋体"; 6 text-align:center; 7 } 8 9 #container{ 10 margin-left:auto; 11 margin-right:auto; 12 1300px; 13 text-align:left; 14 } 15 16 #header{ 17 100%; 18 float:left; 19 } 20 21 #header #logo{ 22 19%; 23 height:80px; 24 background:#ff00ff; 25 float:left; 26 } 27 28 #header #banner{ 29 65%; 30 height:80px; 31 margin-left:1%; 32 background:blue; 33 float:left; 34 } 35 36 #header #tool{ 37 14%; 38 height:80px; 39 background:black; 40 float:right; 41 } 42 43 #header #menu{ 44 100%; 45 /*height:28px;*/ 46 background-color:#aaa; 47 float:inherit; 48 /*float:left; 49 float:both;*/ 50 } 51 #main{ 52 1300px; 53 float:left; 54 } 55 56 #main .leftbox{ 57 float:left; 58 990px; 59 } 60 61 .leftbox .left{ 62 float:left; 63 400px; 64 height:195px; 65 background:yellow; 66 } 67 .tit{ 68 float:left; 69 100%; 70 height:26px; 71 background:url(../images/title.png) no-repeat right; 72 } 73 74 .content{ 75 float:left; 76 398px !important; 77 400px; 78 height:169px; 79 border:1px solid #bbb; 80 } 81 82 .content li{ 83 100%; 84 text-align:left; 85 padding-left:5px; 86 line-height:20px; 87 font-size:16px; 88 } 89 90 .content li{ 91 background:url(../images/li_icon.gif) no-repeat 0 center; 92 padding-left:15px; 93 } 94 95 .content li a{ 96 text-decoration:none; 97 background:url(../images/dot.gif) repeat-x bottom; 98 } 99 100 .tit h3{ 101 margin:0px; 102 padding:0px; 103 padding-left:5px; 104 350px; 105 line-height:26px; 106 font-size:14px; 107 background:url(../images/title.png) no-repeat left; 108 } 109 110 .leftbox .right{ 111 float:right; 112 580px; 113 height:195px; 114 background:yellow; 115 } 116 117 #main .rightbox{ 118 float:right; 119 300px; 120 height:400px; 121 background:red; 122 } 123 124 .guanggao{ 125 float:left; 126 100%; 127 height:100px; 128 background:green; 129 } 130 131 ul{ 132 background:yellow; 133 margin:0px; 134 padding:0px; 135 list-style:none; 136 } 137 138 #menu li{ 139 height:20px; 140 line-height:20px; 141 padding-top:5px; 142 padding-bottom:5px; 143 100px; 144 float:left; 145 text-align:center; 146 } 147 148 #menu a{ 149 color:white; 150 } 151 152 #header #menu .tiao{ 153 1px; 154 height:10px; 155 margin-top:5px; 156 overflow:hidden; 157 background:#000; 158 float:left; 159 } 160 161 #footer{ 162 1300px; 163 height:80px; 164 background:blue; 165 float:left; 166 } 167 168 .nav{ 169 100%; 170 height:10px; 171 clear:both; 172 overflow:hidden; /*IE指定的最小高度为18px，所以我们让超出部分隐藏*/ 173 float:left; 174 } 175 176 a:hover{ 177 position:relative; 178 top:1px; 179 left:1px; 180 color:red; 181 }