皮加一个部首是什么字

書名： Java Web開發(fā)實例大全（基礎(chǔ)卷） (軟件工程師開發(fā)大系)
作者名：軟件開發(fā)技術(shù)聯(lián)盟
本章字?jǐn)?shù)： 3946字
更新時間： 2021-03-26 13:01:20

第3章 HTML/CSS技術(shù)

3.1 頁面效果

在網(wǎng)站開發(fā)時，為了美化網(wǎng)站的外觀，常常需要使用CSS樣式來改變網(wǎng)站的整體風(fēng)格，如網(wǎng)站的字體樣式、表格樣式、超鏈接的樣式、整體顏色搭配等。下面將通過幾個實例介紹在網(wǎng)站中常用的頁面效果。

實例052 統(tǒng)一站內(nèi)網(wǎng)頁風(fēng)格

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

初級

實用指數(shù)：

實例說明

在瀏覽網(wǎng)站時，會發(fā)現(xiàn)網(wǎng)站中所有網(wǎng)頁的風(fēng)格都相同，如頁面顏色、頁面字體樣式、頁面的背景等，這樣的網(wǎng)站給人的感覺會很緊湊。如果把網(wǎng)站中的每個頁面都設(shè)計成不同風(fēng)格，并且制作成花花綠綠的，這樣會給人造成視覺疲勞，而且整個網(wǎng)站顯得很“散”。本實例將介紹如何應(yīng)用CSS樣式來統(tǒng)一網(wǎng)站的風(fēng)格，運行結(jié)果如圖3.1所示。

圖3.1 網(wǎng)站的用戶注冊頁

關(guān)鍵技術(shù)

本實例主要應(yīng)用CSS樣式的字體屬性、顏色和背景屬性以及邊框?qū)傩詠韺崿F(xiàn)。下面分別介紹這幾種屬性的用法。

1．字體屬性

字體屬性包括字體的顏色、字體大小、字體的風(fēng)格等，常用的字體屬性及說明如表3.1所示。

表3.1 字體屬性及說明

2．顏色和背景屬性

CSS中的顏色屬性用于設(shè)置頁面元素的顏色，背景屬性用于設(shè)置背景顏色或背景圖像，具體屬性及說明如表3.2所示。

表3.2 顏色和背景屬性及說明

3．邊框?qū)傩?/p>

邊框?qū)傩杂糜谠O(shè)置元素的邊框?qū)挾取邮胶皖伾唧w屬性及說明如表3.3所示。

表3.3 邊框?qū)傩约罢f明

邊框樣式的屬性及說明如表3.4所示。

表3.4 邊框樣式的屬性及說明

設(shè)計過程

（1）定義CSS樣式表文件，將其命名為mycss.css，在該文件中使用body設(shè)置頁面的樣式，使用td設(shè)置所有單元格內(nèi)的字體樣式，使用input設(shè)置所有文本框的樣式。其中．td1是設(shè)置具體某個單元格內(nèi)的字體樣式，.botton1是設(shè)置按鈕的顯示樣式，關(guān)鍵代碼如下：

        body{
        margin:2em;
            background-color:#CCCCFF;
        }
        td {
        font-family: "Times New Roman", Times, serif;
        font-size:14px;
              font-weight:bold;
        }
        input {
              font-size:9pt;
              color:#003399;
              font-family: 宋體；
              border: '1px' 'dashed' '#999999';
              background:#EEEEEE;
        }
        .td1{
              font-size:12pt;
              font-family: 黑體；
        }
        .botton1{
              background:#FFFFFF;
              font-weight:bold;
              width:50px;
        }

（2）新建index.html網(wǎng)頁，在頁面中引用外部樣式表文件mycss.css，粗體代碼部分為具體引入的CSS文件，具體代碼如下：

        <head>
          <title>統(tǒng)一站內(nèi)風(fēng)格</title>
            <link rel="stylesheet" type="text/css" href="mycss.css">
        </head>

