CSS案例1:新闻网页 (来自黑马程序员课程)
具体要求:
分析:
- 整个板块居中,使用div标签。在标签选择器中设置css样式,设置宽和高,以及居中。
- 第一行文字为一级标题使用h1标签,且需要居中。换行后,第二行文字也需要居中。因此可以统一在类选择器中设置居中,两行文字一起使用(第一行文字也可以直接用标签选择器),同时第二行文字使用p标签。
- 由于第二行文字出现了两种颜色和一个超链接,并且没有换行,可以使用span标签和a标签。设置颜色,使用类选择器(两种颜色的文字都使用了span标签,不能使用标签选择器),第二种颜色的文字加粗,并且使用标签选择器将超链接中的下划线去除。
- 添加横线(一定实在div标签中添加),然后将后四段的内容分别放在p标签中。使用类选择器给段落进行首行缩进(因为第二行也使用了p标签,所以不可以用标签选择器,第二行居中时使用类选择器也是同理)
具体代码实现
- 在div标签选择器中设置宽和高,以及居中。 (这里宽和高可以自行设置) 同时在body中使用div标签。