HTML4
2016-08-22 21:30 宇航员舒克 阅读(188) 评论(0) 编辑 收藏 举报格式布局
三种排版方式：fixed; absolute; relative
position:fixed 锁定位置，相对于浏览器的位置进行定位（即固定定位不会随着下拉菜单而移动，如有些网站的右下角弹窗）
position: absolute 绝对定位，绝对位置进行定位，定位后相当于该位置处于漂浮状态即此位置类似消失
position:relative 相对于之前位置进行定位，但是定位后图形移动到新位置但是它原来的位置没有改变还在原来位置占用着。
三种排版比较的简单的例子：
<!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>
</head>
<style>
.a1
{ width:1000px; height:200px; top:0px; left:0px; border:3px solid #F00; }
.a2
{ width:100px; height:100px; top:0px; left:0px; border:3px solid #F00; }
.a3
{ width:100px; height:100px; top:0px; left:0px; border:3px solid #F00;}
.a4
{ width:100px; height:100px; top:0px; left:200px; border:3px solid #F00; position:relative; }
.a5
{ width:100px; height:100px; top:0px; left:200px; border:3px solid #F00; position:relative;}
.a6
{ width:100px; height:100px; top:0px; left:0px; border:3px solid #F00; position:absolute; }
.a7
{ width:100px; height:100px; top:0px; left:0px; border:3px solid #F00; }
</style>
<body>
<div class="a1">a</div>
<div class="a2">b</div>
<div class="a3">c</div>
<div class="a4">d</div>
<div class="a5">e</div>
<div class="a6">f</div>
<div class="a7">g</div>
</body>
</html>
汽车之家格式布局简单应用：
<!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>
</head>
<style>
.a1
{ width:100%; height:30px; background-color:#333; border:1px solid black; position:relative;}
.a2
{ width:100%; height:35px; background-color:#006; border:1px solid black; position:relative;}
.a3
{ width:100%; height:45px; background-color:#CCC; border:1px solid black; position:relative;}
.a4
{ width:50%; height:100px; left:12%; top:10px; border:1px solid black; position:relative}
.a5
{ width:24%; height:100px; left:63%; top:-92px; border:1px solid black; position:relative}
.a6
{ width:75%; height:50px; left:12%; top:-82px; border:1px solid black; position:relative}
.a7
{ width:75%; height:30px; left:12%; top:-65px; border:1px solid black; position:relative}
.a8
{ width:75%; height:200px; left:12%; top:-65px; border:1px solid black; position:relative}
.a9
{ width:75%; height:60px; left:12%; top:-60px; border:1px solid black; position:relative}
.a10
{ width:25%; height:250px; left:12%; top:-40px; border:1px solid black; position:relative}
.a11
{ width:30%; height:1600px; left:39%; top:-292px; border:1px solid black; position:relative}
.a12
{ width:16%; height:200px; left:71%; top:-1892px; border:1px solid black; position:relative}
.a13
{ width:25%; height:100px; left:12%; top:-1835px; border:1px solid black; position:relative}
.a14
{ width:25%; height:100px; left:12%; top:-1825px; border:1px solid black; position:relative}
.a15
{ width:25%; height:700px; left:12%; top:-1815px; border:1px solid black; position:relative}
.a16
{ width:25%; height:80px; left:12%; top:-1805px; border:1px solid black; position:relative}
.a17
{ width:25%; height:150px; left:12%; top:-1795px; border:1px solid black; position:relative}
.a18
{ width:25%; height:150px; left:12%; top:-1785px; border:1px solid black; position:relative}
.a19
{ width:16%; height:1380px; left:71%; top:-3170px; border:1px solid black; position:relative}
.a20
{ width:8%; height:400px; left:4%; top:150px; border:1px solid red; position:fixed}
.a21
{ width:8%; height:400px; left:87%; top:150px; border:1px solid red; position:fixed}
</style>
<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>
</body>
</html>