（3）在頁面中引用相應(yīng)的CSS樣式，關(guān)鍵代碼如下：

        <body>
          <form action="">
              <table align="center">
                  <tr>
                      <td>用戶名：</td><td><input type="text"name="name"/></td>
                  </tr>
                  <tr>
                      <td>密碼：</td><td><input type="password"name="pwd"/></td>
                  </tr>
                  <tr>
                      <td>確認(rèn)密碼：</td><td><input type="password"name="pwd1"/></td>
                  </tr>
                  <tr>
                      <td >性別：</td>
                      <td>
                          <input type="radio"name="sex"value="m"/>男
                          <input type="radio"name="sex"value="f"/>女
                      </td>
                  </tr>
                  <tr>
                      <td>年齡：</td><td><input type="text"name="age"/></td>
                  </tr>
                  <tr>
                      <td><input class="botton1"type="submit"value="注冊"/></td>
                      <td><input class="botton1"type="button"value="重置"></td>
                  </tr>
            </table>
        </form>
        </body>

秘笈心法

一個網(wǎng)站可能有不同的風(fēng)格樣式，而且網(wǎng)站中不同的元素可能風(fēng)格也不同。為了實現(xiàn)不同風(fēng)格樣式的切換，可以定義多個不同風(fēng)格樣式的CSS樣式文件，在網(wǎng)站需要使用時，直接通過<link>標(biāo)簽導(dǎo)入即可。

實例053 設(shè)置超鏈接文字的樣式

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

初級

實用指數(shù)：

實例說明

默認(rèn)情況下，使用<a>標(biāo)簽定義的超鏈接，字體顏色為藍(lán)色，可以通過CSS樣式來改變鏈接字體的顏色以及樣式。運行本實例，當(dāng)鼠標(biāo)經(jīng)過超鏈接文字時，將文字顏色改變并將字體改為粗體；當(dāng)鼠標(biāo)移出時，文字改為初始狀態(tài)，運行結(jié)果如圖3.2所示。

圖3.2 超鏈接的顯示樣式

關(guān)鍵技術(shù)

在CSS樣式中，對超鏈接的樣式有以下幾種定義。

（1）設(shè)置鏈接未被訪問時的樣式，具體語法如下：

        a:link{font-size:10px; ... }

（2）設(shè)置鏈接在鼠標(biāo)經(jīng)過時的樣式，具體語法如下：

        a:hover{font-size:10px; text-decoration:underline; color:#ff0000}

（3）設(shè)置鏈接激活時的樣式，具體語法如下：

        a:active{font-size:10px; ...}

（4）設(shè)置鏈接已被訪問過的樣式，具體語法如下：

        a:visited{font-size:10px; color:#00ffff; ...}

設(shè)計過程

（1）新建index.html頁，在該頁中首先定義超鏈接的CSS樣式，關(guān)鍵代碼如下：

        <head>
            <title>超鏈接的樣式</title>
              <meta http-equiv="pragma"content="no-cache">
              <meta http-equiv="cache-control"content="no-cache">
              <meta http-equiv="expires"content="0">
              <style type="text/css">
                  td{
                      font-size:9pt;
                      color:#007766;
                  }
                  a:link{
                      font-size:9pt;
                      color:#cccccc;
                      font-weight:bold;
                      text-decoration:underline;
                  }
                  a:hover{
                      font-size:9pt;
                      color:#ff0000;
                      font-weight:bold;
                      text-decoration:underline;
                  }
                  a:active{
                      font-size:9pt;
                      color:#6699ff;
                      font-weight:bold;
                      text-decoration:underline;
                  }
              </style>
        </head>

（2）在該頁中使用<a>標(biāo)簽添加超鏈接，關(guān)鍵代碼如下：

        <table align="center">
              <tr>
                  <td>明日科技→<a href="#">明日科技</a></td>
              </tr>
        </table>

秘笈心法

超鏈接是每個網(wǎng)站中必有的功能，換句話說它是網(wǎng)站中最常用的功能。所以讀者有必要掌握在CSS樣式中超鏈接的幾個屬性（a:link、a:hover、a:active、a:visited）的應(yīng)用。

實例054 網(wǎng)頁換膚

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

初級

實用指數(shù)：

實例說明

網(wǎng)頁換膚的功能在網(wǎng)站上應(yīng)用得非常廣泛，用戶可以根據(jù)自己的愛好，選擇不同的頁面風(fēng)格。運行本實例，如圖3.3所示，當(dāng)單擊網(wǎng)頁中的“橘色經(jīng)典”鏈接時，頁面風(fēng)格將變?yōu)殚偕黝}；當(dāng)單擊“灰色暢想”鏈接時，頁面風(fēng)格將變?yōu)榛疑黝}。

