汽车之家官网首页排版与布局

源代码：

<!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;}

效果图

相关阅读:
字典树Trie
转载一个不错的LRU cache
git和github基础入门
 git基础之常用操作
 python矩阵和向量的转置问题
 梯度下降法注意要点
 python 浮点数问题
 Python数据分析基础——读写CSV文件2
Python数据分析基础——读写CSV文件
 读书笔记----javascript函数编程
原文地址：https://www.cnblogs.com/zyg316/p/5521294.html