-
绝对定位；position:absolute;left:0; top:0
查看全部 -
float 浮动
查看全部 -
<!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>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px}
div{ text-align:center; font-weight:bold}
.main,.footer{ width:960px; 【任务1】}
.head{ width:100%; height:100px; background:#ccc}
.main{ height:600px; background:#FCC}
.footer{ height:50px; background:#9CF}
</style>
</head>
<body>
<div class="head">head</div>
<div class="main">main</div>
<div class="footer">footer</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>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px;}
.top{height:200px;background-color:#CBCBCB;}
.main{height: 800px;background-color: #FC0501;position:relative;left: 0px;}
.left{height: 800px;width: 200px;background-color: #120FFC;position: absolute;left: 0px;top: 0px;}
.right{height: 800px;background-color: #99CB99;position: relative;left: 210px;}
.foot{height:100px;background-color:#FE6535;}
</style>
</head>
<body>
<div class="top">top</div>
<div class="main">
<div class="right">right</div>
<div class="left">left</div>
</div>
<div class="foot">foot</div>
</body>
</html>
查看全部 -
footer 没有浮动元素，又没有清除浮动，就占据了中间位置，所以，想让footer 在他自己的位置，就先清除浮动（clear：both）
查看全部 -
可以让元素脱离文档流（） float 和 绝对定位
查看全部 -
position:absolute;left:0;top:0; position:absolute;right:0;top:0;查看全部
-
float:left; float:right;查看全部
-
margin：0 auto;查看全部
-
三列布局
三列布局使得中间一列自适应，不能使用float控制，
要对左边一列设置position:absolute;left:0;top:0;
右边一列设置position:absolute;right:0;top:0;
中间一列设置margin，margin-left:左边一列的宽度;margin-right:右边一列的宽度;
查看全部 -
常见分列布局：一列布局，二列布局，三列布局，混合布局。
查看全部 -
相对定位（position：relative），不可以脱离文本流
查看全部 -
.top{width:100%;background:grey;height:100px;}
.main{height:300px;width:100%;float:left;overflow:hidden;background:red;}
.left{width:30%;height:300px;background:blue;float:left;position:absolute;left:0px;top:100px;}
.right{width:67%;height:100%;background:green;float:right;}
.foot{width:100%;height:70px;background:orange;clear:both;}
查看全部 -
left那里多打了个} 想要左右有空隙则和小于父元素就行了
查看全部
举报