-
絕對定位；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那里多打了個} 想要左右有空隙則和小于父元素就行了
查看全部
舉報