7-1.html
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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能夠更好的適應頁面的美工設計。它以HTML爲基礎，提供了豐富的格式化功能，如字體、顏色、背景、整體排版等等，並且網頁設計者可以針對各種可視化瀏覽器設置不同的樣式風格，包括顯示器、打印機、打字機、投影儀、PDA等等。CSS的引入隨即引發了網頁設計的一個又一個新高潮，使用CSS設計的優秀頁面層出不窮。
</p>
</body>
</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能夠更好的適應頁面的美工設計。它以HTML爲基礎，提供了豐富的格式化功能，如字體、顏色、背景、整體排版等等，並且網頁設計者可以針對各種可視化瀏覽器設置不同的樣式風格，包括顯示器、打印機、打字機、投影儀、PDA等等。CSS的引入隨即引發了網頁設計的一個又一個新高潮，使用CSS設計的優秀頁面層出不窮。
</p>
</body>
</html>
來源：《精通CSS+DIV網頁樣式與佈局》