中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

三個(gè)元素,三張背景圖

如先前所述,現(xiàn)在你只能以background或者background-image屬性為一個(gè)元件指定一張背景圖,因此我們將善用示例中的三個(gè)元素,也就是<blockquote>,#quote段落和#author段落,以便指定三張背景圖完成我們期望的效果.

在新增元素前,看看還有那些元素可以用上,這是個(gè)很好的習(xí)慣.你經(jīng)常能在完善,結(jié)構(gòu)化的標(biāo)記源代碼中找到適合加上css的元素,大成你需要的效果.

我們先從<blockquote>元素的css規(guī)則開始書寫:

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;
  }

我們把整個(gè)組件的寬度設(shè)為270像素,與提供頂部圓角,開引號(hào)效果的top.gif寬度相同,同時(shí)我們也照顧了一下文字效果,為它指定了字體,大小和顏色.最后,我們置中所有文字,并以最后一條規(guī)則指定了背景色,背景圖以及背景圖的顯示位置.

去掉<blockquote>的內(nèi)外補(bǔ)丁也很重要,我們?cè)摓槊總�(gè)段落元素加上內(nèi)補(bǔ)丁,這能讓我們避免windows版IE5錯(cuò)誤解析CSS盒模型的問題.我們會(huì)在本書第二部分進(jìn)一步討論盒模型的細(xì)節(jié).

接著,讓我們幫#quote段落設(shè)定樣式:

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;我們能取消瀏覽器在段落上下的預(yù)設(shè)補(bǔ)丁,以便使用精確的內(nèi)補(bǔ)丁設(shè)定值排好版面.然而我們還是在右側(cè)加上了10像素的外邊界,以便把閉引號(hào)擠開,配合左邊的效果.如果我們不留下這10像素的話,開引號(hào)就會(huì)緊靠整個(gè)外邊框的最右邊.另一種可行方法是直接在圖片右邊加上適當(dāng)?shù)牧舭?

同時(shí)也要留意,我們指定把背景圖(開引號(hào))放在<blockquote>的右側(cè)(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;
  }

我們?cè)俣热∠�段落上下的預(yù)設(shè)補(bǔ)丁,改在底部加上一些內(nèi)部補(bǔ)丁.第三張圖片已經(jīng)到位了.為引用內(nèi)容加上兩個(gè)圓角,借以padding代替margin設(shè)定author部分的排列方式,我們得以讓圓角圖出現(xiàn)在適當(dāng)?shù)奈恢蒙?也就是最底部.

出處：藍(lán)色理想
責(zé)任編輯：bluehearts

上一頁 標(biāo)記語言——引用 [3] 下一頁 標(biāo)記語言——引用 [5]

◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。