[翻译]标记语言和样式手册 Chapter 4 引用(3)
作者:zhaozy 来源:3user.com 发布时间:2008-01-20 14:19:00
为<blockquote>加上样式
Fast Company从杂志存档里选出每日引言放在首页,已经行之有年了,为了保留FC的印刷体裁和强调效果,因此有很长一段时间这个引言被做成GIF图片,让设计者能以任何方式处理字型,达成期望的效果.
在2003年早秋,差不多是在我看着至爱的红袜队迎向历史性冠军之时,我决定抛弃GIF图片,换上加了样式的<blockquote>标签.
从易用性角度看,以文字显示引用内容很有道理,由于无法重现GIF带来的体裁便利性,因此我们面对着美化引言的挑战.当然,CSS帮了很大的忙.
背景的引用符号
想法十分简单,就是分别制作开引号,闭引号两张图片,选用的色调足以隐没在略为重叠的引用文字后面,引用同时也放在了270像素宽,淡灰色的圆角方块内,以便配合网站整体风格.第三张图片用来完成圆角效果以及引号.这三张图片完全以各个元素debackground属性放在css中.
我们先以photoshop或者你惯用的图形处理程序建立这些图片.这边是个使用特殊字体的好机会,你能选用一般浏览器不支持的字体,在Fast Company的例子里,使用了杂志上的引号字体.
三张图片
图4-1 是刚建立的三张图片,一张是开引号,顶部圆角,一张是闭引号,最后一张是底部的两个圆角.这三张图片背景都是透明的,以便我们用css来控制背景的颜色.同时我们以白色制作了圆角,灰色制作了引号.
图 4-1 为了制作引号圆角而以Photoshop创建的3张图片
标记元素
目前,你只能以background或者background-image属性为一个元素指定单张背景图,因此,我们将为<blockquote>里的每个段落加上id.
我们会把一段内容标为#quote,另一段内容标为#other,使得最后有三个独特元件能够制定背景图.来看看我们会在这个示例接下来的步骤里中使用的标记方法:
<blockquote cite="http://www.somesite.com/path/to/page.html">
<p id="quote"><strong>Misquotations</strong> are the only quotations
that are <strong>never</strong> misquoted.</p>
<p id="author">—Hesketh Pearson</p>
</blockquote>
这样就完成了使用背景图的预备工作了
三个元素,三张背景图
如先前所述,现在你只能以background或者background-image属性为一个元件指定一张背景图,因此我们将善用示例中的三个元素,也就是<blockquote>,#quote段落和#author段落,以便指定三张背景图完成我们期望的效果.
在新增元素前,看看还有那些元素可以用上,这是个很好的习惯.你经常能在完善,结构化的标记源代码中找到适合加上css的元素,大成你需要的效果.
我们先从<blockquote>元素的css规则开始书写:
blockquote {
width: 270px;
margin: 0;
padding: 0;
font-family: georgia, serif;
font-size: 150%;
letter-spacing: -1px;
line-height: 1em;
text-align: center;
color: #555;
background: #eee url(top.gif) no-repeat top left;
}
我们把整个组件的宽度设为270像素,与提供顶部圆角,开引号效果的top.gif宽度相同,同时我们也照顾了一下文字效果,为它指定了字体,大小和颜色.最后,我们置中所有文字,并以最后一条规则指定了背景色,背景图以及背景图的显示位置.
去掉<blockquote>的内外补丁也很重要,我们该为每个段落元素加上内补丁,这能让我们避免windows版IE5错误解析CSS盒模型的问题.我们会在本书第二部分进一步讨论盒模型的细节.
接着,让我们帮#quote段落设定样式:
blockquote {
width: 270px;
text-align: center;
margin: 0;
padding: 0;
font-family: georgia, serif;
font-size: 150%;
letter-spacing: -1px;
line-height: 1em;
color: #555;
background: #eee url(top.gif) no-repeat top left;
}
#quote {
margin: 0 10px 0 0;
padding: 20px 10px 10px 20px;
background: url(end_quote.gif) no-repeat right bottom;
}
借着指定margin:0 10px 0 0;我们能取消浏览器在段落上下的预设补丁,以便使用精确的内补丁设定值排好版面.然而我们还是在右侧加上了10像素的外边界,以便把闭引号挤开,配合左边的效果.如果我们不留下这10像素的话,开引号就会紧靠整个外边框的最右边.另一种可行方法是直接在图片右边加上适当的留白.
同时也要留意,我们指定把背景图(开引号)放在<blockquote>的右侧(right)底部(bottom).
最后,我们要在作者段落(#author)放上最后一张背景图,也就是引言底部的圆角.
blockquote {
width: 270px;
text-align: center;
margin: 0;
padding: 0;
font-family: georgia, serif;
font-size: 150%;
letter-spacing: -1px;
line-height: 1em;
color: #555;
background: #eee url(top.gif) no-repeat top left;
}
#quote {
margin: 0 10px 0 0;
padding: 20px 20px 10px 20px;
background: url(end_quote.gif) no-repeat right bottom;
}
#author {
margin: 0 10px 0 0;
padding: 0 0 10px 0;
color: #999;
font-size: 60%;
background: url(bottom.gif) no-repeat bottom;
}
我们再度取消段落上下的预设补丁,改在底部加上一些内部补丁.第三张图片已经到位了.为引用内容加上两个圆角,借以padding代替margin设定author部分的排列方式,我们得以让圆角图出现在适当的位置上,也就是最底部.
猜你喜欢
- SQL Server有两种备份方式,一种是使用BACKUP DATABASE将数据库文件备份出去,另外一种就是直接拷贝数据库文件mdf和日志
- 昨天在做mergeCSS的时候遇到两个正则匹配的问题,也花了不少的时间,最后在CSS森林群的 CE 同学帮助下,才完成了这俩正则,特别记录下
- 目前市面上成熟的CMS产品有很多,无外乎两种解决方案:第一种就是用XSL+XML的方式来实现客户端具体数据;第二种是生成HTML或者SHTM
- 一、增强的可扩展性 Oracle9i Real Application Clusters是Oracle的下一代并行服务器系列产品。Oracl
- 使用 NetBox 可以方便的将 asp 应用编译成为独立运行的执行程序,完全摆脱 iis 的束缚,在几乎所有的 Windows
- 1. ORACLE 的解析器按照从右到左的顺序处理 FROM 子句中的表名,因此 FROM 子句中写在最后的表(基础表 driving ta
- 通配符:通配符描述示例%包含零个或更多字符的任意字符串。WHERE title LIKE '%computer%' 将查找处
- 随着手机用户的不断增加,WAP站点如雨后春笋迅速的滋长开来,手机邮箱也不断的出现在人的眼前,笔者也曾经开发了一套手机邮箱的系统,但由于时间仓
- SELECT语句具有种类繁多的各类选项,这些选项可以用来控制数据返回的方式。这些选项以子句、关键词和函数的形式存在。 子句是一种修改结果的语
- 如果你计划将数据库从SQL Server 2000 升级到 SQL Server 2005。你在升级之前一定会测试每样东西,并且证明应用程序
- 在许多用SQL Server实现的新的企业系统设计中,系统设计师需要在给数据结构和管理应用程序逻辑的定位上做出具有关键性意义的决定。SQL
- 在Windows vista之前的微软操作系统的地址栏与浏览器的地址栏是一样的,也是面包屑般的自上而下的线性等级形,如果想从D盘跳到C盘是不
- 很多现代的浏览器在地址栏的右边有个搜索框,默认的安装有 Google 搜索等。如下图所示: 其实这是 OpenSearch 的一
- SQL Server数据库连接中常见的错误分析:一."SQL Server 不存在或访问被拒绝"这个是最复杂的,错误发生
- hao123的成功引领了一批的网址站,然而辉煌却是很难复制的,复制了模式却复制不了成功,市场一旦被垄断就很难再超越。网址站的成功也在一定程度
- 在进行数据库的查询时,会经常遇到这样的情况:例如想在一个用户数据库中查询他的用户名和他的密码,但恰好该用户使用的名字和密码中有特殊的字符,例
- 译者:AlphaImageLoader是一个让IE6正常显示PNG32时要用到的一个滤镜,但它在使用中也会产生一系列的问题,本文对使用Alp
- 本程序有两文件test.asp 和tree.asp 还有一些图标文件 1。test.asp 调用类生成树 代码如下<%@
- GetRef 函数 返回一个指向一过程的引用,此过程可绑定某事件。 Set object.eventname = GetRef(procna
- 我们都知道在9i之前,要想获得建表和索引的语句是一件很麻烦的事。我们通常的做法都是通过export with rows=no来得到,但它的输