龙宫捕鱼游戏大厅

書名： Java Web開發實例大全（基礎卷） (軟件工程師開發大系)
作者名：軟件開發技術聯盟
本章字數： 1805字
更新時間： 2021-03-26 13:01:21

3.4 文字及列表樣式

在制作網頁時，經常需要將網頁中的文字以及列表設置成不同的樣式。下面將通過幾個例子來介紹如何使用CSS樣式設置文字和列表的樣式。

實例071 應用刪除線樣式標記商品特價

光盤位置：光盤\MR\03\071

初級

實用指數：

實例說明

在瀏覽一些網上商店時，商品列表中的有些商品是顯示有折扣的，一般會顯示商品原價和打折之后的價格，顯示原價的文字會帶有刪除線，本實例的運行效果如圖3.19所示。

圖3.19 帶刪除線的商品價格

關鍵技術

文字加刪除線，主要使用的是CSS樣式中的text-decoration屬性。該屬性有5個可選值，即underline（文字加下劃線）、overline（文字加上劃線）、line-through（文字加刪除線）、blink（閃爍文字，只有Netscape瀏覽器支持）和none（默認值）。

設計過程

（1）新建index.htm頁面，在該頁面的<style>標簽中編寫頁面的CSS樣式，關鍵代碼如下：

        <style type="text/css">
        font{
              font-size:12px;
              color:red;
              text-decoration:line-through;
        }
        table{
              font-size:12px;
              background-color:threedface;
              border:1px solid;
        }
        </style>

（2）在頁面中，將商品原價文字寫在<font>標簽之間，關鍵代碼如下：

        <td>
              <font>98.00元</font>
        </td>

秘笈心法

text-decoration屬性的line-through（文字加刪除線）屬性值經常應用在顯示商品價格的文字上，所以有必要記住這個屬性的用法。

實例072 在文字上方標注說明標記

光盤位置：光盤\MR\03\072

初級

實用指數：

實例說明

在瀏覽一些信息網站時，網站中發表的一些具有專業技術的文章可能會有很多詞匯不容易理解，這就需要對這些詞匯進行解釋，而為了更直觀地了解詞匯的含義，可以在文字上方添加標記說明。本實例將介紹如何在文字的上方加入標注說明，運行效果如圖3.20所示。

圖3.20 在文字上方添加標記說明

關鍵技術

實現在文字上方添加標注說明，主要是在頁面中使用<rt>和<ruby>標簽，<rt>標簽包含在<ruby>標簽內，然后將文字寫在<rt>標簽內，此時<rt>標簽內的文字會顯示在正常文字的上方，使用方法如下：

        <ruby>
              正常顯示的文字
        <rt>文字上方的說明標記<rt>
        <ruby>

設計過程

新建index.htm頁面，在該頁面的<body>標簽中添加文字的標記說明標簽，關鍵代碼如下：

        <ruby>
              Silence is gold.
              <rt><font>沉默是金</font></rt><br>
        </ruby>
        <ruby>
              study sth. in order to apply it.
              <rt><font>學以致用</font></rt><br>
        </ruby>
        <ruby>
              a fall into the pit, a gain in your wit.
              <rt><font>吃一塹，長一智</font></rt><br>
        </ruby>
        <ruby>
              Practies makes perfect.
              <rt><font>熟能生巧</font></rt>
        </ruby>

秘笈心法

<rt>和<ruby>標簽在實際應用中并不常見，所以了解一下它們的用處即可。

實例073 改變首行文字的樣式

光盤位置：光盤\MR\03\073

初級

實用指數：

實例說明

在瀏覽網站閱讀一些文章時，通常會見到在首行文字上有一些特殊的樣式。本實例將通過CSS樣式來改變首行文字的樣式，運行效果如圖3.21所示。

圖3.21 改變首行文字的樣式

關鍵技術

