嵌套的行内引用

你也能在引用内容中嵌套引用其他文字,搞混了么?我也是,来看看示例吧:

I said, <q lang="en-us">Herman, do you like bubblegum? </q> And he said, <q lang="en-us">Yes. Bubblegum is what Harry calls <q lang="en-us">delicious</q>.</q>

此时浏览器会在适当的地方使用双引号和单引号,像是这样.

I said, "Herman, do you like bubblegum?" And he said, "Yes. Bubblegum is what Harry calls 'delicious'."

为<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">&#8212;Hesketh Pearson</p>
</blockquote>

这样就完成了使用背景图的预备工作了

出处：蓝色理想
责任编辑：bluehearts

上一页 标记语言——引用 [2] 下一页 标记语言——引用 [4]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。