Web Standards Solutions 網頁設計標準規格

引言QUOTATIONS

方法A:缺乏意義
  <p>"Misquotations are the only quotations that are never misquoted.</p>
  <p>&#8212; Hesketh Pearson</p>
&#8212;為長破折號，也可用&mdash;代替

方法B:以class處理?
  <div class="quotation">
  <p>"Misquotations are the only quotations that are never misquoted.</p>
  <p>&#8212; Hesketh Pearson</p>
  </div>

方法C:<blockquote>最棒
  <blockquote>
  <p>"Misquotations are the only quotations that are never misquoted.</p>
  <p>&#8212; Hesketh Pearson</p>
  </blockquote>

更多技巧
給好奇寶寶的參考資料 cite屬性
  <blockquote cite="http://www.xxxxxx.xxx/page.htm>
  <p>"Misquotations are the only quotations that are never misquoted.</p>
  <p>&#8212; Hesketh Pearson</p>
  </blockquote>

行內引言<q>元件
不需要引號<q lang="en-us">
巢狀行內引言
為<blockquote>加上樣式
背景的引言符號
三張圖片(開引號頂部圓角、閉引號、底部兩個圓角)
標記元件
  <blockquote cite="http://www.xxxxxx.xxx/page.htm>
  <p id="quote">"Misquotations are the only quotations that are never misquoted.</p>
  <p id="author">&#8212; Hesketh Pearson</p>
  </blockquote>
三個元件，三張背景:利用三張圖片加上background的顏色組合而成
  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;
  }
  #quote{
   margin: 0 10px 0 0;
   padding: 20px 10px 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;
  }
強調特殊文字：<strong>