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

有兩個(gè)讓我們決定要這樣把圖標(biāo)寫(xiě)死在網(wǎng)頁(yè)里面.首先,根據(jù)標(biāo)題種類(lèi)的不同,我們會(huì)使用到不同的圖標(biāo)(圖書(shū)俱樂(lè)部是一本書(shū),每日引言則是引號(hào)等等),第二個(gè)理由則是我們每個(gè)月會(huì)更換一次整個(gè)網(wǎng)站的配色,以配合當(dāng)期雜志的封面主題.當(dāng)然,這種替換工作因?yàn)槭褂昧薱ss而變得十分簡(jiǎn)單.

為了讓圖標(biāo)跟著其他頁(yè)面元素一起變色(這樣才不必一直為了新色彩而重新制作圖標(biāo)),我們只用兩種顏色做了一組圖標(biāo):白色和透明(會(huì)顯示除每次更改的背景顏色).圖2-9就是放在首頁(yè)引言之前的圖標(biāo):

圖2-9: 13X13的透明圖標(biāo)(放大后)

為了在透明部分填進(jìn)顏色,我們使用了簡(jiǎn)單的css的background屬性設(shè)定顏色,我們希望只希望這個(gè)顏色出現(xiàn)在圖表的后面而不出現(xiàn)在標(biāo)題文字后面,我們用到了css選擇器只對(duì)<h3>標(biāo)簽內(nèi)的圖片使用這條規(guī)則,以便達(dá)到我們想要的效果:

h3 img {
  background: #696;
  }

這段css代碼表示<h3>標(biāo)簽內(nèi)的所有<img>標(biāo)簽都把背景設(shè)為綠色,背景色會(huì)透過(guò)透明像素顯示出來(lái),但是白色部分仍然還是白色,如此一來(lái),每個(gè)月只需要修改這條css規(guī)則,換上不同的顏色,就能瞬間改變網(wǎng)站上每個(gè)圖標(biāo)的色彩了,就像變魔術(shù)一樣.

對(duì)齊<img>標(biāo)簽

為了使圖標(biāo)和文字正確的對(duì)齊(我們希望垂直居中),因此我們加上了這條css規(guī)則:

h3 img {
  background: #696;
  vertical-align: middle;
  }

這條規(guī)則會(huì)使圖標(biāo)和<h3>文字內(nèi)容垂直居中,圖2-20就是設(shè)定玩的標(biāo)題:

圖2-10:以css為圖標(biāo)加上背景色的示例

這個(gè)例子還能說(shuō)明另一個(gè)重要的概念—以css指定背景色彩會(huì)出現(xiàn)在任何頁(yè)面內(nèi)指定的圖標(biāo)或是css圖標(biāo)后面.

舉例來(lái)說(shuō),我們回頭看看"方便更新的圖標(biāo)"這個(gè)示例,為它加上背景色看看:

h1 {
  font-family: Arial, sans-serif;
  font-size: 24px;
  color: #fff;
  padding-left: 30px;
  background: #696 url(transparent_icon.gif) no-repeat 0 50%;
  }

如此以來(lái) transparent_icon.gif 會(huì)顯示在相同規(guī)則中稍早定義的背景色之上(如圖2-11) —在這個(gè)例子中,背景色是#696,也就是撞球桌的綠色.

圖2-11 設(shè)定了背景圖,背景色的標(biāo)題示例

當(dāng)你為了考慮色彩為主的頁(yè)面上加小圓角,裝飾圖標(biāo)時(shí),這個(gè)小技巧就十分好用了.這些不重的圖片可以完全放進(jìn)css文件里面,未來(lái)打算更新的時(shí)候也就可以輕松替換.現(xiàn)在多用點(diǎn)心思.就能節(jié)省未來(lái)許多的工作.

總結(jié)

我希望通過(guò)比較集中常用的方法后,你能發(fā)覺(jué)正確使用標(biāo)題標(biāo)簽的好處.不管是視覺(jué),非視覺(jué)瀏覽器或者其他設(shè)備,都能正確的歷屆標(biāo)題的含義,并且以適當(dāng)?shù)姆椒ㄕ宫F(xiàn)它們,搜索引擎也會(huì)為他們建立索引,你也可以輕松的以css應(yīng)用和修改需要顯示的效果.