三个元素,三张背景图

如先前所述,现在你只能以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标准化版块参加讨论，我还想发表评论。