CSS综合实例

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

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

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

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

最新文章

1. 基于云计算Iaas平台的ZStack
2. vs xamarin android StartActivity
3. [No000040]取得一个文本文件的编码方式
4. emacs使用 simple-httpd和impatient-mode插件实现livereload
5. Android Launcher 研究学习
6. css学习归纳总结
7. Oracle用户进程跟踪
8. ITextSharp用来生成 PDF 的一个组件
9. hadoop-0.20-集群搭建___实体机通过SSH访问基于VM安装的Linux
10. Android 添加子视图(addView和setView)
11. python yield generator 详解
12. [MySQL] 测试where group by order by的索引问题
13. 记录sql server中数据创建时间和最后修改时间，方便查找问题
14. strcpy和memcpy的差别
15. lrc歌词文件格式
16. (装机)关于WINRE/ESP/LRS_ESP/MSR/PBR这些分区
17. e782. 排列JList中的项
18. Oracle与Sql server 在SQL上的不同
19. OpenERP 在context中写自己的部门ID
20. 【期望DP】BZOJ2318-[Spoj4060]Game with probability Problem

热门文章

1. 【hibernate】映射可嵌入式组件
2. 初探three.js几何体
3. python爬虫--爬虫介绍
4. 聊聊 print 的前世今生
5. 浅谈Mysql重置密码
6. 约瑟夫问题 -- python实现
7. unittest---unittest多种加载用例方法
8. IM即时通信软件设计
9. asp.net core中使用cookie身份验证
10. WinForm 无边框窗体改变尺寸及移动窗体