[翻译]标记语言和样式手册 Chapter 8 再谈清单(5)
作者:zhaozy 来源:3user.com 发布时间:2008-01-29 13:16:00
由结构引导样式
语义上来说,方法B十分完整,让我们能为清单的每一个元素使用独立标签,这让我们能分别为名词,揭示内容制定特定样式.
举例来说,我们能做个简单修改,以CSS把<dt>变成粗体.只要几行声明就能达成这个目的.完全不必修改标签内容.
dt {
font-weight: bold;
}
只要这样就够了,不必为清单内容加上<strong>,<b>甚至是<span>标签,现在所有的<dt>都会变成粗体,与图8-7一样.
图8-7 方法B为<dt>加上font-weight:bold的效果
加上图片
或许你发现我喜欢用CSS为标签加上小图标,我喜欢这个做法的理由,是因为我能使用CSS的background属性打扮页面,同时把属于装饰性,不重要的图片与页面内容,结构分开.
更换,增加或移除这些图片的动作十分简单,因为我不需要修改标签内容就能完成这些变动.
对定义清单来说,如果加上小箭头图标,从名词指向定义内容的话,应该很有意思.我们能以下面这段CSS轻松加上这个效果:
dt {
font-weight: bold;
}
dd {
margin-left: 15px;
padding-left: 15px;
color: #999;
background: url(dd_arrow.gif) no-repeat 0 2px;
}
我们所做的修改,首先是以margin-left:15px稍微拿掉一些<dd>标签预设的外补丁,接着,我们把定义描述的颜色换成灰色,使其与<dt>的区别更大.同时在描述文字的左边,理顶端2像素的地方放上一个小巧的橘色箭头图标,并且在描述文字的左边留下15像素的内部定,让图标不会与文字重叠,图8-8就是完成的效果.
图8-8 加上图标,凸显文字关联性的定义清单
如你所见,使用定义清单结构,我们就能轻易地为每个构成项目指定独特的样式,让版面更丰富,而完全不必修改标签内容,我们也能确信不支持样式的浏览器仍会以有组织,容易阅读的方式显示这个清单.
其他应用
又见很重要的事情必须指出:那就是定义清单的用途不仅限于标注名词,定义内容.定义清单还能用来标注对话,导航条,甚至是表单排版.
我们甚至可以引用W3C在HTML 4.01规范中对于定义清单的定义http://www.w3.org/TR/html4/struct/lists.html)"以<dl>标签建立的定义清单,通常包含一系列名词,定义内容(虽然定义清单也能应用在其他地方)"。所以,别害怕把定义清单用在名词,解释内容之外的地方!
概要
本章到目前为止,我们看了另外的两种清单:有序清单,定义清单.我们发现借着使用这些清单结构,代替无序清单加上额外标签的做法,能够让我们更容易控制样式,同时也让清单变得更容易维护.
接着以我们本章最初的步骤清单当作例子,用CSS为他调整一下样式.
猜你喜欢
- 每天换一个壁纸,每天好心情。# -*- coding: UTF-8 -*- from __future__ import unicode_l
- 之前学习深度学习算法,都是使用网上现成的数据集,而且都有相应的代码。到了自己开始写论文做实验,用到自己的图像数据集的时候,才发现无从下手 ,
- 前言需要从数据库检索某些符合要求的数据,我们很容易写出 Select A B C FROM T WHERE ID = XX 这样
- 无规矩不成方圆。编写代码也是,如果没有大概的框架,管理代码将会是一件很头疼的事。先看看笔者以前写的python脚本:如果只有一个用例,这样看
- 需求:连接本机的(两台安卓手机)或者本机安装的(安卓模拟器两个),实现同时安装本地apk包 。demon.py特别说明:必须写udid才能实
- MySQL有多种方法导入多个.sql文件(里面是sql语句),常用的有两个命令:mysql和source。但是这两个命令的导入效率差别很大,
- 一、os函数目录1 os.access(path, mode) 检验权限模式2 os.chdir(path) 改变当前工
- 1,WITH TEMPLET意思是,生成的页面架构将采用某个已设定的模板,在此之前我的一篇教程中介绍过,希望各位在看本教程之前对ASP采用模
- 专家解答 通过查询任何数据库中的三个系统表,你可以获得每个表的每一个字段的默认值。下面是这个核心查询。它返回分配给当前数据库中每个用户表的默
- 一. 开发前的准备1. 必须了解的知识 SDK:软件开发工具包,可以为开发者提供快速开发的工具沙箱环境:也就是测试环境支付宝支付金额的精度:
- 对于一些快速迭代的产品来说,特别是移动端 C端产品,基于用户运营的目的,在 app首页给用户展示各种各样的弹窗是很常见的事情,在产品初期,由
- vue动态添加表单validateField验证,代码如下所示:<template> <el-f
- Data Points Archive 有时, 为了让应用程序运行得更快,所做的全部工作就是在这里或那里做一些很小调整。啊,但关键在于确定如
- 1.高阶函数# 1.变量指向函数# 调用函数和函数本身print("-10的绝对值为:",abs(-10))print(
- 因为要批量用某软件处理一批eps文件,所以要模拟鼠标及键盘动作,使其能够自动化操作。#-*-coding:utf-8-*-import os
- 首先我们放出tf2.0关于tf.keras.layers.Conv2D()函数的官方文档,然后逐一对每个参数的含义和用法进行解释:tf.ke
- 本文实例讲述了Python实现pdf文档转txt的方法。分享给大家供大家参考,具体如下:首先,这是一个比较粗糙的版本,因为已经够用了,而且对
- 前言最近做了几个简单的爬虫python程序,于是就想做个窗口看看效果。首先是,窗口的话,以前没怎么接触过,就先考虑用Qt制作简单的ui。这里
- 闲言少叙,本文主要是想介绍一个Golang开发常见的一个问题。然而,此问题对于初学者来说却经常容易陷入坑中。问题我在写一段代码时,使用了Go
- Oracle text是Oracle的全文检索技术,是9i版本标准版和企业版的一部分。Oracle text使用标准的sql语言索引、查找、