图 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段落设定样式:
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)放上最后9
7
3
1
2
3
4
8
:
|
