卡卡網(wǎng)

Blockquote標簽多用于文章引用內容的時候，這里將介紹8個blockquote的css樣式，通過實例，讓大家進一步了解blockquote的用法。

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

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

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

execcodegetcode

時髦的引用

效果圖：

Blockquote-時髦的引用

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

execcodegetcode

本文實例演示及源碼文件

demodownload

您可能對以下文章也感興趣

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

2個實例教你怎樣修改和美化blockquote雙引號及css樣式

標簽: css  blockquote