-
塊狀元素在網頁上只有三種狀態：
塊與塊相鄰。
塊與塊嵌套
塊與塊疊壓。
查看全部 -
網頁布局：
又稱版式布局，是網頁UI設計師將有限的視覺元素進行有機的排列組合。
網頁設計的特點：
網頁的長度理論上沒有限制。
網頁可以自適應寬度。
分欄又稱分列，常見的布局分為：
一列布局、二列布局、三列布局、混合布局。
查看全部 -
相對定位（position：relative），不可以脫離文本流
讓元素脫離文本流的是:浮動（float）和絕對定位(position:absolute;)
查看全部 -
網頁可以自適應寬度
網頁的長度理論上沒有限制
分欄又稱分列，常見的布局分為：一列布局、二列布局、三列布局、混合布局。
查看全部 -
學習本節課的主要收獲
塊狀元素居中屬性設置margin:0 auto;
二欄布局，主要分為固定寬度和不固定寬度兩種。主要通過設置屬性float：left。對于不固定的寬度的設置，通過設定固定欄的絕對定位（position:absolute，left,top,right.bottom屬性來設定位置，另外一個標簽通過設定margin值來進行布局
查看全部 -
當寬度100%，占滿屏幕的時候，可以設置左右間距，達到減少寬度，又自適應的效果.
.middle{ width:100% margin: 0 100px 0 200px;}
查看全部 -
使用絕對定位，是脫離文檔流的，該div相當于只有中間的.middle，兩側的200px寬度div，是強行“貼上去的”
查看全部 -
浮動會造成高度消失。由于父元素.main 沒有設置高度，雖然.left 高度是500px，父元素的高度也是0.
在當前20%和80%都占滿的情況下，不會出問題，如果兩個div塊，寬度是20%和30%，剩下50%的空間，就會被其他div填充進來
查看全部 -
margin:0 auto;
意思是上下距離是0，左右距離是auto，就居中了
查看全部 -
一列布局的特點：
1，固定寬度，直接居中
2，不適合多行文本，寬度太大，不利于閱讀
查看全部 -
網頁區別報刊的特點是，左右，上下都可以自適應。突破了報紙固定紙張的限制。
查看全部 -
可以把網頁看成報刊的進化，其實排版是可以借鑒的
查看全部 -
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>02</title>
? ? <style type="text/css">
body{margin:0;padding: 0}
.top{width: 100%;height: 100px;background:#ccc;}
.main{width: 800px;margin:0 auto;}
.left{width: 20%;height: 500px;float:left;background:blue}
.sub_l{width: 10px;height: 500px;float:right;background:red}
.right{width: 80%;height: 500px;float:right;background:#9c9;}
.foot{width:100%;height:50px;background:#F63;clear:both;}
? ? </style>
</head>
<body>
<div class="top">top</div>
<div class="main">
? <div class="left">
? ? ? <div class="sub_l"></div>
? ? ? left</div>
? <div class="right">right</div>
</div>
<div class="foot">foot</div>
</body>
</html>
查看全部 -
clear:both(清除浮動)
查看全部 -
【1】左右列固定寬度，中間列自適應。 【2】左側絕對定位：寬；高；position：absolute;left:0;top:0; 【3】右側絕對定位：寬；高；position：absolute;right:0;top:0; 【4】中間寬度定位：高；margin:0 (right寬度+間隙寬度)px 0 (left寬度+間隙寬度)px; 上右下左，左右調節大小可
(不用float因為有的塊會被頂到下列，用絕對定位不會)
查看全部
舉報