[翻译]标记语言和样式手册 Chapter 15 为body指定样式（5）
作者：zhaozy 来源：3user.com 时间：2008-02-21 12:36:00
CSS的魔力
要根据<body>的id来"点亮"标签,只需要一组CSS声明,告诉浏览器每种可能发生的组合:
body#apples #apples_tab a,
body#spag #spag_tab a,
body#beans #beans_tab a,
body#milk #milk_tab a {
color: #000;
background: url(tab_pyra.gif) no-repeat bottom center;
}
基本上这就代表了:当<body>标签的id是apples的时候,就为#apples_tab清单项目加上链接背景,同时把连接色彩换成黑色,然后为,每个标签选项重复类似的声明.
现在需要"点亮"导航条内正确的动作只剩下变更<body>标签的id了.这段CSS会处理好剩下的事情,同时能在未来网站新增页面时进行修改,以便处理更多种组合.
举例来说,如果想根据使用者目前位于这一页,"点亮"Beans标签的话,只需要像这样为<body>标签指定id即可.
<body id="beans_tab">
然后正确的标签就会凸显出来,就像图15-4一样(这边我们用了第一章解释的"mini-tab"样式).
图15-4 为<body>标签指定id所选定的标签
我们也能为<body>指定其他在标记源代码,CSS里都声明过的id,"点亮"我们希望凸显的其他分页标签.
除此之外,你也能以相同的概念触发页面里其他与内容相关的事件,像是子导航目录,或者根据页面的id轮换颜色.由于<body>标签位于顶层,因此它的id可以用来控制页面里任何在它底下的标签.
归纳
迁移到用CSS作为基础的布局方法后,你一定会对更大的灵活性感到惊讶.在这一章里,我们看了善用这种灵活性的方法之一:也就是使用<body>标签的class或是id来控制页面的分栏结构,或是标识使用者目前所在的页面.
使用标准,模块化开发网站有何好处?这些不过只是简单的例子而已,通过<body>标签的一个属性,就能改变整个页面(甚至是网站)的布局,设计与样式.
阅读最后一章：Chapter 16 下一步
标签：样式,标记,css,手册
0
投稿猜你喜欢
Vue 3.0中jsx语法的使用
2023-07-02 17:07:17
使用Python绘制图表大全总结
2022-08-09 20:35:27
JavaScript阻止浏览器返回按钮的方法
2024-02-25 16:15:44
Python类绑定方法及非绑定方法实例解析
2022-08-10 11:36:38
java 使用poi 导入Excel数据到数据库的步骤
2024-01-19 11:21:34
Finished with error:Navicat运行SQL文件报错的解决
2024-01-28 01:40:03
MySQL中数据表操作详解
2008-12-29 13:50:00
mysql一次将多条不同sql查询结果并封装到一个结果集的实现方法
2024-01-19 23:30:05
python中matplotlib调整图例位置的方法实例
2023-09-11 08:52:13
div、section、article 的区别
2011-02-26 15:39:00
Go库text与template包使用示例详解
2024-04-26 17:21:16
python使用pika库调用rabbitmq交换机模式详解
2024-01-01 06:28:18
Python中使用Flask、MongoDB搭建简易图片服务器
2021-12-09 19:57:16
Python使用enumerate获取迭代元素下标
2023-03-05 01:46:31
Python机器学习算法之k均值聚类(k-means)
2023-01-17 17:42:14
js 获取、清空input type="file"的值示例代码
2024-04-22 13:07:14
基于PyQt5自制简单的文件内容检索小工具
2023-06-11 19:45:03
Centos中彻底删除Mysql（rpm、yum安装的情况）
2024-01-14 14:33:36
基于Python实现图像的傅里叶变换
2023-12-14 09:10:34
Python的@property的使用
2021-03-27 11:02:25