- Java Web開發實例大全（基礎卷） (軟件工程師開發大系)
- 軟件開發技術聯盟
- 6字
- 2021-03-26 13:01:19
第3章 HTML/CSS技術
3.1 頁面效果
在網站開發時，為了美化網站的外觀，常常需要使用CSS樣式來改變網站的整體風格，如網站的字體樣式、表格樣式、超鏈接的樣式、整體顏色搭配等。下面將通過幾個實例介紹在網站中常用的頁面效果。
實例052 統一站內網頁風格
光盤位置：光盤\MR\03\052
初級
實用指數：
實例說明
在瀏覽網站時，會發現網站中所有網頁的風格都相同，如頁面顏色、頁面字體樣式、頁面的背景等，這樣的網站給人的感覺會很緊湊。如果把網站中的每個頁面都設計成不同風格，并且制作成花花綠綠的，這樣會給人造成視覺疲勞，而且整個網站顯得很“散”。本實例將介紹如何應用CSS樣式來統一網站的風格，運行結果如圖3.1所示。
圖3.1 網站的用戶注冊頁
關鍵技術
本實例主要應用CSS樣式的字體屬性、顏色和背景屬性以及邊框屬性來實現。下面分別介紹這幾種屬性的用法。
1．字體屬性
字體屬性包括字體的顏色、字體大小、字體的風格等，常用的字體屬性及說明如表3.1所示。
表3.1 字體屬性及說明
2．顏色和背景屬性
CSS中的顏色屬性用于設置頁面元素的顏色，背景屬性用于設置背景顏色或背景圖像，具體屬性及說明如表3.2所示。
表3.2 顏色和背景屬性及說明
3．邊框屬性
邊框屬性用于設置元素的邊框寬度、樣式和顏色，具體屬性及說明如表3.3所示。
表3.3 邊框屬性及說明
邊框樣式的屬性及說明如表3.4所示。
表3.4 邊框樣式的屬性及說明
設計過程
（1）定義CSS樣式表文件，將其命名為mycss.css，在該文件中使用body設置頁面的樣式，使用td設置所有單元格內的字體樣式，使用input設置所有文本框的樣式。其中．td1是設置具體某個單元格內的字體樣式，.botton1是設置按鈕的顯示樣式，關鍵代碼如下：
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網頁，在頁面中引用外部樣式表文件mycss.css，粗體代碼部分為具體引入的CSS文件，具體代碼如下：
<head>
<title>統一站內風格</title>
<link rel="stylesheet" type="text/css" href="mycss.css">
</head>
（3）在頁面中引用相應的CSS樣式，關鍵代碼如下：
<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>確認密碼：</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>
秘笈心法
一個網站可能有不同的風格樣式，而且網站中不同的元素可能風格也不同。為了實現不同風格樣式的切換，可以定義多個不同風格樣式的CSS樣式文件，在網站需要使用時，直接通過<link>標簽導入即可。
實例053 設置超鏈接文字的樣式
光盤位置：光盤\MR\03\053
初級
實用指數：
實例說明
默認情況下，使用<a>標簽定義的超鏈接，字體顏色為藍色，可以通過CSS樣式來改變鏈接字體的顏色以及樣式。運行本實例，當鼠標經過超鏈接文字時，將文字顏色改變并將字體改為粗體；當鼠標移出時，文字改為初始狀態，運行結果如圖3.2所示。
圖3.2 超鏈接的顯示樣式
關鍵技術
在CSS樣式中，對超鏈接的樣式有以下幾種定義。
（1）設置鏈接未被訪問時的樣式，具體語法如下：
a:link{font-size:10px; ... }
（2）設置鏈接在鼠標經過時的樣式，具體語法如下：
a:hover{font-size:10px; text-decoration:underline; color:#ff0000}
（3）設置鏈接激活時的樣式，具體語法如下：
a:active{font-size:10px; ...}
（4）設置鏈接已被訪問過的樣式，具體語法如下：
a:visited{font-size:10px; color:#00ffff; ...}
設計過程
（1）新建index.html頁，在該頁中首先定義超鏈接的CSS樣式，關鍵代碼如下：
<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>標簽添加超鏈接，關鍵代碼如下：
<table align="center"> <tr> <td>明日科技→<a href="#">明日科技</a></td> </tr> </table>
秘笈心法
超鏈接是每個網站中必有的功能，換句話說它是網站中最常用的功能。所以讀者有必要掌握在CSS樣式中超鏈接的幾個屬性（a:link、a:hover、a:active、a:visited）的應用。
實例054 網頁換膚
光盤位置：光盤\MR\03\054
初級
實用指數：
實例說明
網頁換膚的功能在網站上應用得非常廣泛，用戶可以根據自己的愛好，選擇不同的頁面風格。運行本實例，如圖3.3所示，當單擊網頁中的“橘色經典”鏈接時，頁面風格將變為橘色主題；當單擊“灰色暢想”鏈接時，頁面風格將變為灰色主題。
圖3.3 可以更換網頁風格的頁面
關鍵技術
實現換膚功能，主要是根據單擊超鏈接時，調用JavaScript方法來動態改變頁面的<link>標簽的href屬性值實現的。首先需要事先定義好兩個不同風格的CSS樣式文件，然后單擊某個風格的鏈接動態實現改變。
設計過程
（1）編寫不同風格的CSS樣式文件，詳細代碼請參見本書附帶的光盤。
（2）新建index.htm網頁，在頁面中引用其中一個CSS樣式文件作為網頁默認的樣式，關鍵代碼如下：
<link id="myCss" href="orange.css" rel="stylesheet">
（3）在<script>標簽中編寫保存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信息的方法，關鍵代碼如下：
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事件調用的方法，關鍵代碼如下：
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）在頁面中超鏈接的關鍵代碼如下：
<a href="#" onClick="change('orange')">[橘色經典]</a> <a href="#" onClick="change('gray')">[灰色暢想]</a>
秘笈心法
在實現網頁換膚時，需要將每次執行所調用的CSS樣式文件的路徑信息保存到客戶端的cookie中。為什么呢？因為當用戶單擊鏈接換膚后，網頁確實是換了一種風格，但是隨著瀏覽器的關閉，網頁改變的風格將會消失，因為瀏覽器并不會自動保存用戶所執行的這次改變操作，當再次打開瀏覽器訪問此頁時，網頁風格還是沒改變之前的，所以需要使用JavaScript將每次的操作都保存在cookie中。
實例055 滾動文字
光盤位置：光盤\MR\03\055
初級
實用指數：
實例說明
在許多網站中，都會包含滾動文字的特效，這些特效也可以稱為走馬燈特效，如一些網站中的新聞公告。本實例將介紹如何在網頁中實現滾動文字。運行本實例，如圖3.4所示，將從網頁的下方向上逐漸出現滾動的文字信息。
圖3.4 在網頁中添加滾動文字
關鍵技術
實現滾動文字的特效，主要是在頁面中應用<marquee>標簽。該標簽專門用于實現文字或圖片的滾動效果，其常用屬性及說明如表3.5所示。
表3.5 <marquee>標簽的屬性及說明
設計過程
創建index.htm頁面，在該頁中的適當位置將要滾動的內容添加到<marquee>標簽中，然后通過設置<marquee>標簽的相關屬性來自定義滾動的顯示效果，關鍵代碼如下：
<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="#">美國國務卿希拉里·克林頓昨日訪華，洽談中美經濟合作。</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="#">希臘債務危機愈演愈烈，將影響整個歐洲經濟。</a> </td> </tr> <tr> <td height="20"align="right"> 公布時間：2010-05-58</td> </tr> </table> </marquee>
秘笈心法
通過<marquee>標簽的屬性可以實現不同的滾動效果，其中最常用的屬性是滾動的方向（direction）、滾動的方式（behavior）以及滾動的速度（scrollamount）。
實例056 制作漸變背景
光盤位置：光盤\MR\03\056
初級
實用指數：
實例說明
在瀏覽網站時，常常會發現有些網站頁面背景有漸變的效果，這種效果可以使頁面更加美觀。本實例將介紹如何實現網頁的漸變背景，實例運行效果如圖3.5所示，頁面背景是漸變的效果。
圖3.5 具有漸變背景的網頁
關鍵技術
實現網頁背景的漸變，主要是通過在CSS樣式中定義Alpha濾鏡來實現的。在Alpha濾鏡中，需要設置漸變的屬性值，其主要的屬性及說明如表3.6所示。
表3.6 Alpha濾鏡的屬性及說明
設計過程
新建index.htm網頁，在該頁中的<style>標簽中加入漸變效果的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>
秘笈心法
為了提高開發效率，可以將Alpha濾鏡的樣式代碼寫到．css樣式文件中，在不同網頁中應用此樣式時直接通過<link>標簽引用CSS文件即可。
實例057 CSS控制絕對定位
光盤位置：光盤\MR\03\057
初級
實用指數：
實例說明
在網頁布局的大部分情況下需要使用表格嵌套來實現定位，這種方法雖然可以在一定程度上解決問題，但是它卻有個致命的缺點，就是如果表格中的某個元素的位置發生改變就有可能打亂整個頁面的布局。本實例將介紹如何應用CSS樣式控制頁面的絕對定位，其實現的效果示意圖如圖3.6所示。
圖3.6 CSS的絕對定位顯示效果
關鍵技術
在CSS中提供了更加靈活的定位方法，常用的定位屬性包括position、left、top、width、height等，其中position屬性就是實現絕對定位的關鍵屬性，它采用了3種定位方式，包括絕對定位（absolute）、相對定位（relative）和靜態定位（static）。
設計過程
新建index.htm網頁，利用CSS實現頁面中兩個圖片的絕對定位，將兩個圖片分別放置到div中并為div定義兩個不同的id，第一張圖片定義的id值為top_Div，第二張圖片定義的id值為bottom_Div，其中CSS屬性設置的關鍵代碼如下：
#top_Div {
position: absolute; /*絕對定位*/
left:20px; /*距離左側頁面20px*/
top:10px; /*距離頂部頁面10px*/
}
#bottom_Div {
position: absolute; /*絕對定位*/
left:130px; /*距離左側頁面130px*/
top:10px; /*距離頂部頁面10px*/
}
秘笈心法
絕對定位使元素的位置與文檔流無關，因此不占據空間，這一點正好與相對定位不同，相對定位實際上被看作普通流定位模型的一部分，因為元素的位置是相對于它在普通流中的位置。
實例058 CSS控制垂直居中
光盤位置：光盤\MR\03\058
初級
實用指數：
實例說明
HTML頁面居中的需求很常見，在實際的項目應用中也會經常碰到類似的問題。但是利用CSS+DIV的方法來實現更為簡單，只要5～6行代碼即可實現。本實例將介紹如何利用CSS來設置頁面的垂直居中效果，實現效果如圖3.7所示。
圖3.7 CSS控制的文字垂直居中顯示效果
關鍵技術
實現垂直居中關鍵的幾個屬性是text-align、line-height和vertical-align。text-align屬性表示文字的對齊樣式，line-height屬性表示垂直居中的高度，vertical-align屬性表示垂直居中。
設計過程
新建index.htm網頁，首先將需要居中顯示的內容用div包裹起來，并為div定義一個id值content，然后在CSS文件中定義該div的CSS屬性，關鍵代碼如下：
#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實現垂直居中時，必須是line-height和vertical-align兩個屬性搭配使用，否則達不到預期的效果。
實例059 CSS實現的圖文混排
光盤位置：光盤\MR\03\059
初級
實用指數：
實例說明
現在在大部分的網站中都可以看到圖文混排效果的頁面布局，那么這種效果又是如何實現的呢？本實例將介紹如何利用CSS實現圖文混排效果，實例運行效果如圖3.8所示，圖在左邊，文字在圖的右邊和下方。
圖3.8 設置圖文混排后的效果
關鍵技術
本實例的實現主要是利用CSS的float屬性，應用該屬性可以完成圖文混排，該屬性包含4個可選值，分別為left、right、none和inherit。
設計過程
（1）新建index.html頁，利用CSS實現圖文混排的頁面布局效果，CSS設置的關鍵代碼如下：
.picture {
float: left; /*在文本的左邊*/
border:1px solid#000000; /*圖片邊框的顏色*/
margin-top:10px; /*上方與其他元素保持10px*/
margin-bottom:10px; /*下方與其他元素保持10px*/
margin-left:10px; /*左側與其他元素保持10px*/
margin-right:10px; /*右側與其他元素保持10px*/
}
（2）在圖片中調用這個CSS類，實現圖文混排的頁面效果，關鍵代碼如下：
<img src="head.png" class="picture"/>
秘笈心法
利用CSS樣式中的float屬性即可實現圖文混排效果，如果再配合一些其他屬性的使用，就可以達到更加完美的效果。
- Python 3.7網絡爬蟲快速入門
- Rust編程：入門、實戰與進階
- INSTANT Sencha Touch
- Mastering C# Concurrency
- Microsoft System Center Orchestrator 2012 R2 Essentials
- Python：Master the Art of Design Patterns
- 單片機應用與調試項目教程（C語言版）
- Python編程從0到1（視頻教學版）
- Odoo 10 Implementation Cookbook
- Mastering AWS Security
- Unity Character Animation with Mecanim
- QPanda量子計算編程
- 算法圖解
- Application Development with Parse using iOS SDK
- 多媒體技術及應用