圖3.3 可以更換網(wǎng)頁風(fēng)格的頁面

關(guān)鍵技術(shù)

實現(xiàn)換膚功能，主要是根據(jù)單擊超鏈接時，調(diào)用JavaScript方法來動態(tài)改變頁面的<link>標(biāo)簽的href屬性值實現(xiàn)的。首先需要事先定義好兩個不同風(fēng)格的CSS樣式文件，然后單擊某個風(fēng)格的鏈接動態(tài)實現(xiàn)改變。

設(shè)計過程

（1）編寫不同風(fēng)格的CSS樣式文件，詳細(xì)代碼請參見本書附帶的光盤。

（2）新建index.htm網(wǎng)頁，在頁面中引用其中一個CSS樣式文件作為網(wǎng)頁默認(rèn)的樣式，關(guān)鍵代碼如下：

<link id="myCss" href="orange.css" rel="stylesheet">

（3）在<script>標(biāo)簽中編寫保存cookie信息的方法，用于將CSS樣式文件的路徑信息保存到客戶端Cookie文件中，具體代碼如下：

        function writeCookie(csspath){
              var today = new Date();
              var expires = new Date();
              expires.setTime(today.getTime()+1000*60*60*24*30);     //有效期為30天
              var str="cssPath="+csspath+"; expires=" + expires.toGMTString()+"; " ;
              document.cookie=str;
        }

（4）編寫讀取cookie信息的方法，關(guān)鍵代碼如下：

        function readCookie(cookieName){
            var search = cookieName + "=";
            if (document.cookie.length > 0) {
                  offset = document.cookie.indexOf(search);
                  if (offset ! = -1) {
                      offset += search.length;
                      end = document.cookie.indexOf("; ", offset);
                      if (end == -1){
                            end = document.cookie.length;
                            return unescape(document.cookie.substring(offset, end));
                      }
                  }
            }
        }

（5）編寫超鏈接的onClick事件調(diào)用的方法，關(guān)鍵代碼如下：

        function change(type){
            if(type=="orange"){
                  document.getElementById("myCss").href="orange.css";
                  writeCookie("orange.css");
            }
            if(type=="gray"){
                  document.getElementById("myCss").href="gray.css";
                  writeCookie("gray.css");
            }
        }

（6）在頁面中超鏈接的關(guān)鍵代碼如下：

        <a href="#" onClick="change('orange')">[橘色經(jīng)典]</a>
        <a href="#" onClick="change('gray')">[灰色暢想]</a>

秘笈心法

在實現(xiàn)網(wǎng)頁換膚時，需要將每次執(zhí)行所調(diào)用的CSS樣式文件的路徑信息保存到客戶端的cookie中。為什么呢？因為當(dāng)用戶單擊鏈接換膚后，網(wǎng)頁確實是換了一種風(fēng)格，但是隨著瀏覽器的關(guān)閉，網(wǎng)頁改變的風(fēng)格將會消失，因為瀏覽器并不會自動保存用戶所執(zhí)行的這次改變操作，當(dāng)再次打開瀏覽器訪問此頁時，網(wǎng)頁風(fēng)格還是沒改變之前的，所以需要使用JavaScript將每次的操作都保存在cookie中。

實例055 滾動文字

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

初級

實用指數(shù)：

實例說明

在許多網(wǎng)站中，都會包含滾動文字的特效，這些特效也可以稱為走馬燈特效，如一些網(wǎng)站中的新聞公告。本實例將介紹如何在網(wǎng)頁中實現(xiàn)滾動文字。運行本實例，如圖3.4所示，將從網(wǎng)頁的下方向上逐漸出現(xiàn)滾動的文字信息。

圖3.4 在網(wǎng)頁中添加滾動文字

關(guān)鍵技術(shù)

實現(xiàn)滾動文字的特效，主要是在頁面中應(yīng)用<marquee>標(biāo)簽。該標(biāo)簽專門用于實現(xiàn)文字或圖片的滾動效果，其常用屬性及說明如表3.5所示。

表3.5 <marquee>標(biāo)簽的屬性及說明

設(shè)計過程

