汽车之家官网首页排版与布局
源代码：
<!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=utf-8" /> <title>无标题文档</title> <link href="Untitled-2.css" rel="stylesheet" type="text/css" /> <style> * { margin:0px; padding:0px; } </style> </head> <body> <div class="a1"></div> <div class="a2"></div> <div class="a3"></div> <div class="f1"></div> <div class="f2"> <table width="85" height="110" border="0" cellspacing="0"> <tr><td><a href="http://app.autohome.com.cn/" target="_blank"><img src="2345截图20160523111742.png" /></a></td></tr> </table> </div> <div class="a4"></div> <div class="a5"></div> <div class="a6"></div> <div class="a7"></div> <div class="a8"></div> <div class="a9"></div> <div class="b1"></div> <div class="b2"></div> <div class="b3"></div> <div class="b4"></div> <div class="b5"></div> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> <div class="c4"></div> <div class="c5"></div> <div class="c6"></div> <div class="c7"></div> <div class="c8"></div> <div class="b6"></div> <div class="b7"></div> <div class="b8"></div> <div class="d1"></div> <div class="d2"></div> <div class="d3"></div> <div class="d4"></div> <div class="d5"></div> <div class="d6"></div> <div class="d7"></div> <div class="d8"></div> <div class="d9"></div> <div class="b9"></div> <div class="e1"></div> <div class="e2"></div> <div class="e3"></div> <div class="e4"></div> <div class="e5"></div> <div class="e6"></div> <div class="e7"></div> </body> </html>
css外部样式表：
@charset "utf-8"; /* CSS Document */ .a1 { width:100%; height:30px; background-color:#000; border:1px solid #999; position:absolute;} .a2 { width:100%; height:30px; top:30px; background-color:#006; border:1px solid #666; position:absolute;} .a3 { width:100%; height:50px; top:60px; background-color:#999; position:absolute;} .f1 { width:12%; height:87px; left:13%; top:23px; border:1px solid #CCC; background-color:#FFF; position:absolute;} .f2 { width:8%; height:140px; left:88%; top:230px; border:0px solid #999; position:fixed;} .a4 { width:50%; height:100px; left:13%; top:120px; border:1px solid #999; position:absolute;} .a5 { width:23%; height:100px; left:64%; top:120px; border:1px solid #999; position:absolute;} .a6 { width:74%; height:50px; left:13%; top:230px; border:1px solid #999; position:absolute;} .a7 { width:40%; height:30px; left:13%; top:290px; border:1px solid #999; position:absolute;} .a8 { width:20%; height:30px; left:55%; top:290px; border:1px solid #999; position:absolute;} .a9 { width:10%; height:30px; left:77%; top:290px; border:1px solid #999; position:absolute;} .b1 { width:74%; height:160px; left:13%; top:330px; border:1px solid #999; position:absolute;} .b2 { width:5%; height:50px; left:13%; top:500px; border:1px solid #999; position:absolute;} .b3 { width:62%; height:50px; left:19%; top:500px; border:1px solid #999; position:absolute;} .b4 { width:5%; height:50px; left:82%; top:500px; border:1px solid #999; position:absolute;} .b5 { width:26%; height:300px; left:13%; top:560px; border:1px solid #999; position:absolute;} .c1 { width:26%; height:100px; left:13%; top:870px; border:1px solid #999; position:absolute;} .c2 { width:26%; height:100px; left:13%; top:980px; border:1px solid #999; position:absolute;} .c3 { width:26%; height:250px; left:13%; top:1090px; border:1px solid #999; position:absolute;} .c4 { width:26%; height:300px; left:13%; top:1340px; border:1px solid #999; position:absolute;} .c5 { width:26%; height:250px; left:13%; top:1640px; border:1px solid #999; position:absolute;} .c6 { width:26%; height:50px; left:13%; top:1900px; border:1px solid #999; position:absolute;} .c7 { width:26%; height:150px; left:13%; top:1960px; border:1px solid #999; position:absolute;} .c8 { width:26%; height:150px; left:13%; top:2120px; border:1px solid #999; position:absolute;} .b6 { width:26%; height:50px; left:40%; top:560px; border:1px solid #999; position:absolute;} .b7 { width:26%; height:25px; left:40%; top:620px; border:1px solid #999; position:absolute;} .b8 { width:26%; height:300px; left:40%; top:655px; border:1px solid #999; position:absolute;} .d1 { width:26%; height:25px; left:40%; top:965px; border:1px solid #999; position:absolute;} .d2 { width:26%; height:300px; left:40%; top:1000px; border:1px solid #999; position:absolute;} .d3 { width:26%; height:25px; left:40%; top:1310px; border:1px solid #999; position:absolute;} .d4 { width:26%; height:350px; left:40%; top:1345px; border:1px solid #999; position:absolute;} .d5 { width:26%; height:25px; left:40%; top:1705px; border:1px solid #999; position:absolute;} .d6 { width:26%; height:250px; left:40%; top:1740px; border:1px solid #999; position:absolute;} .d7 { width:26%; height:25px; left:40%; top:2000px; border:1px solid #999; position:absolute;} .d8 { width:26%; height:200px; left:40%; top:2035px; border:1px solid #999; position:absolute;} .d9 { width:26%; height:25px; left:40%; top:2245px; border:1px solid #999; position:absolute;} .b9 { width:20%; height:200px; left:67%; top:560px; border:1px solid #999; position:absolute;} .e1 { width:20%; height:300px; left:67%; top:770px; border:1px solid #999; position:absolute;} .e2 { width:20%; height:250px; left:67%; top:1080px; border:1px solid #999; position:absolute;} .e3 { width:20%; height:300px; left:67%; top:1340px; border:1px solid #999; position:absolute;} .e4 { width:20%; height:500px; left:67%; top:1650px; border:1px solid #999; position:absolute;} .e5 { width:20%; height:110px; left:67%; top:2160px; border:1px solid #999; position:absolute;} .e6 { width:52%; height:100px; left:13%; top:2280px; border:1px solid #999; position:absolute;} .e7 { width:21%; height:100px; left:66%; top:2280px; border:1px solid #999; position:absolute;}
效果图
