码迷,mamicode.com
首页 > 其他好文 > 详细

5.23 汽车之家 界面练习

时间:2016-05-23 14:54:41      阅读:117      评论:0      收藏:0      [点我收藏+]

标签:

<!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
{ width:100%;
height:30px;
left:0%;
top:0px;
border: #F00 1px solid;
 position: absolute;
}
.a2
{ width:100%;
height:35px;
left:0%;
top:30px;
border: #F00 1px solid;
 position: absolute;
}
.a3
{ width:100%;
height:40px;
left:0%;
top:65px;
border: #F00 1px solid;
 position: absolute;
}
.a4
{ width:50%;
height:60px;
left:10%;
top:115px;
border: #F00 1px solid;
 position: absolute;
}
.a5
{ width:29%;
height:60px;
left:61%;
top:115px;
border: #F00 1px solid;
 position: absolute;
}
.a6
{ width:20%;
height:40px;
left:10%;
top:185px;
border: #F00 1px solid;
 position: absolute;
}
.a7
{ width:40%;
height:40px;
left:30%;
top:185px;
border: #F00 1px solid;
 position: absolute;
}
.a8
{ width:20%;
height:40px;
left:70%;
top:185px;
border: #F00 1px solid;
 position: absolute;
}
.a9
{ width:80%;
height:30px;
right:10%;
top:240px;
border: #F00 1px solid;
 position: absolute;
}
.a10
{ width:80%;
height:60px;
right:10%;
top:270px;
border: #F00 1px solid;
 position: absolute;
}
.a11
{ width:80%;
height:40px;
right:10%;
top:340px;
border: #F00 1px solid;
 position: absolute;
}
.a12
{ width:40%;
height:80px;
left:10%;
top:350px;
border: #F00 1px solid;
 position: absolute;
}
.a13
{ width:30%;
height:80px;
left:50%;
top:350px;
border: #F00 1px solid;
 position: absolute;
}
.a14
{ width:10%;
height:80px;
left:80%;
top:350px;
border: #F00 1px solid;
 position: absolute;
}
.a15
{ width:40%;
height:40px;
left:10%;
top:440px;
border: #F00 1px solid;
 position: absolute;
}
.a16
{ width:40%;
height:40px;
left:10%;
top:490px;
border: #F00 1px solid;
 position: absolute;
}
.a17
{ width:40%;
height:200px;
left:10%;
top:540px;
border: #F00 1px solid;
 position: absolute;
}
.a18
{ width:40%;
height:30px;
left:10%;
top:750px;
border: #F00 1px solid;
 position: absolute;
}
.a19
{ width:40%;
height:50px;
left:10%;
top:790px;
border: #F00 1px solid;
 position: absolute;
}
.a20
{ width:40%;
height:50px;
left:10%;
top:850px;
border: #F00 1px solid;
 position: absolute;
}
.a21
{ width:30%;
height:40px;
left:50%;
top:440px;
border: #F00 1px solid;
 position: absolute;
}
.a22
{ width:30%;
height:40px;
left:50%;
top:490px;
border: #F00 1px solid;
 position: absolute;
}
.a23
{ width:30%;
height:200px;
left:50%;
top:540px;
border: #F00 1px solid;
 position: absolute;
}
.a24
{ width:30%;
height:30px;
left:50%;
top:750px;
border: #F00 1px solid;
 position: absolute;
}
.a25
{ width:30%;
height:50px;
left:50%;
top:790px;
border: #F00 1px solid;
 position: absolute;
}
.a26
{ width:30%;
height:50px;
left:50%;
top:850px;
border: #F00 1px solid;
 position: absolute;
}
.a27
{ width:10%;
height:40px;
left:80%;
top:440px;
border: #F00 1px solid;
 position: absolute;
}
.a28
{ width:10%;
height:40px;
left:80%;
top:490px;
border: #F00 1px solid;
 position: absolute;
}
.a29
{ width:10%;
height:200px;
left:80%;
top:540px;
border: #F00 1px solid;
 position: absolute;
}
.a30
{ width:10%;
height:30px;
left:80%;
top:750px;
border: #F00 1px solid;
 position: absolute;
}
.a31
{ width:10%;
height:50px;
left:80%;
top:790px;
border: #F00 1px solid;
 position: absolute;
}
.a32
{ width:10%;
height:50px;
left:80%;
top:850px;
border: #F00 1px solid;
 position: absolute;
}.a33
{ width:59%;
height:40px;
left:10%;
top:900px;
border: #F00 1px solid;
 position: absolute;
}
.a34
{ width:20%;
height:40px;
left:70%;
top:900px;
border: #F00 1px solid;
 position: absolute;
}
.a35
{ width:80%;
height:50px;
left:10%;
top:950px;
border: #F00 1px solid;
 position: absolute;
}

 

5.23 汽车之家 界面练习

标签:

原文地址:http://www.cnblogs.com/suiyuejinghao123/p/5519693.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!