本節(jié)內(nèi)容：

1：寫(xiě)一個(gè)網(wǎng)頁(yè)的大概的盒子要先搞出來(lái)

2：實(shí)現(xiàn)頭部

3：content的介紹

4：實(shí)現(xiàn)content-L的內(nèi)容

5：實(shí)現(xiàn)content-R的內(nèi)容

6：實(shí)現(xiàn)content-footer的內(nèi)容

　　這是自己做的一個(gè)抽屜新熱榜的小項(xiàng)目，這個(gè)小項(xiàng)目主要用到前端知識(shí)的運(yùn)用，雖然和原版有一些差距，但能幫助自己加深對(duì)html和css知識(shí)的理解。

1、抽屜盒子

2、實(shí)現(xiàn)頭部

　　怎么讓頭部的這些元素都在一行顯示？關(guān)鍵詞：浮動(dòng)

1、寫(xiě)之前先清理下瀏覽器默認(rèn)的margin和padding：

* {
    margin: 0;
    padding: 0;
}

margin是用來(lái)隔開(kāi)元素與元素的間距；padding是用來(lái)隔開(kāi)元素與內(nèi)容的間隔。margin用于布局分開(kāi)元素使元素與元素互不相干；padding用于元素與內(nèi)容之間的間隔，讓內(nèi)容（文字）與（包裹）元素之間有一段“呼吸距離”。

2、可以查看到整個(gè)抽屜的a標(biāo)簽都沒(méi)有下劃線，去掉：

值	描述
none	默認(rèn)。定義標(biāo)準(zhǔn)的文本。
underline	定義文本下的一條線。
overline	定義文本上的一條線。
line-through	定義穿過(guò)文本下的一條線。
blink	定義閃爍的文本。
inherit	規(guī)定應(yīng)該從父元素繼承 text-decoration 屬性的值。

a {
    text-decoration: none;
}

3、給整個(gè)網(wǎng)頁(yè)設(shè)置字體，大小：

值	描述
family-name generic-family	用于某個(gè)元素的字體族名稱或/及類族名稱的一個(gè)優(yōu)先表。 默認(rèn)值：取決于瀏覽器。
inherit	規(guī)定應(yīng)該從父元素繼承字體系列。

body {
    font-family: "Times New Roman";
    font-size: 20px;
}

總結(jié)

以上是生活随笔為你收集整理的抽屉页面的制作的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。