創(chuàng)建index.htm頁面，在該頁中的適當(dāng)位置將要滾動的內(nèi)容添加到<marquee>標(biāo)簽中，然后通過設(shè)置<marquee>標(biāo)簽的相關(guān)屬性來自定義滾動的顯示效果，關(guān)鍵代碼如下：

        <marquee direction="up" onMouseOver="this.scro lAmount='1'"onMouseOut="this.scro lAmount='2'" onMouseDown="this.scro lAmount='4'; this.direction=
        'down'"onMouseUp="this.scrollAmount='1'; this.direction='up'"scrollAmount="2"height="291">
          <table cellspacing="2"cellpadding="0"border="0"width="100%"align="center">
        <tr>
              <td height="30" style="color:yellow; font-size:10pt; font-weight:bold; ">
              <a href="#">美國國務(wù)卿希拉里·克林頓昨日訪華，洽談中美經(jīng)濟(jì)合作。</a>
              </td>
        </tr>
        <tr>
              <td height="20"align="right">公布時間：2010-05-28 </td>
        </tr>
            <tr>
              <td height="30" style="color:yellow; font-size:10pt; font-weight:bold; ">
                  <a href="#">希臘債務(wù)危機愈演愈烈，將影響整個歐洲經(jīng)濟(jì)。</a>
              </td>
            </tr>
            <tr>
              <td height="20"align="right"> 公布時間：2010-05-58</td>
            </tr>
          </table>
        </marquee>

秘笈心法

通過<marquee>標(biāo)簽的屬性可以實現(xiàn)不同的滾動效果，其中最常用的屬性是滾動的方向（direction）、滾動的方式（behavior）以及滾動的速度（scrollamount）。

實例056 制作漸變背景

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

初級

實用指數(shù)：

實例說明

在瀏覽網(wǎng)站時，常常會發(fā)現(xiàn)有些網(wǎng)站頁面背景有漸變的效果，這種效果可以使頁面更加美觀。本實例將介紹如何實現(xiàn)網(wǎng)頁的漸變背景，實例運行效果如圖3.5所示，頁面背景是漸變的效果。

圖3.5 具有漸變背景的網(wǎng)頁

關(guān)鍵技術(shù)

實現(xiàn)網(wǎng)頁背景的漸變，主要是通過在CSS樣式中定義Alpha濾鏡來實現(xiàn)的。在Alpha濾鏡中，需要設(shè)置漸變的屬性值，其主要的屬性及說明如表3.6所示。

表3.6 Alpha濾鏡的屬性及說明

設(shè)計過程

新建index.htm網(wǎng)頁，在該頁中的<style>標(biāo)簽中加入漸變效果的CSS樣式，具體代碼如下：

        <style type="text/css">
        body{
              background:green;
              filter: Alpha(Opacity=20, Finishopacity=80, Style=3, Startx=100, Starty=100, Finishx=0, Finishy=0);
        }
        </style>

秘笈心法

為了提高開發(fā)效率，可以將Alpha濾鏡的樣式代碼寫到．css樣式文件中，在不同網(wǎng)頁中應(yīng)用此樣式時直接通過<link>標(biāo)簽引用CSS文件即可。

實例057 CSS控制絕對定位

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

初級

實用指數(shù)：

實例說明

在網(wǎng)頁布局的大部分情況下需要使用表格嵌套來實現(xiàn)定位，這種方法雖然可以在一定程度上解決問題，但是它卻有個致命的缺點，就是如果表格中的某個元素的位置發(fā)生改變就有可能打亂整個頁面的布局。本實例將介紹如何應(yīng)用CSS樣式控制頁面的絕對定位，其實現(xiàn)的效果示意圖如圖3.6所示。

圖3.6 CSS的絕對定位顯示效果

關(guān)鍵技術(shù)

在CSS中提供了更加靈活的定位方法，常用的定位屬性包括position、left、top、width、height等，其中position屬性就是實現(xiàn)絕對定位的關(guān)鍵屬性，它采用了3種定位方式，包括絕對定位（absolute）、相對定位（relative）和靜態(tài)定位（static）。

設(shè)計過程

新建index.htm網(wǎng)頁，利用CSS實現(xiàn)頁面中兩個圖片的絕對定位，將兩個圖片分別放置到div中并為div定義兩個不同的id，第一張圖片定義的id值為top_Div，第二張圖片定義的id值為bottom_Div，其中CSS屬性設(shè)置的關(guān)鍵代碼如下：

        #top_Div {
              position: absolute;             /*絕對定位*/
              left:20px;                      /*距離左側(cè)頁面20px*/
              top:10px;                       /*距離頂部頁面10px*/
        }
        #bottom_Div {
              position: absolute;             /*絕對定位*/
              left:130px;                     /*距離左側(cè)頁面130px*/
              top:10px;                       /*距離頂部頁面10px*/
        }

