5.22 360浏览器框架练习 用absolute《绝对位置》编写
<!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> 360 页面表格 </title> <style> * { margin:0px;padding:0px;} .a1 { width:100%; height:30px; left:0%; top:0px; border: #F00 1px solid; position:absolute; } .a2 { width:90%; height:80px; left:5%; top:80px; border:#F00 1px solid; position:absolute; } .a3 { width:90%; height:35px; left:5%; top:160px; border:1px solid red; position:absolute;} .a4 { width:90%; height:35px; left:5%; top:205px; border:1px solid red; position:absolute;} .a5 { width:25%; height:160px; left:5%; top:250px; border:1px solid red; position:absolute;} .a6 { width:63%; height:180px; right:5%; top:250px; border:1px solid red; position:absolute;} .a7 { width:25%; height:800px; left:5%; top:460px; border:1px solid red; position:absolute;} .a8 { width:63%; height:160px; right:5%; top:450px; border:1px solid red; position:absolute;} .a9 { width:63%; height:590px; right:5%; top:620px; border:1px solid red; position:absolute;} .a10 { width:90%; height:150px; right:5%; top:1260px; border:1px solid red; position:absolute;} .a11 { width:90%; height:200px; right:5%; top:1420px; border:1px solid red; position:absolute;} .a12 { width:90%; height:200px; right:5%; top:1630px; border:1px solid red; position:absolute;} .a13 { width:90%; height:200px; right:5%; top:1840px; border:1px solid red; position:absolute;} .a14 { width:90%; height:200px; right:5%; top:2050px; border:1px solid red; position:absolute;} .a15 { width:90%; height:200px; right:5%; top:2260px; border:1px solid red; position:absolute;} .a16 { width:90%; height:200px; right:5%; top:2470px; border:1px solid red; position:absolute;} .a17 { width:100%; height:200px; right:0%; top:2680px; border:1px solid red; position:absolute;} .a18 { width:4%; height:25px; right:0%; top:300px; border: #F00 1px solid; position:fixed;} .a19 { width:4%; height:25px; right:0%; top:335px; border: #F00 1px solid; position:fixed; } .a20 { width:4%; height:25px; right:0%; top:370px; border: #F00 1px solid; position:fixed; } .a21 { width:4%; height:25px; right:0%; top:405px; border: #F00 1px solid; position:fixed; } .a22 { width:4%; height:25px; right:0%; top:440px; border: #F00 1px solid; position:fixed; } .a23 { width:4%; height:25px; right:0%; top:475px; border: #F00 1px solid; position:fixed; } </style> </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="a11">11</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> </body> </html>