[翻译]标记语言和样式手册 Chapter 9 精简标签（7）
作者：zhaozy 来源：3user.com 发布时间：2008-02-01 09:55:00
加上边框
接着在第二层清单的左边加上点状边框,完成我们的网站地图,这能进一步提示读者顶层项目有属于它的子项目.
为了只在第二层清单达成这个效果,将加上这些规则:
#sitemap {
font-size: 140％;
font-weight: bold;
color: #f63;
}
#sitemap li {
list-style: none; /* turns off bullets */
}
#sitemap li ul {
margin: 6px 15px;
padding: 0 15px;
font-size: 90％;
color: #000;
border-left: 1px dotted #999;
}
/* for third-level */
#sitemap li ul li ul {
border: none;
}
#sitemap li ul li ul li {
font-weight: normal;
padding-left: 16px;
background: url(bullet.gif) no-repeat 0 50％;
}
我们稍微调整了第二层的外补丁,并且加上了点状边线,在这个规则之后,再使用border:none;来去掉第三层的边框.
图9-4是改好字体,边框与图片的清单效果.
图9-4 完成的清单样式,第二层加上点状边线
在设计大纲之类的清单时,嵌套<ul>是个结构恰当,容易指定样式的解决方法.为顶层<ul>指定独特的id滞后,我们能把分别制定每层样式的任务交给CSS进行,而不需要加上多余的显示效果标签.而设计样式的可能性也远超出这个简单的示例.
图9-5是相同的CSS应用在稍大型网站地图上的效果,由于CSS根据层级指定样式,因此标签内容的写法完全相同,项目会随着嵌套状层级不同而自动选用适当的样式.
图9-5 以CSS与嵌套状清单制作的网站地图扩充版
结论
在本章开头,我们探索了两个精简标签源代码的做法,一个是使用继承选择器,另一个是扔掉多余的<div>标签.
集成选择器不必使用多余,容易让标记源代码变得难以阅读的分类属性,同时移除直接内涵唯一性块级元素的<div>标签能让我们尽可能的节省字节,还能让构建复杂版面的源代码更加简单.
使用这些做法看起来只能省下几个字节,但是开始对整个网站应用这些做法之后,节省的成果就开始积累,你可以把它当成另一种编写灵活,结构化标记的好工具.
除了精简标签源代码外,我们还看了继承选择器如何为使用嵌套状清单的网站地图指定样式,你能为每一层级大纲指定独特的样式,而不必使用额外的分类属性,再次节省几个字节,同时让未来更新,重新设计样式的工作更加轻松.
精简标签代码万岁!
0
投稿猜你喜欢
- 本地项目配置1 复制 luffy/settings/dev.py为prop.py修改luffy/settings/prop.py中以下几项(
相关文章ASP.NET Core2.2 中的Configuration配置一ASP.NET Core2.2 中的Configuration配- 任意给出一个数,求该数以内的所有质数.(使用筛选法做的)先看看什么叫做质数？质数的定义：一个大于1的自然数，除了1与它自身外，再没有其它的正
- 本文实例为大家分享了python3音乐播放器的关键代码，供大家参考，具体内容如下from tkinter import *from trac
- Vue3 ref获取DOM元素<div ref="divBox">Hello</div>impo
- 首先说明代码只是帮助理解，并未写出梯度下降部分，默认参数已经被固定，不影响理解。代码主要实现RNN原理，只使用numpy库，不可用于GPU加
- 1.单列运算在Pandas中，DataFrame的一列就是一个Series, 可以通过map来对一列进行操作：df['col2
- 做教育业的网站，会将此遇到这个问题：如何在网页上显示音标？音标为什么显示为乱字符？等等类似的问题。前两天做沪江网某英语页面的时候也碰到了这个
- 具体代码如下所述：__author__ = 'Yue Qingxuan'# -*- coding: utf-8 -*-#求质
- 本文实例为大家分享了python实现比较文件内容异同的具体代码，供大家参考，具体内容如下import sysimport difflibim
- 以下实验是我在百度公司实习的时候做的，记录下来留个小经验。多GPU训练cifar10_97.23 使用 run.sh 文件开始训练cifar
- 什么是函数？ 以前我们学过数学函数都知道，函数
- auth模块是什么auth模块时django自带的用户认证模块开发一个网站的时候，无可避免的需要设计实现网站的用户系统。此时我们需要实现包括
- ShuffleNet是由旷世发表的一个计算效率极高的CNN架构，它是专门为计算能力非常有限的移动设备(例如，10-150 MFLOPs)而设
- PHP 5.0.0 和PHP 4.0.38 于2004年7月13日同时发布，这是一个值得我们PHP爱好者的一大喜讯。期盼已久的PHP5终于出
- 一、常用按键按键说明Keys.BACK_SPACE回退键（BackSpace）Keys.TAB制表键（Tab）Keys.ENTER回车键（E
- 自己写PHP也有一年多了,然后编码问题却老是没有得到好的解决,自己的情况是这样的,网页显示完全正常,在phpmyadmin数据库显示中文乱码
- 内容摘要：本文介绍了使用SQL语句修改数据记录的两种方法，一是使用rs.update，二是使用conn.Execute(sql)，相信对初学
- 前言技术能解决的事情改技术技术解决不了的事情该需求现状假设我们目前有两张表业务表 书（ t_a_book ） 阅读历史记录表 (t_r_bo
- 小程序miniso的一个发布内容截图功能，话不多，先上代码wxml文件：<view class="cut-1-1 t-c {
