IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值5

62ebcc718b7a4612ab773ded266a62de.jpg

 

 

CSS综合实例

在Web页面中经常使用栏目显示分类内容。本例将使用HTML和CSS结合编写一个分类栏目模型,用于演示前面介绍的CSS应用。通过使用独立的文件定义样式表,并在HTML文档中使用link标记与其链接,使HTML代码和CSS代码完全分离。在HTML文档中只负责输出栏目的内容,而栏目的样式则完全由CSS控制。创建一个名为list.html的HTML文档文件,代码如下所示:

af72a9847d37442b9d214fbc605dd3fd.png

在上面的HTML文件中输出一个分类栏目,包括栏目标题、栏目内容区块及内容列表等。但没有定义栏目的显示格式,而是链接一个外部样式表文件style.css,由这个文件中的CSS代码控制输出栏目的样式格式。代码如下所示:

 

 

通过将样式文件style.css加入到HTML文件list.html中,则HTML文档中定义的各个元素使用了CSS进行控制,而HTML可以保持简单明了的初衷。直接访问list.html文件的输出结果如图所示。

e44ab63190eb433b8daabd54ebc2c9fe.png

图 HTML和CSS结合使用输出栏目内容

posted on 2019-11-01 10:19  老码农的一亩三分地  阅读(...)  评论(... 编辑 收藏

导航