div css佈局的基本流程

2021-05-04 14:45:30 字數 2487 閱讀 9198

1樓:

解決這個問題的方法如下:

1、新建一個html檔案,命名為test.html,用於講解div+css佈局的基本流程。

2、在test.html檔案內,對body進行樣式初始化,設定外邊距margin為0,內邊距padding為0,同時使用text-align設定文字居中。

3、在test.html檔案內,為了講解方便,設定所有的div高度為200px,內容的顏色為紅色。

4、在test.html檔案內,使用div建立網頁的頭部,使用margin:0 auto設定div居中,同時設定其寬度為800px,背景顏色為灰色。

5、在test.html檔案內,使用div建立網頁的中部,使用margin:0 auto設定div居中,同時設定其寬度為800px。

6、在test.html檔案內,在網頁的中部,建立兩個div,用於將中部為兩部分,每一個部分寬度為50%,左部分使用float:left設定左浮動,右部分使用float:

right設定右浮動。

7、在test.html檔案內,使用div建立網頁的底部,使用clear:both清除上面div的浮動,避免影響底部的佈局。

同時,使用margin:0 auto設定div居中,同時設定其寬度為800px,背景顏色為#000fff。

8、在瀏覽器開啟test.html檔案,檢視實現的效果,這樣問題就解決了。

2樓:

1、新建一個html頁面。

2、在html頁面上新建三個div標籤,分別為這三個div新增class為:header、main、footer。

3、建立style標籤用於設定css樣式。在title標籤下建立一個style標籤,然後為header類設定div的高、背景顏色樣式。

4、為顯示主要內容的main類設定樣式。在style標籤裡設定main類樣式的邊框、寬、高、背景顏色。

5、設定底部footer的樣式。在style標籤裡新增footer類樣式的背景顏色和高度。

6、儲存好html檔案後使用瀏覽器檢視效果。

7、在瀏覽器上看到div標籤和瀏覽器存在一些空白的畫素,為了去掉這些空白的畫素我們需要把body標籤設定外邊框。

8、使用瀏覽器重新開啟後就沒有看到div與瀏覽器存在空白的邊框了。

3樓:day忘不掉的痛

div+css佈局中主要css屬性介紹:

float:

float屬性是div+css佈局中最基本也是最常用的屬性,用於實現多列功能,標籤預設一行只能顯示一個,而使用float屬性可以實現一行顯示多個div的功能,最直接解釋方法就是能實現**佈局的多列功能。

margin:

margin屬性用於設定兩個元素之間的距離。

padding:

padding屬性用於設定一個元素的邊框與其內容的距離。

clear:

使用float屬性設定一行有多個div後(多列),最好在下一行開始之前使用clear屬性清楚一下浮動,否則上面的佈局會影響到下面。

例項講解:下面使用例項如果做一個簡單又基本的佈局,效果如下圖:

**:這裡設定了padding屬性介紹一下padding的用法,padding將設定文字與邊框的距離。

content-left

content-main

footer

4樓:電商達人秀

div+css佈局的基本流程:

用css也需要切片,但組合的時候要比**靈活很多,另外在css中切片的目的一般是為了美觀而不是佈局,比如為**新增邊框,製作導航欄。

css佈局一般是把html先做好再用css佈局,不過在做html時就要考慮到佈局,新增足夠的id,class屬性,足夠的層,有時也要新增必要的空標籤.(css的html與**時期的html有很大不同)

css佈局的優勢是更靈活,更精確,但也存在很多的問題,最突出的就是相容性的問題--不同瀏覽器對同一段css**會有不同的顯示,這個問題困擾了無數網頁製作者,如果樓主致力於css佈局一定要注意這方面的問題(解決這個問題的方法通常是用 css hack),同時還要鼓勵樓主不要因為這一原因放棄css。

都是一些經典的css作品(所有作品都是完全相同的html)

5樓:我的人生

看個人習慣,我習慣先寫html,然後寫css。

如果你問的是html佈局的話,得看具體內容,在最少得標籤實現設計圖效果,根據**重構,用相應的標籤

6樓:匿名使用者

使用div+css製作網頁和佈局,你必須能夠認識各種**的作用和含義都是什麼,想使用div+css進行網頁佈局最基本的html**是必須要會的,其次css層疊樣式表**也必須要會使用

ps模板僅僅是一個模板而已,只是參照而已,=

7樓:米克

先要理解一下網頁的基本構成,就像人一樣,他有頭身體

腳一般頭和腳都是不變的,然後把各個部位用div做一個大的框架,然後再雕刻細節。

說白了,跟畫畫一個樣,畫草圖,框架,然後描繪細節。

有關div css佈局問題

ie6.0落後的問題,許多標籤的預設樣式和火狐不一樣。一般需要單獨給ie中的不支援的地方加樣式 例如 body 以下的共詳細參考 一 important 功能有限 隨著ie7對 important的支援,important 方法現在只針對ie6的相容.注意寫法.記得該宣告位置需要提前.例如 exam...

菜鳥求助div css佈局問題 在父div中放入子div,怎麼老有一兩個跑到外面來啊

再加2個樣式進去 left right float left 浮動屬性 你沒有定義它們的position 定位 應該定位它們的定位 而且子層div的css也沒有設計 父層的高度你定義成了死的 你可以試試height auto 正確望採納 他們div都是塊元素,左邊和右邊加個浮動就不會跑出來了,fol...

div css三行兩列布局怎麼寫,求大神解答

這個xhtml1標準的div css佈局是著名網頁設計師2004年釋出在 網頁設計師 上的,一個非常經典的佈局,在ie mozilla和opera瀏覽器中均可以實現居中和高度自適應。完整 如下 在原 的基礎上作了一定規範整理 header text段落 p 段落 段落段落段落 left footer...