秘笈心法

絕對定位使元素的位置與文檔流無關(guān)，因此不占據(jù)空間，這一點正好與相對定位不同，相對定位實際上被看作普通流定位模型的一部分，因為元素的位置是相對于它在普通流中的位置。

實例058 CSS控制垂直居中

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

初級

實用指數(shù)：

實例說明

HTML頁面居中的需求很常見，在實際的項目應(yīng)用中也會經(jīng)常碰到類似的問題。但是利用CSS+DIV的方法來實現(xiàn)更為簡單，只要5～6行代碼即可實現(xiàn)。本實例將介紹如何利用CSS來設(shè)置頁面的垂直居中效果，實現(xiàn)效果如圖3.7所示。

圖3.7 CSS控制的文字垂直居中顯示效果

關(guān)鍵技術(shù)

實現(xiàn)垂直居中關(guān)鍵的幾個屬性是text-align、line-height和vertical-align。text-align屬性表示文字的對齊樣式，line-height屬性表示垂直居中的高度，vertical-align屬性表示垂直居中。

設(shè)計過程

新建index.htm網(wǎng)頁，首先將需要居中顯示的內(nèi)容用div包裹起來，并為div定義一個id值content，然后在CSS文件中定義該div的CSS屬性，關(guān)鍵代碼如下：

        #content {
              text-align: center;              /*文字水平居中*/
              margin-right:auto;
              margin-left:auto;
              vertical-align: middle;          /*文字垂直居中*/
              line-height:200px;               /*垂直居中的高度*/
              height:200px;                    /*div的高度*/
              width:400px;                     /*div的寬度*/
              background: #cef;                /*div的背景顏色*/}

秘笈心法

利用CSS實現(xiàn)垂直居中時，必須是line-height和vertical-align兩個屬性搭配使用，否則達(dá)不到預(yù)期的效果。

實例059 CSS實現(xiàn)的圖文混排

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

初級

實用指數(shù)：

實例說明

現(xiàn)在在大部分的網(wǎng)站中都可以看到圖文混排效果的頁面布局，那么這種效果又是如何實現(xiàn)的呢？本實例將介紹如何利用CSS實現(xiàn)圖文混排效果，實例運行效果如圖3.8所示，圖在左邊，文字在圖的右邊和下方。

圖3.8 設(shè)置圖文混排后的效果

關(guān)鍵技術(shù)

本實例的實現(xiàn)主要是利用CSS的float屬性，應(yīng)用該屬性可以完成圖文混排，該屬性包含4個可選值，分別為left、right、none和inherit。

設(shè)計過程

（1）新建index.html頁，利用CSS實現(xiàn)圖文混排的頁面布局效果，CSS設(shè)置的關(guān)鍵代碼如下：

        .picture {
              float: left;                    /*在文本的左邊*/
              border:1px solid#000000;        /*圖片邊框的顏色*/
              margin-top:10px;                /*上方與其他元素保持10px*/
              margin-bottom:10px;             /*下方與其他元素保持10px*/
              margin-left:10px;               /*左側(cè)與其他元素保持10px*/
              margin-right:10px;              /*右側(cè)與其他元素保持10px*/
        }

（2）在圖片中調(diào)用這個CSS類，實現(xiàn)圖文混排的頁面效果，關(guān)鍵代碼如下：

        <img src="head.png" class="picture"/>

秘笈心法

利用CSS樣式中的float屬性即可實現(xiàn)圖文混排效果，如果再配合一些其他屬性的使用，就可以達(dá)到更加完美的效果。

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

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

第3章 HTML/CSS技術(shù)

3.1 頁面效果

實例052 統(tǒng)一站內(nèi)網(wǎng)頁風(fēng)格

實例053 設(shè)置超鏈接文字的樣式

實例054 網(wǎng)頁換膚

實例055 滾動文字

實例056 制作漸變背景

實例057 CSS控制絕對定位

實例058 CSS控制垂直居中

實例059 CSS實現(xiàn)的圖文混排