[翻译]标记语言和样式手册 Chapter 15 为body指定样式(5)
作者:zhaozy 来源:3user.com 发布时间:2008-02-21 12:36:00
标签:样式,标记,css,手册
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 下一步
0
投稿
猜你喜欢
- 所以对应的asp处理代码如下代码如下:dedearr=split(xiangguanid2,chr(13)) '分割成数组
- 今天我和中国著名画家"渔人"谈了一个关于"怎样才能设计好"的问题,他给我说了一句话,得益不浅,那句话
- Hihi, 大家好~ 最近有不少人都提及了网页上该如何选择字体的问题。问题虽然小,但是却是前端开发中的基本,因为目前的网页,还是以文字信息
- 不知道您是否留意了,浏览本站时,浏览器右下角有一个标着top的黑色直角三角形,可以点击它返回到正在浏览的网页页眉。当滚动网页时,它的位置一直
- 看到很多站长工具网,都提供了通过域名获取网站IP的方法。自己也想做一个,网上查了不少代码。有说用WSHSHELL,也有说用ASPPING组件
- ASP实现语音分时问候,其实asp实现这个功能很容易,时间判断一下,在某个时间段就调用某个的背景语音。下面是源代码:
- 按单字节计算字符串的长度,汉字算两个字节。<script type="text/JavaScript"
- 简介这是一篇介绍网页设计原则的文章。在互联网迅速发展的今天,各种web 2.0网站竞争激烈,你死我亡。Jini, D
- b 和 i 标签在现在的 Web 标准潜规则中是不推荐使用,甚至是反对使用的,因为认为他们只是“表现”粗体和斜体,而没有任何“语义”。更多的
- Adodb.Stream是ADO的Stream对象,提供存取二进制数据或者文本流,从而实现对流的读、写和管理等操作. 组件:&qu
- 一、图像缩略图的编辑图像的缩略图是指把图像按原比例缩小,可作为原图的预览,这在网络速度比较慢时可快速地显示图片的概图。当你的网页上有大型图片
- 访问phpmyadmin时总是出现 “无法载入 mysql 扩展,请检查 PHP 配置”。查看原因是“php_mysql.dll”无法载如。
- 在seclists中看到一个很惊人的thread:http://seclists.org/oss-sec/2012/q2/493MySQL爆
- 前面我们讲了一些Dreamweaver MX的基本操作,相信大家看了后都会觉得比较简单,的确,这是个工具软件,操作方便应该是它的宗旨。其实网
- 相信在使用MSSQL数据库下使用事务回滚方式操作多表记录的时候,会经常出现“不能在手动或分布事务方式下创建新的连接”的出错提示信息,这个问题
- 讲这个方法之前,我们应该先了解下插入节点时浏览器会做什么。在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面
- 1,SELECT 语句 在SQL的世界里,最最基础的操作就是SELECT 语句了。在数据库工具下直接采用SQL
- 仿照常见的那个图片变换flash做的效果,纯js。不过滤镜变换只对应ie,ff只能看到一般的切换。这个js做的效果最早在sina看到,这里把
- 这篇文章介绍了 5 个实用的 CSS 属性。你应该很熟悉,但很可能很少会使用到。我并不是在谈论展望全新的 CSS3 属性,我指的是旧的 CS
- 看看下面:<%Set objQuery = Server.CreateObject("ixss