-
<!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; color:#fff}
.top{height:100px;background:#ccc;}
.main{width:800px;height:600px;background:red;margin:0 auto;}
.left{ width:200px;height:600px;background:blue;float:left;}
.right{width:80%;height:600px;background:green;position:absolute;margin:0 0 0 210px;}
.foot{height:90px;background:#f60;}
</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>查看全部 -
絕對定位：? position:absolute;
查看全部 -
?板式布局：是網頁UI設計師將有限的視覺元素進行有機的排列組合。
頁面上的元素，就是塊與塊之間的關系（塊挨著塊、塊嵌套塊、塊疊壓塊）。
查看全部 -
拉進來查看全部
-
用clear:both;清除浮動
查看全部 -
.left{width:200px;height:300px;background:pink;float:left;position:absolute;top:50px;left:0px;}.right{width:auto;margin-left:210px;height:300px;background:gray;}left必須要絕對位置之后，right才要設置左間距
查看全部 -
<!DOCTYPE html>
<html>
<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;color:#fff}
.top{width:100%;background:#ccc;height:90px;}
.main{width:100%;height:300px;background-color:red}
.left{width:29%;background-color:blue;float:left;height:300px;}
.right{width:70%;background-color:green;float:right;height:300px;}
.foot{width: 100%;background-color:orange;clear:both;}
</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>
查看全部 -
<!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; color:#fff}
.top{text-align:center;height:150px;background:#ccc;}
.main{height:600px;background:red;}
.left{text-align:center; width:20%;height:600px;background:blue;float:left;}
.right{text-align:center;width:78%;height:600px;background:yellow;float:right;}
.foot{text-align:center;height:100px;background:#0bf;}
</style>
</head>
<body>
<div class="top">百度一下</div>
<div class="main">
? ? <div class="right">網頁</div>
? ? <div class="left">圖片</div>
</div>
<div class="foot">備注</div>
</body>
</html>
查看全部 -
清除浮動：clear:both
查看全部 -
三列布局,通常左右側都是固定寬度,采用position:absolute;left:0;top:0,右側position:absolute;right:0;top:0,這樣的方式來左右定位兩側的列.
中間列采用margin:0 300px 0 200px;這樣的方式來自適應布局
查看全部 -
網頁設計的特點:作為前端工程師在頁面布局上的作用,利用浮動,定位對頁面進行布局
1)網頁可以自適應寬度:網頁的寬度可以根據不同的顯示器分辨率設計成按照%比自適應寬度.
2)網頁的長度理論上沒有限制.
常見的網頁布局分為:
1)頭部
2)內容主題部分:根據需要進行分欄,常見的分為2-3欄.分欄又叫分列,常見的布局分為:1列布局,2列布局,3列布局,混合布局(最為常用)
3)底部
查看全部 -
浮動 和絕對定位可脫離文檔流
查看全部 -
position:absolute?絕對定位 margin:?0?300px?0?200px??(上?右?下?左) margin：0?auto（上下??左右自動）
查看全部 -
左側定位：position:absolute;left:0;top:0
右側定位：position:absolute; right:0; top:0
左右增加：margin:0 300px 0 200px
查看全部 -
margin:0 300px? 0? 200px
查看全部
舉報