div+css是一個網頁設計師,程式設計師必經之路,是網站建設的基礎!div+css是網頁設計的最重要的元素。
工具/原料
電腦(配套電腦)
Dreamweaver
方法/步驟
一、準備工作,電腦一套,Dreamweaver(網頁設計軟體)
Dreamweaver下載與安裝不在本文描述。
二、div概念:
DIV是層疊樣式表中的定位技術,全稱DIVision,即為劃分。有時可以稱其為圖層。
DIV在程式設計中又叫做整除,即只得商的整數。 DIV元素是用來為HTML(標準通用標記語言下的一個應用)文件內大塊(block-level)的內容提供結構和背景的元素。
div的寫法:
三、css(俗稱樣式表文件)層疊樣式表(英文全稱:Cascading Style Sheets)是一種用來表現HTML(標準通用標記語言的一個應用)或XML(標準通用標記語言的一個子集)等檔案樣式的計算機語言。
圖是CSS的寫法!
四、div標籤結構
五、CSS的兩種寫法
六、例項原始碼
#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;
}
後記:網頁設計是一門學問,不是一朝一夕就能成的,技術需要沉澱,知識需要積累!
注意事項
本文是小編個人心得,適合新手參閱。
歡迎各路大神指教!