今天没有写完，而且写的还有点问题，所以今天就先不上传代码了（ps：快写完了才发现布局有问题，导致代码太多，感觉写的不是很好，所以今天先分析一下布局）
第一步先写一个大的div用来放ABC三个部分，这个大的div居中！
第二步分别写ABC三个部分，ABC三个部分分别使用浮动（float）来定位。A和B都各使用了一张非常小的图片，通过重复（repeat）属性生成A和B
第三步C部分分别写好3~16这几个模块，在通过组合利用浮动定位。分组如下：
E：3
F：4、7、10、13
G：5、8、11、14
H：5、9、12、15
J:16
然后利用E、F、G、H、J通过浮动定位。
这期间有许多问题，比如ABC的居中，浮动之间的相互影响。这些问题，我会在明天结合相关的代码进行详细的解释。PS：由于代码不是很合理所以今天就不上传代码和素材了。
=========================================分割线======================================================================
先上传图片
第一张代码图先设置一个大背景，用来盛放页面。
第二张代码图片将背景分为ABC三块（A是backleft，B是backcenter，C是backright）
第三张代码图将B部分（backcenter）分为4块EFGH（ps：J我没有写）。其中E为头部，F为bodyleft，G为bodycenter，H为bodyright
第四张代码图将E、F、G、H每部分分为4块（如4、7、10、13）
第五张代码图将将内容放到一个div（smallbox或者bigbox，可以根据情况写多个内容块）。每个box又包括top、body、bottom三个部分，其中body用来放内容。
结构大致就是这个样子。详细代码如下！！！！素材可以到这个点击这个链接下载http://note.youdao.com/share/?id=5d2e3ce65a0685cacb5dcfd485ecff6d&type=note
PS：明天开始写一些简单的响应式布局！！！！
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <link rel="stylesheet" type="text/css" href="2.css"> 7 </head> 8 <body> 9 <div class="back"> 10 <div class="backleft"></div> 11 <div class="backcenter"> 12 <div class="header"> 13 <img src="images/logo.png"> 14 <div class="mainnav">Kround的个人星空间<p>个人空间介绍，总是希望着，总是泯灭着</p></div> 15 <div class="topnav"> 16 <a href="">首页</a> 17 <a href="">|</a> 18 <a href="">会员中心</a> 19 <a href="">|</a> 20 <a href="">登录</a> 21 <a href="">|</a> 22 <a href="">注册</a> 23 </div> 24 </div> 25 <div class="bodyleft"> 26 <div class="musicman"> 27 <div class="smallbox"> 28 <div class="top"> 29 <div class="toptitle"> 30 <div class="titletext"><img class="titlelogo" src="images/titlelogo.png">音乐达人</div> 31 </div> 32 </div> 33 <div class="body"> 34 <img src="images/musicman.png" alt=""> 35 <div class="button"> 36 <div class="button-1"> 37 <button>个人资料</button> 38 <button>交友资料</button> 39 <button>加为好友</button> 40 </div> 41 <div class="button-2"> 42 <button>投他一票</button> 43 <button>给他留言</button> 44 <button>送他卡片</button> 45 </div> 46 </div> 47 </div> 48 <div class="bottom"></div> 49 </div> 50 </div> 51 <div class="musicbox"> 52 <div class="smallbox"> 53 <div class="top"> 54 <div class="toptitle"> 55 <div class="titletext"><img class="titlelogo" src="images/titlelogo.png">音乐达人</div> 56 </div> 57 </div> 58 <div class="body"> 59 <img src="images/musicman.png" alt=""> 60 <div class="button"> 61 <div class="button-1"> 62 <button>个人资料</button> 63 <button>交友资料</button> 64 <button>加为好友</button> 65 </div> 66 <div class="button-2"> 67 <button>投他一票</button> 68 <button>给他留言</button> 69 <button>送他卡片</button> 70 </div> 71 </div> 72 </div> 73 <div class="bottom"></div> 74 </div> 75 </div> 76 <div class="musicpc"> 77 <div class="smallbox"> 78 <div class="top"> 79 <div class="toptitle"> 80 <div class="titletext"><img class="titlelogo" src="images/titlelogo.png">音乐达人</div> 81 </div> 82 </div> 83 <div class="body"> 84 <img src="images/musicman.png" alt=""> 85 <div class="button"> 86 <div class="button-1"> 87 <button>个人资料</button> 88 <button>交友资料</button> 89 <button>加为好友</button> 90 </div> 91 <div class="button-2"> 92 <button>投他一票</button> 93 <button>给他留言</button> 94 <button>送他卡片</button> 95 </div> 96 </div> 97 </div> 98 <div class="bottom"></div> 99 </div> 100 </div> 101 <div class="musicdate"> 102 <div class="smallbox"> 103 <div class="top"> 104 <div class="toptitle"> 105 <div class="titletext"><img class="titlelogo" src="images/titlelogo.png">音乐达人</div> 106 </div> 107 </div> 108 <div class="body"> 109 <img src="images/musicman.png" alt=""> 110 <div class="button"> 111 <div class="button-1"> 112 <button>个人资料</button> 113 <button>交友资料</button> 114 <button>加为好友</button> 115 </div> 116 <div class="button-2"> 117 <button>投他一票</button> 118 <button>给他留言</button> 119 <button>送他卡片</button> 120 </div> 121 </div> 122 </div> 123 <div class="bottom"></div> 124 </div> 125 </div> 126 </div> 127 <div class="bodycenter"> 128 <div class="video"> 129 <div class="bigbox"> 130 <div class="top"> 131 <div class="toptitle"> 132 <div class="titletext"><img class="titlelogo" src="images/titlelogo.png">视频<a href="">more</a></div> 133 </div> 134 </div> 135 <div class="body"> 136 <div class="videoimg"> 137 <img src="images/video.jpg" alt=""> 138 <div>爱的初体验 223票</div> 139 <div class="button"> 140 <div class="button-1"> 141 <button>投票</button> 142 </div> 143 </div> 144 </div> 145 <div class="videoimg"> 146 <img src="images/video.jpg" alt=""> 147 <div>爱的初体验 223票</div> 148 <div class="button"> 149 <div class="button-1"> 150 <button>投票</button> 151 </div> 152 </div> 153 </div> 154 <div class="videoimg"> 155 <img src="images/video.jpg" alt=""> 156 <div>爱的初体验 223票</div> 157 <div class="button"> 158 <div class="button-1"> 159 <button>投票</button> 160 </div> 161 </div> 162 </div> 163 </div> 164 <div class="bottom"></div> 165 </div> 166 </div> 167 <div class="songtext"> 168 <div class="bigbox"> 169 <div class="top"> 170 <div class="toptitle"> 171 <div class="titletext"><img class="titlelogo" src="images/titlelogo.png">视频<a href="">more</a></div> 172 </div> 173 </div> 174 <div class="body"> 175 <div class="videoimg"> 176 <img src="images/video.jpg" alt=""> 177 <div>爱的初体验 223票</div> 178 <div class="button"> 179 <div class="button-1"> 180 <button>投票</button> 181 </div> 182 </div> 183 </div> 184 <div class="videoimg"> 185 <img src="images/video.jpg" alt=""> 186 <div>爱的初体验 223票</div> 187 <div class="button"> 188 <div class="button-1"> 189 <button>投票</button> 190 </div> 191 </div> 192 </div> 193 <div class="videoimg"> 194 <img src="images/video.jpg" alt=""> 195 <div>爱的初体验 223票</div> 196 <div class="button"> 197 <div class="button-1"> 198 <button>投票</button> 199 </div> 200 </div> 201 </div> 202 </div> 203 <div class="bottom"></div> 204 </div> 205 </div> 206 <div class="picimages"> 207 <div class="bigbox"> 208 <div class="top"> 209 <div class="toptitle"> 210 <div class="titletext"><img class="titlelogo" src="images/titlelogo.png">视频<a href="">more</a></div> 211 </div> 212 </div> 213 <div class="body"> 214 <div class="videoimg"> 215 <img src="images/video.jpg" alt=""> 216 <div>爱的初体验 223票</div> 217 <div class="button"> 218 <div class="button-1"> 219 <button>投票</button> 220 </div> 221 </div> 222 </div> 223 <div class="videoimg"> 224 <img src="images/video.jpg" alt=""> 225 <div>爱的初体验 223票</div> 226 <div class="button"> 227 <div class="button-1"> 228 <button>投票</button> 229 </div> 230 </div> 231 </div> 232 <div class="videoimg"> 233 <img src="images/video.jpg" alt=""> 234 <div>爱的初体验 223票</div> 235 <div class="button"> 236 <div class="button-1"> 237 <button>投票</button> 238 </div> 239 </div> 240 </div> 241 </div> 242 <div class="bottom"></div> 243 </div> 244 </div> 245 <div class="writetext"> 246 <div class="bigbox"> 247 <div class="top"> 248 <div class="toptitle"> 249 <div class="titletext"><img class="titlelogo" src="images/titlelogo.png">视频<a href="">more</a></div> 250 </div> 251 </div> 252 <div class="body"> 253 <div class="videoimg"> 254 <img src="images/video.jpg" alt=""> 255 <div>爱的初体验 223票</div> 256 <div class="button"> 257 <div class="button-1"> 258 <button>投票</button> 259 </div> 260 </div> 261 </div> 262 <div class="videoimg"> 263 <img src="images/video.jpg" alt=""> 264 <div>爱的初体验 223票</div> 265 <div class="button"> 266 <div class="button-1"> 267 <button>投票</button> 268 </div> 269 </div> 270 </div> 271 <div class="videoimg"> 272 <img src="images/video.jpg" alt=""> 273 <div>爱的初体验 223票</div> 274 <div class="button"> 275 <div class="button-1"> 276 <button>投票</button> 277 </div> 278 </div> 279 </div> 280 </div> 281 <div class="bottom"></div> 282 </div> 283 </div> 284 </div> 285 <div class="bodyright"> 286 <div class="visited"> 287 <div class="smallbox"> 288 <div class="top"> 289 <div class="toptitle"> 290 <div class="titletext"><img class="titlelogo" src="images/titlelogo.png">音乐达人</div> 291 </div> 292 </div> 293 <div class="body"> 294 <img src="images/musicman.png" alt=""> 295 <div class="button"> 296 <div class="button-1"> 297 <button>个人资料</button> 298 <button>交友资料</button> 299 <button>加为好友</button> 300 </div> 301 <div class="button-2"> 302 <button>投他一票</button> 303 <button>给他留言</button> 304 <button>送他卡片</button> 305 </div> 306 </div> 307 </div> 308 <div class="bottom"></div> 309 </div> 310 </div> 311 <div class="writesth"> 312 <div class="smallbox"> 313 <div class="top"> 314 <div class="toptitle"> 315 <div class="titletext"><img class="titlelogo" src="images/titlelogo.png">音乐达人</div> 316 </div> 317 </div> 318 <div class="body"> 319 <img src="images/musicman.png" alt=""> 320 <div class="button"> 321 <div class="button-1"> 322 <button>个人资料</button> 323 <button>交友资料</button> 324 <button>加为好友</button> 325 </div> 326 <div class="button-2"> 327 <button>投他一票</button> 328 <button>给他留言</button> 329 <button>送他卡片</button> 330 </div> 331 </div> 332 </div> 333 <div class="bottom"></div> 334 </div> 335 </div> 336 <div class="friends"> 337 <div class="smallbox"> 338 <div class="top"> 339 <div class="toptitle"> 340 <div class="titletext"><img class="titlelogo" src="images/titlelogo.png">音乐达人</div> 341 </div> 342 </div> 343 <div class="body"> 344 <img src="images/musicman.png" alt=""> 345 <div class="button"> 346 <div class="button-1"> 347 <button>个人资料</button> 348 <button>交友资料</button> 349 <button>加为好友</button> 350 </div> 351 <div class="button-2"> 352 <button>投他一票</button> 353 <button>给他留言</button> 354 <button>送他卡片</button> 355 </div> 356 </div> 357 </div> 358 <div class="bottom"></div> 359 </div> 360 </div> 361 <div class="star"> 362 <div class="smallbox"> 363 <div class="top"> 364 <div class="toptitle"> 365 <div class="titletext"><img class="titlelogo" src="images/titlelogo.png">音乐达人</div> 366 </div> 367 </div> 368 <div class="body"> 369 <img src="images/musicman.png" alt=""> 370 <div class="button"> 371 <div class="button-1"> 372 <button>个人资料</button> 373 <button>交友资料</button> 374 <button>加为好友</button> 375 </div> 376 <div class="button-2"> 377 <button>投他一票</button> 378 <button>给他留言</button> 379 <button>送他卡片</button> 380 </div> 381 </div> 382 </div> 383 <div class="bottom"></div> 384 </div> 385 </div> 386 </div> 387 </div> 388 <div class="backright"></div> 389 </div> 390 </body> 391 </html>
*{margin: 0;padding: 0;} *{list-style: none;} .back{margin: 0 auto;width: 1030px;background-color: red;} .backleft{float: left;width: 40px;height:1670px;background-image: url(images/leftsidebar.png);background-repeat: repeat;} .backcenter{float: left;width: 950px;height: 1670px;background-color: rgb(255,204,51);} .backright{float: left;width: 40px;height:1670px;background-image: url(images/rightsidebar.png);background-repeat: repeat;} .header{width: 950px;height: 224px;background-image: url(images/centerbar.png);background-repeat: repeat;float: left;} .backcenter img{position: relative;left: 0px;top: 0px;} .mainnav{width: 460px;height: 100px;background-color:rgba(255,255,255,0.5); font-size: 34px;color: rgb(128,70,85);line-height: 50px;text-indent: 20px;position: relative;left: 310px;top: -160px;} .mainnav p{font-size: 12px;color: rgb(128,70,85);} .topnav{background-image: url(images/topnav.png);width: 305px;height: 28px;background-repeat: no-repeat; text-align: center;text-indent: 25px;line-height: 30px;position: relative;left: 645px;top: -325px;} .topnav a{text-decoration: none;} .bodyleft{width: 230px;height: 1446px;float: left;margin-left: 10px;} .bodycenter{width: 450px;height: 1446px;float: left;margin-left: 10px;} .bodyright{width: 230px;height: 1446px;float: left;margin-left: 10px;} .musicman{margin-top: 10px;} .musicbox{margin-top: 10px;} .musicpc{margin-top: 10px;} .musicdate{margin-top: 10px;} .smallbox{width: 230px;height: 350px;} .top{width: 230px;height: 45px;background-color: rgb(255,180,104);} .body{width: 230px;height: 280px;background-color: rgb(254,209,167);} .bottom{width: 230px;height: 25px;background-color: rgb(255,180,104);} .toptitle{width: 230px;height: 45px;position: relative;left: 10px;top: 5px;} .titletext{font-size: 20px;color: rgb(128,70,85);position: relative;left: 10px;top: 5px;} .titletext img{position: relative;left: -10px;top: 5px;} .titletext a{position: relative;left: 10px;top: 5px;} .body img{position: relative;left: 15px;top: 15px;} .button{position: relative;left: 11px;top: 20px;} .button div button{border: none; width: 60px;height: 20px;background-image: url(images/offbutton.png);cursor: pointer;color: black;margin: 2px; } .button div button:hover{background-image: url(images/onbutton.png);color:rgb(128,70,85);} .video{margin-top: 10px;} .songtext{margin-top: 10px;} .picimages{margin-top: 10px;} .writetext{margin-top: 10px;} .bigbox{width: 450px;height: 320px;} .bigbox .top{width: 450px;} .bigbox .body{width: 450px;height: 250px;} .bigbox .bottom{width: 450px;} .bigbox .titletext a{position: relative;left: 320px;top: -2px;} .videoimg{width: 140px;height: 220px;float: left;margin: 5px;} .videoimg img{position: relative;left: 10px;top: 10px;} .videoimg div{font-size: 16px;position: relative;left: 7px;top: 12px;} .videoimg .button{position: relative;left: 30px;top: 5px;} .videoimg:hover{cursor: pointer;background-color: rgb(249,177,105);} .visited{margin-top: 10px;} .writesth{margin-top: 10px;} .friends{margin-top: 10px;} .star{margin-top: 10px;}