1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 body { 8 margin: 0; /*设置外边距为0*/ 9 text-align: center; 10 background-color: #ffffcc; 11 } 12 13 #container { 14 width: 800px; 15 height: 1000px; 16 background-color: #ffff00; 17 margin: 0 auto; /*居中显示，块自适应宽*/ 18 } 19 20 #header { 21 float: left; /*元素向左浮动*/ 22 width: 800px; 23 height: 100px; 24 margin: 0 auto; 25 clear: both; /*拒绝下方的元素飘上来，例如menu*/ 26 background-color: #ff0000; 27 } 28 29 #logo { 30 float: left; 31 width: 250px; 32 height: 90px; 33 background-color: green; 34 clear: right; 35 margin: 0; 36 } 37 38 #banner { 39 float: right; 40 width: 540px; 41 height: 90px; 42 margin: 0; 43 background-color: #67ff0c; 44 } 45 46 #menu { 47 width: 800px; 48 height: 35px; 49 margin: 0 auto; 50 clear: both; 51 background-color: gray; 52 } 53 54 .nav { 55 margin: 0 auto; 56 width: 800px; 57 height: 10px; 58 clear: both; 59 background-color: #ffffff; 60 line-height: 10px; /*设置行高，免得字体超出*/ 61 } 62 63 .nav_a { 64 float: left; 65 /*margin: 0 auto;因为不占整屏的宽度所以就不设置了*/ 66 width: 610px; 67 height: 10px; 68 clear: both; 69 background-color: #ffffff; 70 line-height: 10px; 71 } 72 73 .left_main { 74 margin: 0; 75 float: left; 76 width: 610px; 77 height: 420px; 78 clear: right; 79 background-color: #ff0000; 80 } 81 82 .right_main { 83 margin: 0; 84 float: right; 85 width: 180px; 86 height: 420px; 87 background-color: rgba(91, 69, 180, 0.89); 88 } 89 90 .left_a { 91 margin: 0; 92 float: left; 93 width: 300px; 94 height: 205px; 95 background-color: #0000ff; 96 } 97 98 .left_b { 99 margin: 0; 100 float: right; 101 width: 300px; 102 height: 205px; 103 clear: right; /*可有可无*/ 104 background-color: #0000ff; 105 } 106 107 .con { 108 margin: 0px; 109 width: 800px; 110 height: 200px; 111 clear: both; 112 border-bottom-style: solid; 113 background-color: #691a36; 114 } 115 116 .one { 117 margin-left: 5px; 118 float: left; 119 width: 150px; 120 height: 200px; 121 clear: left; 122 background-color: #ff99f0; 123 } 124 125 .two { 126 float: left; 127 margin-left: 10px; 128 width: 150px; 129 height: 200px; 130 background-color: #ffccf0; 131 } 132 133 .three { 134 float: left; 135 margin-left: 10px; 136 width: 150px; 137 height: 200px; 138 background-color: #0ffff0; 139 } 140 141 .four { 142 float: left; 143 margin-left: 10px; 144 width: 150px; 145 height: 200px; 146 background-color: #f0fff0; 147 } 148 149 .five { 150 float: left; 151 margin-left: 10px; 152 width: 150px; 153 height: 200px; 154 background-color: rgba(35, 255, 202, 0.45); 155 } 156 157 #footer { 158 margin: 0 auto; 159 width: 800px; 160 height: 25px; 161 background-color: red; 162 } 163 164 165 </style> 166 </head> 167 <body> 168 169 170 <div id="container"> 171 <div id="header"> 172 <div id="logo">logo</div> 173 <div id="banner">banner</div> 174 </div> 175 <div id="menu">menu</div> 176 <div class="nav">nav</div> 177 <div class="left_main"> 178 <div class="left_a">left_a</div> 179 <div class="left_b">left_b</div> 180 <div class="nav_a">nav</div> 181 <div class="left_a">left_a</div> 182 <div class="left_b">left_b</div> 183 </div> 184 <div class="right_main">right_main</div> 185 <div class="nav">nav</div> 186 <div class="con"> 187 <div class="one">one</div> 188 <div class="two">two</div> 189 <div class="three">three</div> 190 <div class="four">four</div> 191 <div class="five">five</div> 192 </div> 193 <div class="con"> 194 <div class="one">one</div> 195 <div class="two">two</div> 196 <div class="three">three</div> 197 <div class="four">four</div> 198 <div class="five">five</div> 199 </div> 200 <div id="footer">footer</div> 201 202 </div> 203 </body> 204 </html>
效果图：
