三个元素,三张背景图
如先前所述,现在你只能以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部分的排列方式,我们得以让圆角图出现在适当的位置上,也就是最底部.
出处:蓝色理想
责任编辑:bluehearts
上一页 标记语言——引用 [3] 下一页 标记语言——引用 [5]
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|