卡卡網(wǎng)

blockquote默認(rèn)的雙引號(hào)千篇一律太過(guò)普通，我們能否更改它并美化它，以搭配網(wǎng)頁(yè)模版的視覺(jué)要求？答案是肯定的。下面我就以兩個(gè)實(shí)例來(lái)教你怎樣修改和美化blockquote雙引號(hào)，并送上漂亮的css樣式。

概括來(lái)說(shuō)，主要是通過(guò)如下兩個(gè)方法來(lái)實(shí)現(xiàn)：

• 使用css3更改和美化雙引號(hào)樣式
• 使用圖片更改和美化雙引號(hào)樣式

下面分別用實(shí)例詳細(xì)介紹。

1、使用css3更改和美化雙引號(hào)樣式一

效果圖：

blockquote-css3修改雙引號(hào)

css代碼：

@import url(https://fonts.googleapis.com/css?family=Roboto);
blockquote {
 color:#888;
 background-color: #eae6f3;
 border-left: 1em solid #5236a0;
 padding: 1em 1.5em 1em 1.5em;
 position: relative;
 font-family: 'Roboto', sans-serif;
 line-height: 150%;
 text-indent: 35px;
}
blockquote:before {
  color: #392570;
  content: "\201C";
  font-size: 5em;
  position:absolute;
  left:-15px;
  top: 40px;
  line-height: 0.1em;
}
blockquote:after {
  color: #392570;
  content: "\201D";
  font-size: 5em;
  position:absolute;
  right:15px;
  bottom: 0em;
  line-height: 0.1em;
}

html代碼：

<blockquote>
html里使用select控件，非常容易就能實(shí)現(xiàn)下拉菜單的效果。但是由于select控件只能更改長(zhǎng)度，不能更改高度和顏色等樣式，因此在網(wǎng)頁(yè)設(shè)計(jì)中有時(shí)候顯得與整體布局搭配不太美觀。正因?yàn)檫@個(gè)原因，div+css實(shí)現(xiàn)的下拉菜單便大量被網(wǎng)頁(yè)設(shè)計(jì)師使用。通過(guò)div+css，可以隨心所欲的實(shí)現(xiàn)自己想要的樣式效果，使得下拉菜單與網(wǎng)頁(yè)整體布局搭配的更美觀和諧。
</blockquote>

execcode getcode

代碼分析：

首先要導(dǎo)入字體，使用語(yǔ)句：

@import url(https://fonts.googleapis.com/css?family=Roboto);

或者，也可以使用<link ...>標(biāo)簽來(lái)導(dǎo)入字體，如下：

<link rel='stylesheet'   type='text/css' media='all' />

其次，在<blockquote>樣式里使用字體設(shè)置，語(yǔ)句如下：

font-family: 'Roboto', sans-serif;

這個(gè)Roboto就是雙引號(hào)的字體樣式。

而前面的雙引號(hào)樣式設(shè)置是：

blockquote:before {
...
}

后面的雙引號(hào)樣式設(shè)置是代碼：

blockquote:after{
...
}

2、使用css3更改和美化雙引號(hào)樣式二

通過(guò)css3更改和美化雙引號(hào)的方法，通過(guò)上面例子分析，我想大家應(yīng)該了解了。下面再送上一個(gè)實(shí)例，大家可以自行再研究研究，喜歡的話還可以直接拿去使用。

效果圖：

blockquote-css3修改雙引號(hào)

css代碼：

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
blockquote {
  color:#888;
  background-color: #eae6f3;
  border-left: 1em solid #5236a0;
  padding: 1em 1.5em 1em 1.5em;
  position: relative;
  font-family: 'Open Sans', sans-serif;
  line-height: 150%;
  text-indent: 35px;
}
blockquote:before {
  color: #392570;
  content: "\201C";
  font-size: 5em;
  position:absolute;
  left:-15px;
  top: 35px;
  line-height: 0.1em;
}
blockquote:after {
  color: #392570;
  content: "\201D";
  font-size: 5em;
  position:absolute;
  right:15px;
  bottom: 0em;
  line-height: 0.1em;
}

html代碼：

<blockquote>
html里使用select控件，非常容易就能實(shí)現(xiàn)下拉菜單的效果。但是由于select控件只能更改長(zhǎng)度，不能更改高度和顏色等樣式，因此在網(wǎng)頁(yè)設(shè)計(jì)中有時(shí)候顯得與整體布局搭配不太美觀。正因?yàn)檫@個(gè)原因，div+css實(shí)現(xiàn)的下拉菜單便大量被網(wǎng)頁(yè)設(shè)計(jì)師使用。通過(guò)div+css，可以隨心所欲的實(shí)現(xiàn)自己想要的樣式效果，使得下拉菜單與網(wǎng)頁(yè)整體布局搭配的更美觀和諧。
</blockquote>

execcode getcode

3、使用圖片更改和美化雙引號(hào)樣式

上面兩個(gè)方法是使用css3實(shí)現(xiàn)的，比較簡(jiǎn)單，不過(guò)需要引用字體庫(kù)，影響了網(wǎng)頁(yè)加載速度，且不是所有瀏覽器都支持，例如IE8就不支持css3。為此，我們可以使用圖片和配合<span>標(biāo)簽來(lái)實(shí)現(xiàn)同樣的效果，這樣的好處是可適應(yīng)所有瀏覽器，且無(wú)需引用字體庫(kù)，速度更快些，但在寫html代碼上會(huì)麻煩一點(diǎn)，要寫多一個(gè)<span>標(biāo)簽。

效果圖：

blockquote-使用圖片更改和美化雙引號(hào)樣式

css代碼（注意圖片路徑）：

     blockquote {
          font: 14px/20px italic Times, serif;
          color:#888;
          padding: 18px;
          background-color: #dddddd;
          border-left: 15px solid #666666;
          margin: 5px;
          background-image: url(images/quote_open.png);
          background-position: 15px 10px;
          background-repeat: no-repeat;
          text-indent: 23px;
     }
     blockquote span {
          display: block;
          background-image: url(images/quote_close.png);
          background-repeat: no-repeat;
          background-position: bottom right;
     }

html代碼：

<blockquote>
  <span>
html里使用select控件，非常容易就能實(shí)現(xiàn)下拉菜單的效果。但是由于select控件只能更改長(zhǎng)度，不能更改高度和顏色等樣式，因此在網(wǎng)頁(yè)設(shè)計(jì)中有時(shí)候顯得與整體布局搭配不太美觀。正因?yàn)檫@個(gè)原因，div+css實(shí)現(xiàn)的下拉菜單便大量被網(wǎng)頁(yè)設(shè)計(jì)師使用。通過(guò)div+css，可以隨心所欲的實(shí)現(xiàn)自己想要的樣式效果，使得下拉菜單與網(wǎng)頁(yè)整體布局搭配的更美觀和諧。
  </span>
</blockquote>

execcode getcode

代碼分析：

首先，我們要用作圖軟件做兩個(gè)雙引號(hào)（一前一后），把圖片放在目錄images下。

其次，在樣式

blockquote {
..
}

里，設(shè)置背景填充。

再次，在樣式

blockquote span {
...
}

里，設(shè)置背景填充。

最后，在html代碼里使用，代碼如下，記得要加上<span>標(biāo)簽：

<blockquote>
  <span>
      ...這里是引用文字...
  </span>
</blockquote>

本文實(shí)例演示及源碼下載

demo download

您可能對(duì)以下文章也感興趣

3個(gè)Blockquote的css樣式【css3實(shí)現(xiàn)】

5個(gè)Blockquote的css樣式

標(biāo)簽: blockquote  css