本节内容:
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、给整个网页设置字体,大小:
值 | 描述 |
---|---|
| 用于某个元素的字体族名称或/及类族名称的一个优先表。 默认值:取决于浏览器。 |
inherit | 规定应该从父元素继承字体系列。 |
body {
font-family: "Times New Roman";
font-size: 20px;
}