範仁義css3課程 12 盒子模型小例項

2022-03-24 00:08:52 字數 1459 閱讀 2723

如果我們看到想要的樣式,可以在谷歌瀏覽器中,檢查元素,可以得到元素的html**和元素的樣式,這樣就可以很方便快捷的學習和做出一樣的樣式在谷歌瀏覽器中,檢查元素,可以得到元素的html**和元素的樣式,這樣就可以很方便快捷的學習和做出一樣的樣式

做我**頁面上的這樣乙個小例項

1、如何學習(做出)看到的好看的樣式?

在谷歌瀏覽器中,檢查元素,可以得到元素的html**和元素的樣式,這樣就可以很方便快捷的學習和做出一樣的樣式

>盒子模型小例項

title

>

6<

link

rel="stylesheet"

href

="css/font-awesome.min.css"

>

7<

style

>

8body

11.box1

18.fry_card_icon

24.fry_card_title

31.fry_card_content

3637

style

>

38head

>

39<

body

>

40<

div

class

="box1"

>

41<

span

class

="fa fa-building fa-fw fry_card_icon"

style

="">

span

>

42<

div

class

="fry_card_title"

style

="">課程

div>

43<

p class

="fry_card_content"

style

="">大量精品程式設計課程

p>

44div

>

45body

>

46html

>

範仁義css3課程 14 顏色

設定color的值為transparent即可,例如color transparent用opacity屬性,屬性值在0.0到1.0範圍內,0表示透明,1表示不透明,比如 opacity 0.5 顏色值縮寫 關於顏色的css樣式也是可以縮寫的,當你設定的顏色是16進製制的色彩值時,如果每兩位的值相同,...

範仁義css3課程 10 內邊距

內邊距用padding屬性來設定,例如padding 25px 也可以用padding left right top bottom 分別設定四個邊的內邊距。padding屬性非常常用。css padding 填充 是乙個簡寫屬性,定義元素邊框與元素內容之間的空間,即上下左右的內邊距。padding ...

css3盒子模型微課 css3之盒模型

什麼是盒模型?css中的每個元素都是乙個盒模型,包括html body元素,瀏覽器解析css的時候也會把每個元素看成乙個盒子來解析。盒模型具備的屬性有 content padding margin border background等 盒模型的分類?tips border box俗稱混雜盒模型,co...