5.23 汽车之家界面练习

<!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-5.23.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="a1">1</div>
<div class="a2">2</div>
<div class="a3">3</div>
<div class="a4">4</div>
<div class="a5">5</div>
<div class="a6">6</div>
<div class="a7">7</div>
<div class="a8">8</div>
<div class="a9">9</div>
<div class="a10">10</div>
<div class="a12">12</div>
<div class="a13">13</div>
<div class="a14">14</div>
<div class="a15">15</div>
<div class="a16">16</div>
<div class="a17">17</div>
<div class="a18">18</div>
<div class="a19">19</div>
<div class="a20">20</div>
<div class="a21">21</div>
<div class="a22">22</div>
<div class="a23">23</div>
<div class="a24">24</div>
<div class="a25">25</div>
<div class="a26">26</div>
<div class="a27">27</div>
<div class="a28">28</div>
<div class="a29">29</div>
<div class="a30">30</div>
<div class="a31">31</div>
<div class="a32">32</div>
<div class="a33">33</div>
<div class="a34">34</div>
<div class="a35">35,视频文件</div>
</body>
</html>



@charset "utf-8";
/* CSS Document */
*
{ margin:0px;
padding:0px;
}
.a1
{ 100%;
height:30px;
left:0%;
top:0px;
border: #F00 1px solid;
 position: absolute;
}
.a2
{ 100%;
height:35px;
left:0%;
top:30px;
border: #F00 1px solid;
 position: absolute;
}
.a3
{ 100%;
height:40px;
left:0%;
top:65px;
border: #F00 1px solid;
 position: absolute;
}
.a4
{ 50%;
height:60px;
left:10%;
top:115px;
border: #F00 1px solid;
 position: absolute;
}
.a5
{ 29%;
height:60px;
left:61%;
top:115px;
border: #F00 1px solid;
 position: absolute;
}
.a6
{ 20%;
height:40px;
left:10%;
top:185px;
border: #F00 1px solid;
 position: absolute;
}
.a7
{ 40%;
height:40px;
left:30%;
top:185px;
border: #F00 1px solid;
 position: absolute;
}
.a8
{ 20%;
height:40px;
left:70%;
top:185px;
border: #F00 1px solid;
 position: absolute;
}
.a9
{ 80%;
height:30px;
right:10%;
top:240px;
border: #F00 1px solid;
 position: absolute;
}
.a10
{ 80%;
height:60px;
right:10%;
top:270px;
border: #F00 1px solid;
 position: absolute;
}
.a11
{ 80%;
height:40px;
right:10%;
top:340px;
border: #F00 1px solid;
 position: absolute;
}
.a12
{ 40%;
height:80px;
left:10%;
top:350px;
border: #F00 1px solid;
 position: absolute;
}
.a13
{ 30%;
height:80px;
left:50%;
top:350px;
border: #F00 1px solid;
 position: absolute;
}
.a14
{ 10%;
height:80px;
left:80%;
top:350px;
border: #F00 1px solid;
 position: absolute;
}
.a15
{ 40%;
height:40px;
left:10%;
top:440px;
border: #F00 1px solid;
 position: absolute;
}
.a16
{ 40%;
height:40px;
left:10%;
top:490px;
border: #F00 1px solid;
 position: absolute;
}
.a17
{ 40%;
height:200px;
left:10%;
top:540px;
border: #F00 1px solid;
 position: absolute;
}
.a18
{ 40%;
height:30px;
left:10%;
top:750px;
border: #F00 1px solid;
 position: absolute;
}
.a19
{ 40%;
height:50px;
left:10%;
top:790px;
border: #F00 1px solid;
 position: absolute;
}
.a20
{ 40%;
height:50px;
left:10%;
top:850px;
border: #F00 1px solid;
 position: absolute;
}
.a21
{ 30%;
height:40px;
left:50%;
top:440px;
border: #F00 1px solid;
 position: absolute;
}
.a22
{ 30%;
height:40px;
left:50%;
top:490px;
border: #F00 1px solid;
 position: absolute;
}
.a23
{ 30%;
height:200px;
left:50%;
top:540px;
border: #F00 1px solid;
 position: absolute;
}
.a24
{ 30%;
height:30px;
left:50%;
top:750px;
border: #F00 1px solid;
 position: absolute;
}
.a25
{ 30%;
height:50px;
left:50%;
top:790px;
border: #F00 1px solid;
 position: absolute;
}
.a26
{ 30%;
height:50px;
left:50%;
top:850px;
border: #F00 1px solid;
 position: absolute;
}
.a27
{ 10%;
height:40px;
left:80%;
top:440px;
border: #F00 1px solid;
 position: absolute;
}
.a28
{ 10%;
height:40px;
left:80%;
top:490px;
border: #F00 1px solid;
 position: absolute;
}
.a29
{ 10%;
height:200px;
left:80%;
top:540px;
border: #F00 1px solid;
 position: absolute;
}
.a30
{ 10%;
height:30px;
left:80%;
top:750px;
border: #F00 1px solid;
 position: absolute;
}
.a31
{ 10%;
height:50px;
left:80%;
top:790px;
border: #F00 1px solid;
 position: absolute;
}
.a32
{ 10%;
height:50px;
left:80%;
top:850px;
border: #F00 1px solid;
 position: absolute;
}.a33
{ 59%;
height:40px;
left:10%;
top:900px;
border: #F00 1px solid;
 position: absolute;
}
.a34
{ 20%;
height:40px;
left:70%;
top:900px;
border: #F00 1px solid;
 position: absolute;
}
.a35
{ 80%;
height:50px;
left:10%;
top:950px;
border: #F00 1px solid;
 position: absolute;
}
5.23 汽车之家 界面练习

5.23 汽车之家界面练习
