精通CSS.DIV網頁樣式與佈局（六）——頁面和瀏覽器元素
阿新 • • 發佈：2019-01-26
在頁面和瀏覽器中，除了文字、圖片、表格、表單等，還有很多各種各樣的元素，我們這回對這些元素進行一一的介紹；這次我們將介紹到豐富的超連結特效、滑鼠特效、頁面滾動條。
豐富的超連結特效中，我們首先來介紹動態超連結，我們看一下效果圖：
程式碼如下：
<html> <head> <title>動態超連結</title> <style> <!-- body{ background:url(bg9.gif); /* 頁面背景圖片 */ margin:0px; padding:0px; cursor:pointer; } .chara1{ font-size:12px; background-color:#90bcff; /* 導航條的背景顏色 */ } .chara1 td{ text-align:center; } a:link{ /* 超連結正常狀態下的樣式 */ color:#005799; /* 深藍 */ text-decoration:none; /* 無下劃線 */ } a:visited{ /* 訪問過的超連結 */ color:#000000; /* 黑色 */ text-decoration:none; /* 無下劃線 */ } a:hover{ /* 滑鼠經過時的超連結 */ color:#FFFF00; /* 黃色 */ text-decoration:underline; /* 下劃線 */ } --> </style> </head> <body> <table align="center" cellpadding="1" cellspacing="0"> <tr><td><img src="banner3.jpg" border="0"></td></tr> </table> <table width="600px" cellpadding="2" cellspacing="2" class="chara1" align="center"> <tr> <td><a href="#">首頁</a></td> <td><a href="#">心情日記</a></td> <td><a href="#">Free</a></td> <td><a href="#">一起走到</a></td> <td><a href="#">從明天起</a></td> <td><a href="#">紙飛機</a></td> <td><a href="#">下一站</a></td> </tr> </table> </body> </html>
程式碼中，首先將一個table標記將頁面中的banner分離開來，其次將一個table標記將一個橫排的一個選單，實現一個很漂亮的瀏覽效果。在這裡我們值得一下的是：a:link、a:visited、a:hover來分別設定動態了超連結的效果。
我們接下來看看按鈕式超連結：我們先來看看這個效果：
這幾個超連結長成了按鈕，當滑鼠移上去的時候，分別進行了變化，那麼他在CSS中又是怎麼實現的呢：
<html> <head> <title>按鈕超連結</title> <style> <!-- a{ /* 統一設定所有樣式 */ font-family: Arial; font-size: .8em; text-align:center; margin:3px; } a:link, a:visited{ /* 超連結正常狀態、被訪問過的樣式 */ color: #A62020; padding:4px 10px 4px 10px; background-color: #ecd8db; text-decoration: none; border-top: 1px solid #EEEEEE; /* 邊框實現陰影效果 */ border-left: 1px solid #EEEEEE; border-bottom: 1px solid #717171; border-right: 1px solid #717171; } a:hover{ /* 滑鼠經過時的超連結 */ color:#821818; /* 改變文字顏色 */ padding:5px 8px 3px 12px; /* 改變文字位置 */ background-color:#e2c4c9; /* 改變背景色 */ border-top: 1px solid #717171; /* 邊框變換，實現“按下去”的效果 */ border-left: 1px solid #717171; border-bottom: 1px solid #EEEEEE; border-right: 1px solid #EEEEEE; } --> </style> </head> <body> <a href="#">首頁</a> <a href="#">心情日記</a> <a href="#">學習心得</a> <a href="#">工作筆記</a> <a href="#">生活瑣碎</a> <a href="#">其他</a> </body> </html>
首先一個a標記，他是對整個的按鈕進行了統一的設定；a:link與a:visited採用了一樣的設定，這裡邊的border-top與border-left用了同一種顏色，border-bottom與border-right使用了同一種顏色，這就實現了一種陰影的效果；而在hover中巧妙的把這兩種顏色替換，給人一種感覺就是巧妙的按了下去一樣。
我們繼續看浮雕式超連結：我們看一下效果：
浮雕按鈕好像是浮出紙面一樣，當滑鼠放上去的時候，他的變化比剛才的按鈕來的更加絢麗，這又是怎麼實現的：
<html> <head> <title>浮雕超連結</title> <style> <!-- body{ padding:0px; margin:0px; background-color:#f5eee1; } table.banner{ background:url(banner1_bg.jpg) repeat-x; width:100%; } table.links{ background:url(button1_bg.jpg) repeat-x; font-size:12px; width:100% } a{ width:80px; height:32px; padding-top:10px; text-decoration:none; text-align:center; background:url(button1.jpg) no-repeat; /* 超連結背景圖片 */ } a:link{color:#654300;} a:visited{color:#654300;} a:hover{ color:#FFFFFF; text-decoration:none; background:url(button2.jpg) no-repeat; /* 變換背景圖片 */ } --> </style> </head> <body> <table cellpadding="0" cellspacing="0" class="banner"> <tr><td><img src="banner1_left.jpg" border="0"></td></tr> </table> <table cellpadding="0" cellspacing="0" class="links"> <tr><td><a href="#">首頁導讀</a><a href="#">線上使用者</a><a href="#">查詢網友</a><a href="#">線上好友</a><a href="#">好友名單</a><a href="#">檢視訊息</a><a href="#">傳送訊息</a></td></tr> </table> </body> </html>
正文部分依然很簡單，一個table、一個banner，然後是無數個a標記並排，表示的是超連結，重點的是，將這一橫的table標記設定成了一幅背景圖片，table.banner將一個小圖片進行了重複。
我們看看CSS控制滑鼠箭頭：我們看看這個效果：
我們看一下程式碼：
<html>
<head>
<title>滑鼠變幻超連結</title>
<style>
<!--
body{
padding:0px;
margin:0px;
background-color:#efe5e2;
}
table.banner{
background:url(banner2_bg.jpg) repeat-x;
width:100%;
}
table.links{
background:url(button3_bg.jpg) repeat-x;
font-size:12px;
width:100%
}
a{
width:80px; height:32px;
padding-top:10px;
text-decoration:none;
text-align:center;
background:url(button3.jpg) no-repeat; /* 超連結背景圖片 */
}
a:link, a visited{color:#2d2d26;}
a:hover{
color:#FFFFFF;
text-decoration:none;
background:url(button4.jpg) no-repeat; /* 變換背景圖片 */
}
a.help:hover{ /* “幫助”按鈕的樣式 */
cursor:help; /* 變幻滑鼠形狀 */
}
-->
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" class="banner">
<tr><td><img src="banner2_left.jpg" border="0"></td></tr>
</table>
<table cellpadding="0" cellspacing="0" class="links">
<tr><td><a href="#">首頁導讀</a><a href="#">推薦版面</a><a href="#">推薦文章</a><a href="#">收藏夾</a><a href="#">我的信箱</a><a href="#">休閒娛樂</a><a href="#" class="help">幫助</a></td></tr>
</table>
</body>
</html>我們對幫助這個按鈕單獨設定了一個class類，cursor：help。當然他的值有很多很多，不但有help。大家可以自己動手試一下。
頁面滾動條：我們看一下效果，這個滾動條不再是IE所預設的效果，而是一個非常絢麗的藍色；我們將頁面縮小，同樣看到右邊的滾動條也在變幻。我們看一下程式碼：
<html>
<head>
<title>頁面滾動條</title>
<style>
<!--
body{ /* 頁面滾動條 */
background-color:#efe5e2;
scrollbar-3dlight-color: #B0C4DE;
scrollbar-arrow-color: #34547E;
scrollbar-base-color: #FF0000; /* 基調顏色 */
scrollbar-darkshadow-color: #1D4272;
scrollbar-face-color: #CFDFF4;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #5380BA;
}
.largetext { /* 文字框滾動條 */
scrollbar-3dlight-color: #B0C4DE;
scrollbar-arrow-color: #FFFFFF;
scrollbar-base-color: #8BA9CF;
scrollbar-darkshadow-color: #436DA3;
scrollbar-face-color: #34547E;
scrollbar-highlight-color: #E6ECF4;
scrollbar-shadow-color: #000000;
}
-->
</style>
</head>
<body>
<textarea rows="6" cols="50" class="largetext">
.largetext {
scrollbar-3dlight-color: #B0C4DE;
scrollbar-arrow-color: #FFFFFF;
scrollbar-base-color: #8BA9CF;
scrollbar-darkshadow-color: #436DA3;
scrollbar-face-color: #34547E;
scrollbar-highlight-color: #E6ECF4;
scrollbar-shadow-color: #000000;
}
</textarea>
<p>
CSS（Cascading Style Sheet），中文譯為層疊樣式表，是用於控制網頁樣式並允許將樣式資訊與網頁內容分離的一種標記性語言。CSS是1996年由W3C稽核通過，並且推薦使用的。簡單的說CSS的引入就是為了使得HTML能夠更好的適
</p>
</body>
</html>程式碼十分的簡單:scrollbar有很多很多屬性，大家可以自己動手來試試。
效果如下：
接下來我們繼續來完善我們的部落格，敬請關注。