本節內容：

1：寫一個網頁的大概的盒子要先搞出來

2：實現頭部

3：content的介紹

4：實現content-L的內容

5：實現content-R的內容

6：實現content-footer的內容

　　這是自己做的一個抽屜新熱榜的小項目，這個小項目主要用到前端知識的運用，雖然和原版有一些差距，但能幫助自己加深對html和css知識的理解。

1、抽屜盒子

2、實現頭部

　　怎么讓頭部的這些元素都在一行顯示？關鍵詞：浮動

1、寫之前先清理下瀏覽器默認的margin和padding：

* {
    margin: 0;
    padding: 0;
}

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

2、可以查看到整個抽屜的a標簽都沒有下劃線，去掉：

值	描述
none	默認。定義標準的文本。
underline	定義文本下的一條線。
overline	定義文本上的一條線。
line-through	定義穿過文本下的一條線。
blink	定義閃爍的文本。
inherit	規定應該從父元素繼承 text-decoration 屬性的值。

a {
    text-decoration: none;
}

3、給整個網頁設置字體，大小：

值	描述
family-name generic-family	用于某個元素的字體族名稱或/及類族名稱的一個優先表。 默認值：取決于瀏覽器。
inherit	規定應該從父元素繼承字體系列。

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

總結

以上是生活随笔為你收集整理的抽屉页面的制作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。