抽屉页面的制作

本节内容：

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;
}