卡卡網(wǎng)

Blockquote標(biāo)簽多用于文章引用內(nèi)容的時(shí)候，這里將介紹8個(gè)blockquote的css樣式，通過實(shí)例，讓大家進(jìn)一步了解blockquote的用法。

Blockquote是一個(gè)html元素，它用于標(biāo)識(shí)一個(gè)特別的單元內(nèi)容，這部分內(nèi)容是從其他網(wǎng)站或資源里拿來的。不同的瀏覽器有不同的內(nèi)置Blockquote，同城僅僅是一個(gè)簡(jiǎn)單的左邊旁注。如果你要使用很多引用，像博客那樣，那么控制這個(gè)元素并給它一些CSS樣式是個(gè)好的想法。

一個(gè)受歡迎的技術(shù)是在塊引用區(qū)域放個(gè)大大的繪制的引用圖標(biāo)在左上方和右下方。在這個(gè)沒有多背景圖的前css3時(shí)代，如果不用一點(diǎn)額外的html，是很難做到的。最容易的技術(shù)是連同 <blockquote> 元素添加一個(gè) <span> 元素。雖不理想，但有用。你能夠應(yīng)用很多這個(gè)塊引用元素，然后使用span設(shè)置第二個(gè)背景圖片。左上角和右下角分別地設(shè)置。

經(jīng)典引用

效果圖：

Blockquote-經(jīng)典引用

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

     blockquote.style1 {
          font: 14px/20px italic Times, serif;
          padding: 8px;
          background-color: #faebbc;
          border-top: 1px solid #e1cc89;
          border-bottom: 1px solid #e1cc89;
          margin: 5px;
          background-image: url(images/openquote1.gif);
          background-position: top left;
          background-repeat: no-repeat;
          text-indent: 23px;
     }
     blockquote.style1 span {
          display: block;
          background-image: url(images/closequote1.gif);
          background-repeat: no-repeat;
          background-position: bottom right;
     }

html代碼：

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

execcodegetcode

時(shí)髦的引用

效果圖：

Blockquote-時(shí)髦的引用

css代碼：

     blockquote.style2 {
          font: 14px/22px normal helvetica, sans-serif;
          margin-top: 10px;
          margin-bottom: 10px;
          margin-left: 50px;
          padding-left: 15px;
          padding-top: 10px;
          padding-right: 10px;
          padding-bottom: 10px;
          border-left: 3px solid #ccc;
          background-color:#f1f1f1
     }

html代碼：

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

execcodegetcode

有趣的引用

效果圖：

Blockquote-有趣的引用

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

     blockquote.style3 {
          font: 18px/30px normal Tahoma, sans-serif;
          padding-top: 22px;
          margin: 5px;
          background-image: url(images/openquote3.gif);
          background-position: top left;
          background-repeat: no-repeat;
          text-indent: 65px;
     }
     blockquote.style3 span {
          display: block;
          background-image: url(images/closequote3.gif);
          background-repeat: no-repeat;
          background-position: bottom right;
     }

html代碼：

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

execcodegetcode

奇特的引用

效果圖：

Blockquote-奇特的引用

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

     blockquote.style4 {
          font: 14px/20px italic Times, serif;
          padding-left: 70px;
          padding-top: 18px;
          padding-bottom: 18px;
          padding-right: 10px;
          background-color: #dadada;
          border-top: 1px solid #ccc;
          border-bottom: 1px solid #ccc;
          margin: 5px;
          background-image: url(images/openquote4.gif);
          background-position: middle left;
          background-repeat: no-repeat;
          text-indent: 23px;
     }

html代碼：

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

execcodegetcode

代碼引用

效果圖：

Blockquote-代碼引用

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

     blockquote.style5 {
          font: 12px/18px normal "Courier New", sans-serif;
          padding-left: 70px;
          padding-top: 2px;
          padding-bottom: 2px;
          background-color: #000;
          color: white;
          border-top: 1px solid #ccc;
          border-bottom: 1px solid #ccc;
          margin: 5px;
          background-image: url(images/openquote5.gif);
          background-position: middle left;
          background-repeat: no-repeat;
          text-indent: 23px;
       }
     blockquote.style5 div {
          padding-right: 50px;
          display: block;
          background-image: url(images/closequote5.gif);
          background-repeat: no-repeat;
          background-position: bottom right;
     }

html代碼：

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

execcodegetcode

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

demodownload

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

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

2個(gè)實(shí)例教你怎樣修改和美化blockquote雙引號(hào)及css樣式

標(biāo)簽: css  blockquote