zoukankan html css js c++ java

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

查看全文

相关阅读:
nodejs程序发布的jenkins自动化脚本和问题记录
 jenkins代码rsync推送脚本带日志记录和代码分机房处理示例
 django入门到精通⑥消息管理器的升级处理，对关键词进行过滤示例
 django入门到精通⑤mako模板的使用
 django入门到精通④jinja2模板的使用
 django入门到精通③template模板功能和常用标签过滤器的使用
 hdfs副本调整不生效
 macOS 系统中，开发工具列表
 查看系统中安装了哪些python版本
 -p py, --python py target interpreter for which to create a virtual (either absolute path or identifier string) 中 identifier string 的含义

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

5.23 汽车之家 界面练习

5.23 汽车之家界面练习