本實例通過在CSS樣式中設置段落<p>標簽首行對象first-line的屬性來改變首行文字的樣式。first-line表示段落的首行，其CSS樣式的語法格式如下：

        p:first-line{ font-size:12px; background :pink; color:#FFFFFF; ...};

設計過程

（1）新建index.htm頁面，在<style>標簽中編寫<p>標簽的CSS樣式，關鍵代碼如下：

        <style>
        p{
              line-height: 1.6;
              font-size:14px;
              font-family: 華文細黑；
        }
        p :FIRST-LINE {
              color:#FFFFFF;
              background:#FF6600;
              font-size:16px;
              font-family: 華文行楷；
        }
        </style>

（2）在頁面中添加段落<p>標簽，并添加一段文字內容，關鍵代碼如下：

        <body>
        <table width="580"align="center">
              <tr>
                  <td>
                      <p>
                            此處添加文字內容
                      </p>
                  </td>
              </tr>
        </table>
        </body>

秘笈心法

在CSS樣式中，除了first-line屬性，段落標簽<p>還包括first-letter屬性，表示段落的首個文字的屬性。

實例074 使文字具有下劃線效果

光盤位置：光盤\MR\03\074

初級

實用指數：

實例說明

在瀏覽網站信息時，為了更突出顯示一些重要信息，經常會在這些重要信息的文字處加上下劃線。本實例將通過CSS樣式來設置文字的下劃線效果，實例運行效果如圖3.22所示。

圖3.22 文字帶下劃線的樣式

關鍵技術

本實例主要通過設置CSS樣式的text-decoration屬性來實現，該屬性包含5個可選值，即underline（文字加下劃線）、overline（文字加上劃線）、line-through（文字加刪除線）、blink（閃爍文字，只有Netscape瀏覽器支持）和none（默認值）。

設計過程

（1）新建index.htm頁面，在<style>標簽中編寫下劃線文字的CSS樣式，關鍵代碼如下：

        <style>
        font{
              font-size:18px;
              text-decoration:underline;
              color:gray;
              font-family: 華文隸書；
        }
        p{
              line-height: 1.6;
              font-size:14px;
              font-family: 華文細黑；
        }
        </style>

（2）在頁面中添加<font>標簽，在該標簽內輸入測試的文字內容，關鍵代碼如下：

        <font>
              由此可見，應用程序的功能越復雜，客戶端程序也就越龐大
        </font>

秘笈心法

text-decoration屬性的underline（文字加下劃線）屬性值，經常應用在一些網站的文章中的某一段重要文字或某句話上，所以有必要記住這個屬性的用法。

實例075 指定圖標的列表項

光盤位置：光盤\MR\03\075

初級

實用指數：

實例說明

在默認情況下，列表標記只能是符號，為了使頁面更加美觀，可以使用CSS樣式將列表標記設置成圖標，運行效果如圖3.23所示。

圖3.23 帶有圖標的列表項

關鍵技術

在網頁中的列表項以<ul>標簽表示，所以可以在CSS樣式中通過設置<ul>的屬性來實現列表的樣式。本實例通過在CSS中設置列表的list-style-image屬性來改變列表的標記為圖標，語法格式如下：

        ul { list-style-image: url(ico.gif); ...}

其中url中的內容是圖標文件的路徑。

設計過程

（1）新建index.htm頁面，在<style>標簽中編寫列表的CSS樣式，關鍵代碼如下：

        <style>
        body{
            font-size:12px;
        }
        ul {
            list-style-image:url(star.gif);
            color:gray;
            font-family: 華文細黑；
        }
        </style>

（2）在頁面中添加列表標簽<ul>，關鍵代碼如下：

        <ul>
        <li>request：請求對象</li>
        <li>response：響應對象</li>
        <li>session：會話對象</li>
        <li>application：應用程序對象</li>
        <li>out：輸出對象</li>
        <li>...</li>
        </ul>

秘笈心法

根據本實例，讀者可以實現在電子商城中的商品類別列表中加入圖標。

官术网_书友最值得收藏!

Java Web開發實例大全（基礎卷） (軟件工程師開發大系)

3.4 文字及列表樣式

實例071 應用刪除線樣式標記商品特價

實例072 在文字上方標注說明標記

實例073 改變首行文字的樣式

實例074 使文字具有下劃線效果

實例075 指定圖標的列表項