在這裡教大家簡單的div+css教程。
工具/原料
電腦
方法/步驟
首先為大家講下DIV+CSS佈局中主要CSS屬性介紹
Float:Float屬性是DIV+CSS佈局中最基本也是最常用的屬性,用於實現多列功能,我們知道
Margin:Margin屬性用於設定兩個元素之間的距離。
Padding:Padding屬性用於設定一個元素的邊框與其內容的距離。
Clear:使用Float屬性設定一行有多個DIV後(多列),最好在下一行開始之前使用Clear屬性清楚一下浮動,否則上面的佈局會影響到下面。
如題2到題五中講述的實力,如圖所示。
例項程式碼原始碼為下:
#Container{
width:1000px;
margin:0 auto;/*設定整個容器在瀏覽器中水平居中*/
background:#CF3;
}
#Header{
height:80px;
background:#093;
}
#logo{
padding-left:50px;
padding-top:20px;
padding-bottom:50px;
}
#Content{
height:600px;
/*此處對容器設定了高度,一般不建議對容器設定高度,一般使用overflow:auto;屬性設定容器根據內容自適應高度,如果不指定高度或不設定自適應高度,容器將預設為1個字元高度,容器下方的佈局元素(footer)設定margin-top:屬性將無效*/
margin-top:20px;/*此處講解margin的用法,設定content與上面header元素之間的距離*/
background:#0FF;
}
#Content-Left{
height:400px;
width:200px;
margin:20px;/*設定元素跟其他元素的距離為20畫素*/
float:left;/*設定浮動,實現多列效果,div+Css佈局中很重要的*/
background:#90C;
}
#Content-Main{
height:400px;
width:720px;
margin:20px;/*設定元素跟其他元素的距離為20畫素*/
float:left;/*設定浮動,實現多列效果,div+Css佈局中很重要的*/
background:#90C;
}
/*注:Content-Left和Content-Main元素是Content元素的子元素,兩個元素使用了float:left;設定成兩列,這個兩個元素的寬度和這個兩個元素設定的padding、margin的和一定不能大於父層Content元素的寬度,否則設定列將失敗*/
#Footer{
height:40px;
background:#90C;
margin-top:20px;
}
.Clear{
clear:both;
}
注意事項
無