淘先锋技术网

首页 1 2 3 4 5 6 7

本节内容:

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

 

转载于:https://www.cnblogs.com/zuoyang/p/9316858.html