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