網(wǎng)頁設(shè)計(jì)
-
第一步需要做哪些工作
- 分析頁面模塊维蒙，找出重復(fù)性內(nèi)容
- 對(duì)各部分命名，列清層級(jí)結(jié)構(gòu)
- 按層級(jí)確定各部分位置果覆，長寬颅痊，在紙上畫出結(jié)構(gòu)圖
-
塊級(jí)元素與行內(nèi)元素
- 常用的塊級(jí)元素：
<h><p><ul><div>;常用的內(nèi)聯(lián)元素：<b><td><a><img><span>; - 特性：內(nèi)聯(lián)元素沒有width、height屬性以及豎直方向的padding和margin屬性局待。
-
display:inline-black;可以讓元素的本質(zhì)是行內(nèi)但有塊的特性斑响。
- 常用的塊級(jí)元素：
-
布局時(shí)的一些要點(diǎn)
- 對(duì)齊
- 水平對(duì)齊：
第一種方法：.parent{text-align: center;}
.child{display:inline-block;}；
第二種方法.child{width:10px; margin: 0 auto;} - 垂直對(duì)齊：
.parent{display:inline; vertical:middle;}
- float+margin可以解決寬與列的自適應(yīng)問題
float使塊浮動(dòng)并脫離文檔流钳榨，但仍在當(dāng)前父元素內(nèi)舰罚。同一父元素內(nèi)浮動(dòng)的元素本質(zhì)上屬于內(nèi)聯(lián)的行元素，但當(dāng)其總長度突破父元素時(shí)會(huì)產(chǎn)生換行薛耻。因此营罢，當(dāng)浮動(dòng)塊的margin-left設(shè)置為負(fù)值時(shí)可以視為在同一行內(nèi)朝反方向移動(dòng)。 - 響應(yīng)式布局
可以使用@media針對(duì)不同的screen設(shè)置相應(yīng)的尺寸饼齿。建議在布局時(shí)對(duì)于元素位置使用百分比設(shè)置饲漾，而元素的大小用em單位設(shè)置。這樣可以利用@media通過只改動(dòng)font-size來改變整體大小缕溉。
認(rèn)識(shí)Bootstrap
- 如何使用Bootstrap庫
通過加載bootstrap樣式表與引用類名設(shè)置元素樣式能颁。注意：container等類的默認(rèn)值可能會(huì)影響其它元素，應(yīng)該謹(jǐn)慎使用或者重新設(shè)置倒淫。
