-
text-align:center（讓文字內容居中） line-height:50px（文字內容50像素）
查看全部 -
什么叫做布局：又稱版式布局，是網頁UI設計師將有限的視覺元素進行有機的排列組合。
特點：網頁的長度理論上沒有限制。網頁可以自適應寬度 。
查看全部 -
<style>
.top{
height:100px;
background-color:blue;
margin:0,auto;
}
</style>
<div class="top"></div>
<div class="main"></div>
<div class="foot"></div>
查看全部 -
clear:both;
查看全部 -
塊狀元素在網頁上只有三種狀態：塊與塊相鄰，塊與塊嵌套，塊與塊疊壓
查看全部 -
相對定位（position：relative），不可以脫離文本流
讓元素脫離文本流的是:浮動（float）和絕對定位(position:absolute;)
查看全部 -
body{ margin:0; padding:0; font-size:30px; color:#fff}
.top{height:100px;margin:0 auto;background:black;}
.main{height:600px;background:pink;}
.right{height:600px;background:green;position:absolute;left:210px;width:100%;}
.left{ height:600px;width:200px;background:blue;float:left;}
.foot{height:100px;margin:0 auto;background:black;}
查看全部 -
布局：
網頁設計特點：
分欄又稱為分列，常見的布局分為：
查看全部 -
clear:both;
清除浮動
查看全部 -
固定寬度的兩列布局，固定父元素寬度
查看全部 -
.top{height:100px; background:#ccc;}
.mian{height:200px;}
.left{width:200px; height:200px; background:#333; position:absolute; left:0; top:100px;}
.right{height:200px; background:#652; margin-left:200px; top:200px;}
.foot{height:50px;background:#999;width:100%;}
查看全部 -
一列布局：margin：0 auto 兩列布局：左右浮動<br> 三列布局：左右絕對定位，中間靠margin調整位置 混合布局：在一列布局的基礎上，保留top和foot部分，將中間的main部分改造成兩列或三列布局
(有自適應部分用絕對定位（absolute、margin,不能用float），平時用的是浮動(float)來實現，可以直接一列多個塊狀，塊狀里再分多個)
查看全部 -
三列布局 【1】左右列固定寬度，中間列自適應。 【2】左側絕對定位：寬；高；position：absolute;left:0;top:0; 【3】右側絕對定位：寬；高；position：absolute;right:0;top:0; 【4】中間寬度定位：高；margin:0 (right寬度+間隙寬度)px 0 (left寬度+間隙寬度)px; 上右下左，左右調節大小可
(不用float因為有的塊會被頂到下列，用絕對定位不會)
查看全部 -
特殊案例：左側200px，右側300px，中間為自適應寬度 ????左右兩側為固定定位，中間用margin值來調整，不設置寬度
.left{ ????width:200px; ????height:500px; ????background:#ccc; ????position:absolute; ????left:0; ????top:0; } .middle{ ????height:500px; ????background:?aquamarine; ????margin:0?310px?0?210px; } .right{ ????width:300px; ????height:500px; ????background:#ddd; ????display:inline-block; ????position:absolute; ????right:0; ????top:0; }查看全部 -
文檔流：將窗口自上而下分成一行一行，并在每行中按從左至右的依次排放元素，即為文檔流。有三種情況使得元素離開文檔流而存在，分別是浮動 絕對布局 固定定位
查看全部
舉報