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

2021-07-02 06:21:51 字數 2215 閱讀 2525

本文講解使用div+css布局最基本的內容,讀完本文你講會使用div+css進行簡單的頁面布局。

關於div+css布局中用到的css必備知識請看:

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

float:

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

margin:

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

padding:

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

clear:

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

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

**:? 1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

">

">

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

content-left

content-main

footer

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

人生一小時

桌面,侵刪 今天不小心開啟部落格,發現乙個有意思的事情,我已經大半年沒有寫過部落格了!現在看看我之前寫的習慣清單 堅持寫部落格,真是汗顏啊。這半年來工作也不是很忙,平常也不知道幹些啥,日子一天天就過去了,感覺時間真的在變快啊,不知道大家是不是也是跟我一樣的感覺,這難道就是生活 生下來,活下去 看看鏡...

openMP一小時初探

參考 通過 gcc 學習 openmp 框架 詳細,我只看到臨界區之前 openmp基本概念 全看,內含並行化控制的三種程式設計要素 編譯制導 api函式集和環境變數 openmp入門教程 一 也講了fork join執行模型 執行緒概念 資料作用域.我主要跟著第一篇教程看了部分內容,後面兩篇當作補...

如何一小時學會字尾陣列,一小時學會字尾自動機?

前言 反正因為一些tuosh事情,我必須得兩小時學會它們。我服了。後期可能會再學,但是這個標題不準備更改了。來吧!參考資料 hihocoder 例題 1.suffix 把乙個字串後面加上乙個符號 將其所有字尾取出來,其中suffix i 表示從第i個字元開始的字尾。2.sa 字尾陣列 把suffix...