DIV CSS布局 固定頁面開度布局

2022-07-22 17:18:13 字數 1452 閱讀 9304

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

float:

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

margin:

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

padding:

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

clear:

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

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

**:?12

3456

78910

1112

1314

1516

1718

1920

2122

2324

2526

2728

2930

3132

3334

3536

3738

3940

4142

4344

4546

4748

4950

5152

5354

5556

5758

5960

6162

6364

6566

67">

">

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

content-left

content-main

footer

註解:container作為整個頁面的容器,控制著整個頁面在瀏覽器的位置,此處使用margin:0 auto;控制container容器在瀏覽器中水平居中,一般固定寬度的布局都會用到這就**。

**自:

一小時搞定DIV CSS布局 固定頁面開度布局

本文講解使用div css布局最基本的內容,讀完本文你講會使用div css進行簡單的頁面布局。關於div css布局中用到的css必備知識請看 div css布局中主要css屬性介紹 float float屬性是div css布局中最基本也是最常用的屬性,用於實現多列功能,我們知道標籤預設一行只能...

div css 頁面布局居中

如果要實現整體頁面上下居中,它們倆必須得是乙個整體。我便在標籤中加了個class,使body中的兩部分真正包含在乙個整體中。接下來對這個整體進行設定 mainlayout 這是使用絕對定位和負margin值實現的。left 50 會讓整個mainlayout容器從瀏覽器水平方向的中點開始往右顯示,此...

如何用div css布局頁面

如今web2.0炒的很厲害,先不去管它web2.0究竟是什麼東西,反正div css好像是火的不行了.各大知名站點都趕時髦似的把原來的 布局翻新成了div css,並美其名曰 本站符合web2.0標準 以便讓別人覺得他們的 用的是最先進的技術.div布局真有那麼先進麼?這個問題仍在爭論之中.在這裡咱...