CSS+DIV-製做實用菜單
8-1.html
8-2.html
8-3.html
8-4.html
8-5.html
8-6.html
8-7.html
8-8.html
8-9.css
8-9_blog.html
8-9_home.html
8-9_music.html
8-9_news.html
8-9_nextstation.html
8-9_sports.html
<html>
<head>
<title>項目列表</title>
<style>
<!--
body{
background-color:#c1daff;
}
ul{
font-size:0.9em;
color:#00458c;
list-style-type:decimal; /* 項目編號 */
}
-->
</style>
</head>
<body>
<p>水上運動</p>
<ul>
<li>freestyle 自由泳</li>
<li>backstroke 仰泳</li>
<li>breaststroke 蛙泳</li>
<li>butterfly 蝶泳</li>
<li>individual medley 我的混合泳</li>
<li>freestyle relay 自由泳接力</li>
</ul>
</body>
</html>
<head>
<title>項目列表</title>
<style>
<!--
body{
background-color:#c1daff;
}
ul{
font-size:0.9em;
color:#00458c;
list-style-type:decimal; /* 項目編號 */
}
-->
</style>
</head>
<body>
<p>水上運動</p>
<ul>
<li>freestyle 自由泳</li>
<li>backstroke 仰泳</li>
<li>breaststroke 蛙泳</li>
<li>butterfly 蝶泳</li>
<li>individual medley 我的混合泳</li>
<li>freestyle relay 自由泳接力</li>
</ul>
</body>
</html>
<html>
<head>
<title>項目列表</title>
<style>
<!--
body{
background-color:#c1daff;
}
ul{
font-size:0.9em;
color:#00458c;
list-style-type:decimal; /* 項目編號 */
}
li.special{
list-style-type:circle;
}
-->
</style>
</head>
<body>
<p>水上運動</p>
<ul>
<li>freestyle 自由泳</li>
<li>backstroke 仰泳</li>
<li class="special">breaststroke 蛙泳</li>
<li>butterfly 蝶泳</li>
<li>individual medley 我的混合泳</li>
<li>freestyle relay 自由泳接力</li>
</ul>
</body>
</html>
<head>
<title>項目列表</title>
<style>
<!--
body{
background-color:#c1daff;
}
ul{
font-size:0.9em;
color:#00458c;
list-style-type:decimal; /* 項目編號 */
}
li.special{
list-style-type:circle;
}
-->
</style>
</head>
<body>
<p>水上運動</p>
<ul>
<li>freestyle 自由泳</li>
<li>backstroke 仰泳</li>
<li class="special">breaststroke 蛙泳</li>
<li>butterfly 蝶泳</li>
<li>individual medley 我的混合泳</li>
<li>freestyle relay 自由泳接力</li>
</ul>
</body>
</html>
<html>
<head>
<title>圖片符號</title>
<style>
<!--
body{
background-color:#c1daff;
}
ul{
font-family:Arial;
font-size:13px;
color:#00458c;
list-style-p_w_picpath:url(icon1.jpg); /* 圖片符號 */
}
-->
</style>
</head>
<body>
<p>自行車</p>
<ul>
<li>Road cycling 公路自行車賽</li>
<li>Track cycling 場地自行車賽</li>
<li>sprint 追逐賽</li>
<li>time trial 計時賽</li>
<li>points race 計分賽</li>
<li>pursuit 爭先賽</li>
<li>Mountain bike 山地自行車賽</li>
</ul>
</body>
</html>
<head>
<title>圖片符號</title>
<style>
<!--
body{
background-color:#c1daff;
}
ul{
font-family:Arial;
font-size:13px;
color:#00458c;
list-style-p_w_picpath:url(icon1.jpg); /* 圖片符號 */
}
-->
</style>
</head>
<body>
<p>自行車</p>
<ul>
<li>Road cycling 公路自行車賽</li>
<li>Track cycling 場地自行車賽</li>
<li>sprint 追逐賽</li>
<li>time trial 計時賽</li>
<li>points race 計分賽</li>
<li>pursuit 爭先賽</li>
<li>Mountain bike 山地自行車賽</li>
</ul>
</body>
</html>
<html>
<head>
<title>圖片符號</title>
<style>
<!--
body{
background-color:#c1daff;
}
ul{
font-family:Arial;
font-size:13px;
color:#00458c;
list-style-type:none; /* 不顯示項目符號 */
}
li{
background:url(icon1.jpg) no-repeat; /* 添加爲背景圖片 */
padding-left:25px; /* 設置圖標與文字的間隔 */
}
-->
</style>
</head>
<body>
<p>自行車</p>
<ul>
<li>Road cycling 公路自行車賽</li>
<li>Track cycling 場地自行車賽</li>
<li>sprint 追逐賽</li>
<li>time trial 計時賽</li>
<li>points race 計分賽</li>
<li>pursuit 爭先賽</li>
<li>Mountain bike 山地自行車賽</li>
</ul>
</body>
</html>
<head>
<title>圖片符號</title>
<style>
<!--
body{
background-color:#c1daff;
}
ul{
font-family:Arial;
font-size:13px;
color:#00458c;
list-style-type:none; /* 不顯示項目符號 */
}
li{
background:url(icon1.jpg) no-repeat; /* 添加爲背景圖片 */
padding-left:25px; /* 設置圖標與文字的間隔 */
}
-->
</style>
</head>
<body>
<p>自行車</p>
<ul>
<li>Road cycling 公路自行車賽</li>
<li>Track cycling 場地自行車賽</li>
<li>sprint 追逐賽</li>
<li>time trial 計時賽</li>
<li>points race 計分賽</li>
<li>pursuit 爭先賽</li>
<li>Mountain bike 山地自行車賽</li>
</ul>
</body>
</html>
<html>
<head>
<title>無需表格的菜單</title>
<style>
<!--
body{
background-color:#ffdee0;
}
#navigation {
width:200px;
font-family:Arial;
}
#navigation ul {
list-style-type:none; /* 不顯示項目符號 */
margin:0px;
padding:0px;
}
#navigation li {
border-bottom:1px solid #ED9F9F; /* 添加下劃線 */
}
#navigation li a{
display:block; /* 區塊顯示 */
padding:5px 5px 5px 0.5em;
text-decoration:none;
border-left:12px solid #711515; /* 左邊的粗紅邊 */
border-right:1px solid #711515; /* 右側陰影 */
}
#navigation li a:link, #navigation li a:visited{
background-color:#c11136;
color:#FFFFFF;
}
#navigation li a:hover{ /* 鼠標通過時 */
background-color:#990020; /* 改變背景色 */
color:#ffff00; /* 改變文字顏色 */
}
-->
</style>
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">My Blog</a></li>
<li><a href="#">Friends</a></li>
<li><a href="#">Next Station</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</div>
</body>
</html>
<head>
<title>無需表格的菜單</title>
<style>
<!--
body{
background-color:#ffdee0;
}
#navigation {
width:200px;
font-family:Arial;
}
#navigation ul {
list-style-type:none; /* 不顯示項目符號 */
margin:0px;
padding:0px;
}
#navigation li {
border-bottom:1px solid #ED9F9F; /* 添加下劃線 */
}
#navigation li a{
display:block; /* 區塊顯示 */
padding:5px 5px 5px 0.5em;
text-decoration:none;
border-left:12px solid #711515; /* 左邊的粗紅邊 */
border-right:1px solid #711515; /* 右側陰影 */
}
#navigation li a:link, #navigation li a:visited{
background-color:#c11136;
color:#FFFFFF;
}
#navigation li a:hover{ /* 鼠標通過時 */
background-color:#990020; /* 改變背景色 */
color:#ffff00; /* 改變文字顏色 */
}
-->
</style>
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">My Blog</a></li>
<li><a href="#">Friends</a></li>
<li><a href="#">Next Station</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</div>
</body>
</html>
<html>
<head>
<title>菜單的橫豎轉換</title>
<style>
<!--
body{
background-color:#ffdee0;
}
#navigation {
font-family:Arial;
}
#navigation ul {
list-style-type:none; /* 不顯示項目符號 */
margin:0px;
padding:0px;
}
#navigation li {
float:left; /* 水平顯示各個項目 */
}
#navigation li a{
display:block; /* 區塊顯示 */
padding:3px 6px 3px 6px;
text-decoration:none;
border:1px solid #711515;
margin:2px;
}
#navigation li a:link, #navigation li a:visited{
background-color:#c11136;
color:#FFFFFF;
}
#navigation li a:hover{ /* 鼠標通過時 */
background-color:#990020; /* 改變背景色 */
color:#ffff00; /* 改變文字顏色 */
}
-->
</style>
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">My Blog</a></li>
<li><a href="#">Friends</a></li>
<li><a href="#">Next Station</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</div>
</body>
</html>
<head>
<title>菜單的橫豎轉換</title>
<style>
<!--
body{
background-color:#ffdee0;
}
#navigation {
font-family:Arial;
}
#navigation ul {
list-style-type:none; /* 不顯示項目符號 */
margin:0px;
padding:0px;
}
#navigation li {
float:left; /* 水平顯示各個項目 */
}
#navigation li a{
display:block; /* 區塊顯示 */
padding:3px 6px 3px 6px;
text-decoration:none;
border:1px solid #711515;
margin:2px;
}
#navigation li a:link, #navigation li a:visited{
background-color:#c11136;
color:#FFFFFF;
}
#navigation li a:hover{ /* 鼠標通過時 */
background-color:#990020; /* 改變背景色 */
color:#ffff00; /* 改變文字顏色 */
}
-->
</style>
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">My Blog</a></li>
<li><a href="#">Friends</a></li>
<li><a href="#">Next Station</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</div>
</body>
</html>
<html>
<head>
<title>菜單橫豎轉換</title>
<style>
<!--
body{
background-color:#f8ffd3;
margin:0px; padding:0px;
}
table.banner{
background:url(banner_bg.jpg) repeat-x;
width:100%;
}
table.btn{
background:url(button1_bg.jpg) repeat-x;
width:100%;
}
#navigation{
margin:0px; padding:0px;
list-style-type:none;
height:32px;
font-size:12px;
}
#navigation li{
text-align:center; width:80px; height:32px;
background:url(button1.jpg) repeat-x;
float:left;
}
#navigation li a{
padding:10px 0px 10px 0px;
text-decoration:none;
display:block;
}
#navigation li a:link, #navigation li a:visited{color:#526d00;}
#navigation li a:hover{
color:#FFFFFF;
background:url(button2.jpg) no-repeat;
}
-->
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" class="banner"><tr><td align="left"><img src="banner1.jpg" border="0"></td></tr></table>
<table cellpadding="0" cellspacing="0"class="btn">
<tr>
<td>
<ul id="navigation">
<li><a href="#">首頁導讀</a></li>
<li><a href="#">推薦版面</a></li>
<li><a href="#">推薦文章</a></li>
<li><a href="#">人氣排名</a></li>
<li><a href="#">新開討論區</a></li>
<li><a href="#">休閒娛樂</a></li>
<li><a href="#">常見問題</a></li>
</ul>
</td>
</tr>
</table>
</body>
</html>
<head>
<title>菜單橫豎轉換</title>
<style>
<!--
body{
background-color:#f8ffd3;
margin:0px; padding:0px;
}
table.banner{
background:url(banner_bg.jpg) repeat-x;
width:100%;
}
table.btn{
background:url(button1_bg.jpg) repeat-x;
width:100%;
}
#navigation{
margin:0px; padding:0px;
list-style-type:none;
height:32px;
font-size:12px;
}
#navigation li{
text-align:center; width:80px; height:32px;
background:url(button1.jpg) repeat-x;
float:left;
}
#navigation li a{
padding:10px 0px 10px 0px;
text-decoration:none;
display:block;
}
#navigation li a:link, #navigation li a:visited{color:#526d00;}
#navigation li a:hover{
color:#FFFFFF;
background:url(button2.jpg) no-repeat;
}
-->
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" class="banner"><tr><td align="left"><img src="banner1.jpg" border="0"></td></tr></table>
<table cellpadding="0" cellspacing="0"class="btn">
<tr>
<td>
<ul id="navigation">
<li><a href="#">首頁導讀</a></li>
<li><a href="#">推薦版面</a></li>
<li><a href="#">推薦文章</a></li>
<li><a href="#">人氣排名</a></li>
<li><a href="#">新開討論區</a></li>
<li><a href="#">休閒娛樂</a></li>
<li><a href="#">常見問題</a></li>
</ul>
</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>百度——全球最大中文搜索引擎</title>
<style type="text/css">
td,p{font-size:12px;}
p{width:600px; margin:0px; padding:0px;}
.ff{font-family:Verdana; font-size:16px;}
#navigation{
margin:0px auto;
font-size:12px;
padding:0px;
border-bottom:1px solid #00c;
background:#eee;
width:600px;height:18px;
}
#navigation li{
float:left; /* 水平菜單 */
list-style-type:none; /* 不顯示項目符號 */
margin:0px;padding:0px;
width:67px;
}
#navigation li a{
display:block; /* 塊顯示 */
text-decoration:none;
padding:4px 0px 0px 0px;
margin:0px;
}
#navigation li a:link, #navigation li a:visited{
color:#0000CC;
}
#navigation li a:hover{ /* 鼠標通過時 */
text-decoration:underline;
background:#FFF;
padding:4px 0px 0px 0px;
margin:0px;
}
#navigation li#h{width:56px;height:18px;} /* 左側空間 */
#navigation li#more{width:85px;height:18px;} /* 「更多」按鈕 */
#navigation .current{ /* 當前頁面所在 */
background:#00C;
color:#FFF;
padding:4px 0px 0px 0px;
margin:0px;
font-weight:bold;
}
</style>
</head>
<body>
<center><br><img src="http://www.baidu.com/img/logo.gif"><br><br><br><br>
<div id="navigation">
<ul>
<li id="h"></li>
<li><a href="#">資 訊</a></li>
<li class="current">網 頁</li>
<li><a href="#">貼 吧</a></li>
<li><a href="#">知 道</a></li>
<li><a href="#">MP3</a></li>
<li><a href="#">圖 片</a></li>
<li id="more"><a href="#">更 多 >></a></li>
</ul>
</div>
<p style="height:44px;"> </p>
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="92"></td>
<td><form><input type="text" name="wd" class="ff" size="35">
<input type="submit" value="百度搜索"></form></td>
<td width="92" valign="top"><a href="#">搜索幫助</a><br><a href="#">高級搜索</a></td>
</tr>
</table>
</center>
</body>
</html>
<head>
<title>百度——全球最大中文搜索引擎</title>
<style type="text/css">
td,p{font-size:12px;}
p{width:600px; margin:0px; padding:0px;}
.ff{font-family:Verdana; font-size:16px;}
#navigation{
margin:0px auto;
font-size:12px;
padding:0px;
border-bottom:1px solid #00c;
background:#eee;
width:600px;height:18px;
}
#navigation li{
float:left; /* 水平菜單 */
list-style-type:none; /* 不顯示項目符號 */
margin:0px;padding:0px;
width:67px;
}
#navigation li a{
display:block; /* 塊顯示 */
text-decoration:none;
padding:4px 0px 0px 0px;
margin:0px;
}
#navigation li a:link, #navigation li a:visited{
color:#0000CC;
}
#navigation li a:hover{ /* 鼠標通過時 */
text-decoration:underline;
background:#FFF;
padding:4px 0px 0px 0px;
margin:0px;
}
#navigation li#h{width:56px;height:18px;} /* 左側空間 */
#navigation li#more{width:85px;height:18px;} /* 「更多」按鈕 */
#navigation .current{ /* 當前頁面所在 */
background:#00C;
color:#FFF;
padding:4px 0px 0px 0px;
margin:0px;
font-weight:bold;
}
</style>
</head>
<body>
<center><br><img src="http://www.baidu.com/img/logo.gif"><br><br><br><br>
<div id="navigation">
<ul>
<li id="h"></li>
<li><a href="#">資 訊</a></li>
<li class="current">網 頁</li>
<li><a href="#">貼 吧</a></li>
<li><a href="#">知 道</a></li>
<li><a href="#">MP3</a></li>
<li><a href="#">圖 片</a></li>
<li id="more"><a href="#">更 多 >></a></li>
</ul>
</div>
<p style="height:44px;"> </p>
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="92"></td>
<td><form><input type="text" name="wd" class="ff" size="35">
<input type="submit" value="百度搜索"></form></td>
<td width="92" valign="top"><a href="#">搜索幫助</a><br><a href="#">高級搜索</a></td>
</tr>
</table>
</center>
</body>
</html>
body{
margin: 10px;
}
#content{ /* 具體內容 */
border-left: 1px solid #11a3ff; /* 左邊框 */
border-right: 1px solid #11a3ff; /* 右邊框 */
border-bottom: 1px solid #11a3ff; /* 下邊框 */
padding: 15px;
font-size: 12px;
}
ul#tabnav{
list-style-type: none;
margin: 0px;
padding-left: 0px; /* 左側無空隙 */
padding-bottom: 23px;
border-bottom: 1px solid #11a3ff; /* 菜單的下邊框 */
font: bold 12px verdana, arial;
}
ul#tabnav li{
float: left;
height: 22px;
background-color: #a3dbff;
margin: 0px 3px 0px 0px;
border: 1px solid #11a3ff;
}
ul#tabnav a:link, ul#tabnav a:visited{
display: block; /* 塊元素 */
color: #006eb3;
text-decoration: none;
padding: 5px 10px 3px 10px;
}
ul#tabnav a:hover{
background-color: #006eb3;
color: #FFFFFF;
}
body#home li.home, body#news li.news, /* 當前頁面的菜單項 */
body#sports li.sports, body#music li.music,
body#nextstation li.nextstation,
body#blog li.blog{
border-bottom: 1px solid #FFFFFF; /* 白色下邊框，覆蓋<ul>中的藍色下邊框 */
color: #000000;
background-color: #FFFFFF;
}
body#home li.home a:link, body#home li.home a:visited, /* 當前頁面的菜單項的超連接 */
body#news li.news a:link, body#news li.news a:visited,
body#sports li.sports a:link, body#sports li.sports a:visited,
body#music li.music a:link, body#music li.music a:visited,
body#nextstation li.nextstation a:link, body#nextstation li.nextstation a:visited,
body#blog li.blog a:link, body#blog li.blog a:visited{
color: #000000;
background-color: #FFFFFF;
}
body#home li.home a:hover, body#news li.news a:hover,
body#sports li.sports a:hover, body#music li.music a:hover,
body#nextstation li.nextstation a:hover,
body#blog li.blog a:hover{
color: #006eb3;
text-decoration: underline;
}
margin: 10px;
}
#content{ /* 具體內容 */
border-left: 1px solid #11a3ff; /* 左邊框 */
border-right: 1px solid #11a3ff; /* 右邊框 */
border-bottom: 1px solid #11a3ff; /* 下邊框 */
padding: 15px;
font-size: 12px;
}
ul#tabnav{
list-style-type: none;
margin: 0px;
padding-left: 0px; /* 左側無空隙 */
padding-bottom: 23px;
border-bottom: 1px solid #11a3ff; /* 菜單的下邊框 */
font: bold 12px verdana, arial;
}
ul#tabnav li{
float: left;
height: 22px;
background-color: #a3dbff;
margin: 0px 3px 0px 0px;
border: 1px solid #11a3ff;
}
ul#tabnav a:link, ul#tabnav a:visited{
display: block; /* 塊元素 */
color: #006eb3;
text-decoration: none;
padding: 5px 10px 3px 10px;
}
ul#tabnav a:hover{
background-color: #006eb3;
color: #FFFFFF;
}
body#home li.home, body#news li.news, /* 當前頁面的菜單項 */
body#sports li.sports, body#music li.music,
body#nextstation li.nextstation,
body#blog li.blog{
border-bottom: 1px solid #FFFFFF; /* 白色下邊框，覆蓋<ul>中的藍色下邊框 */
color: #000000;
background-color: #FFFFFF;
}
body#home li.home a:link, body#home li.home a:visited, /* 當前頁面的菜單項的超連接 */
body#news li.news a:link, body#news li.news a:visited,
body#sports li.sports a:link, body#sports li.sports a:visited,
body#music li.music a:link, body#music li.music a:visited,
body#nextstation li.nextstation a:link, body#nextstation li.nextstation a:visited,
body#blog li.blog a:link, body#blog li.blog a:visited{
color: #000000;
background-color: #FFFFFF;
}
body#home li.home a:hover, body#news li.news a:hover,
body#sports li.sports a:hover, body#music li.music a:hover,
body#nextstation li.nextstation a:hover,
body#blog li.blog a:hover{
color: #006eb3;
text-decoration: underline;
}
<html>
<head>
<title>流行的Tab菜單</title>
<link href="8-9.css" type="text/css" rel="stylesheet">
</head>
<body id="blog">
<ul id="tabnav">
<li class="home"><a href="8-9_home.html">首頁</a></li>
<li class="news"><a href="8-9_news.html">新聞</a></li>
<li class="sports"><a href="8-9_sports.html">體育</a></li>
<li class="music"><a href="8-9_music.html">音樂</a></li>
<li class="nextstation"><a href="8-9_nextstation.html">下一站</a></li>
<li class="blog"><a href="8-9_blog.html">博客</a></li>
</ul>
<div id="content">
<h3>Blog</h3>
</div>
</body>
</html>
<head>
<title>流行的Tab菜單</title>
<link href="8-9.css" type="text/css" rel="stylesheet">
</head>
<body id="blog">
<ul id="tabnav">
<li class="home"><a href="8-9_home.html">首頁</a></li>
<li class="news"><a href="8-9_news.html">新聞</a></li>
<li class="sports"><a href="8-9_sports.html">體育</a></li>
<li class="music"><a href="8-9_music.html">音樂</a></li>
<li class="nextstation"><a href="8-9_nextstation.html">下一站</a></li>
<li class="blog"><a href="8-9_blog.html">博客</a></li>
</ul>
<div id="content">
<h3>Blog</h3>
</div>
</body>
</html>
<html>
<head>
<title>流行的Tab菜單</title>
<link href="8-9.css" type="text/css" rel="stylesheet">
<style type="text/css">
<!--
#leftpic{
width:160px;
float:left;
padding-right:15px;
}
#leftpic a:link, #leftpic a:visited{
color:#006eb3;
text-decoration:none;
}
#leftpic a:hover{
color:#000000;
text-decoration:underline;
}
img{
border:1px solid #0066b0;
margin-bottom:5px;
}
ul#list{
list-style-type:none;
margin:0px;
padding:5px 0px 5px 2px;
}
ul#list li{
line-height:18px;
}
ul#list li a:link{
color:#000000;
text-decoration:none;
}
ul#list li a:visited{
color:#333333;
text-decoration:none;
}
ul#list li a:hover{
color:#006eb3;
text-decoration:underline;
}
-->
</style>
</head>
<body id="home">
<ul id="tabnav">
<li class="home"><a href="8-9_home.html">首頁</a></li>
<li class="news"><a href="8-9_news.html">新聞</a></li>
<li class="sports"><a href="8-9_sports.html">體育</a></li>
<li class="music"><a href="8-9_music.html">音樂</a></li>
<li class="nextstation"><a href="8-9_nextstation.html">下一站</a></li>
<li class="blog"><a href="8-9_blog.html">博客</a></li>
</ul>
<div id="content">
<span id="leftpic">
<a href="#"><img src="pic1.jpg"><br>
<center>追憶往事，展望將來</center></a>
</span>
<ul id="list">
<li><a href="#">[首頁] 追憶往事，展望將來。新年寄語</a></li>
<li><a href="#">[新聞] 每一年五1、十一長假，不少人不肯出門</a></li>
<li><a href="#">[新聞] 清華大學電子系研製成功新一代...</a></li>
<li><a href="#">[體育] 奧運火炬接力火熱進行</a></li>
<li><a href="#">[音樂] 網民調查，你最喜歡的音樂類型</a></li>
<li><a href="#">[博客] 自由博客新版正式發佈，網友...</a></li>
</ul>
</div>
</body>
</html>
<head>
<title>流行的Tab菜單</title>
<link href="8-9.css" type="text/css" rel="stylesheet">
<style type="text/css">
<!--
#leftpic{
width:160px;
float:left;
padding-right:15px;
}
#leftpic a:link, #leftpic a:visited{
color:#006eb3;
text-decoration:none;
}
#leftpic a:hover{
color:#000000;
text-decoration:underline;
}
img{
border:1px solid #0066b0;
margin-bottom:5px;
}
ul#list{
list-style-type:none;
margin:0px;
padding:5px 0px 5px 2px;
}
ul#list li{
line-height:18px;
}
ul#list li a:link{
color:#000000;
text-decoration:none;
}
ul#list li a:visited{
color:#333333;
text-decoration:none;
}
ul#list li a:hover{
color:#006eb3;
text-decoration:underline;
}
-->
</style>
</head>
<body id="home">
<ul id="tabnav">
<li class="home"><a href="8-9_home.html">首頁</a></li>
<li class="news"><a href="8-9_news.html">新聞</a></li>
<li class="sports"><a href="8-9_sports.html">體育</a></li>
<li class="music"><a href="8-9_music.html">音樂</a></li>
<li class="nextstation"><a href="8-9_nextstation.html">下一站</a></li>
<li class="blog"><a href="8-9_blog.html">博客</a></li>
</ul>
<div id="content">
<span id="leftpic">
<a href="#"><img src="pic1.jpg"><br>
<center>追憶往事，展望將來</center></a>
</span>
<ul id="list">
<li><a href="#">[首頁] 追憶往事，展望將來。新年寄語</a></li>
<li><a href="#">[新聞] 每一年五1、十一長假，不少人不肯出門</a></li>
<li><a href="#">[新聞] 清華大學電子系研製成功新一代...</a></li>
<li><a href="#">[體育] 奧運火炬接力火熱進行</a></li>
<li><a href="#">[音樂] 網民調查，你最喜歡的音樂類型</a></li>
<li><a href="#">[博客] 自由博客新版正式發佈，網友...</a></li>
</ul>
</div>
</body>
</html>
<html>
<head>
<title>流行的Tab菜單</title>
<link href="8-9.css" type="text/css" rel="stylesheet">
</head>
<body id="music">
<ul id="tabnav">
<li class="home"><a href="8-9_home.html">首頁</a></li>
<li class="news"><a href="8-9_news.html">新聞</a></li>
<li class="sports"><a href="8-9_sports.html">體育</a></li>
<li class="music"><a href="8-9_music.html">音樂</a></li>
<li class="nextstation"><a href="8-9_nextstation.html">下一站</a></li>
<li class="blog"><a href="8-9_blog.html">博客</a></li>
</ul>
<div id="content">
<h3>Music</h3>
</div>
</body>
</html>
<head>
<title>流行的Tab菜單</title>
<link href="8-9.css" type="text/css" rel="stylesheet">
</head>
<body id="music">
<ul id="tabnav">
<li class="home"><a href="8-9_home.html">首頁</a></li>
<li class="news"><a href="8-9_news.html">新聞</a></li>
<li class="sports"><a href="8-9_sports.html">體育</a></li>
<li class="music"><a href="8-9_music.html">音樂</a></li>
<li class="nextstation"><a href="8-9_nextstation.html">下一站</a></li>
<li class="blog"><a href="8-9_blog.html">博客</a></li>
</ul>
<div id="content">
<h3>Music</h3>
</div>
</body>
</html>
<html>
<head>
<title>流行的Tab菜單</title>
<link href="8-9.css" type="text/css" rel="stylesheet">
</head>
<body id="news">
<ul id="tabnav">
<li class="home"><a href="8-9_home.html">首頁</a></li>
<li class="news"><a href="8-9_news.html">新聞</a></li>
<li class="sports"><a href="8-9_sports.html">體育</a></li>
<li class="music"><a href="8-9_music.html">音樂</a></li>
<li class="nextstation"><a href="8-9_nextstation.html">下一站</a></li>
<li class="blog"><a href="8-9_blog.html">博客</a></li>
</ul>
<div id="content">
<h3>News</h3>
</div>
</body>
</html>
<head>
<title>流行的Tab菜單</title>
<link href="8-9.css" type="text/css" rel="stylesheet">
</head>
<body id="news">
<ul id="tabnav">
<li class="home"><a href="8-9_home.html">首頁</a></li>
<li class="news"><a href="8-9_news.html">新聞</a></li>
<li class="sports"><a href="8-9_sports.html">體育</a></li>
<li class="music"><a href="8-9_music.html">音樂</a></li>
<li class="nextstation"><a href="8-9_nextstation.html">下一站</a></li>
<li class="blog"><a href="8-9_blog.html">博客</a></li>
</ul>
<div id="content">
<h3>News</h3>
</div>
</body>
</html>
<html>
<head>
<title>流行的Tab菜單</title>
<link href="8-9.css" type="text/css" rel="stylesheet">
<style type="text/css">
<!--
#leftpic{
float:left;
padding-right:15px;
padding-bottom:5px;
}
#leftpic a:link, #leftpic a:visited{
color:#006eb3;
text-decoration:none;
}
#leftpic a:hover{
color:#000000;
text-decoration:underline;
}
img{
border:1px solid #0066b0;
margin-bottom:5px;
}
ul#list{
list-style-type:none;
margin:0px;
padding:3px 0px 5px 2px;
}
ul#list li{
line-height:18px;
}
ul#list li a:link{
color:#000000;
text-decoration:none;
}
ul#list li a:visited{
color:#333333;
text-decoration:none;
}
ul#list li a:hover{
color:#006eb3;
text-decoration:underline;
}
-->
</style>
</head>
<body id="nextstation">
<ul id="tabnav">
<li class="home"><a href="8-9_home.html">首頁</a></li>
<li class="news"><a href="8-9_news.html">新聞</a></li>
<li class="sports"><a href="8-9_sports.html">體育</a></li>
<li class="music"><a href="8-9_music.html">音樂</a></li>
<li class="nextstation"><a href="8-9_nextstation.html">下一站</a></li>
<li class="blog"><a href="8-9_blog.html">博客</a></li>
</ul>
<div id="content">
<span id="leftpic">
<a href="#"><img src="pic2.jpg"><br>
<center>追憶往事，展望將來</center></a>
</span>
<ul id="list">
<li>1. 在列車出發前，請將本身的手機置於無聲狀態。</li>
<li>2. 遵照乘車秩序，不要搶佔座位。</li>
<li>3. 請勿在車箱內大聲喧譁，或隨意投棄雜物。</li>
<li>4. 本次列車所有爲無煙列車，車箱內嚴禁吸菸。</li>
<li>5. 嚴禁攜帶易燃易爆等危險物品上車。</li>
<li>6. 如需在車箱內拍照，請勿使用閃光燈。</li>
<li>7. 請保持通道暢通，並留意距您最近的安全出口。</li>
</ul>
</div>
</body>
</html>
<head>
<title>流行的Tab菜單</title>
<link href="8-9.css" type="text/css" rel="stylesheet">
<style type="text/css">
<!--
#leftpic{
float:left;
padding-right:15px;
padding-bottom:5px;
}
#leftpic a:link, #leftpic a:visited{
color:#006eb3;
text-decoration:none;
}
#leftpic a:hover{
color:#000000;
text-decoration:underline;
}
img{
border:1px solid #0066b0;
margin-bottom:5px;
}
ul#list{
list-style-type:none;
margin:0px;
padding:3px 0px 5px 2px;
}
ul#list li{
line-height:18px;
}
ul#list li a:link{
color:#000000;
text-decoration:none;
}
ul#list li a:visited{
color:#333333;
text-decoration:none;
}
ul#list li a:hover{
color:#006eb3;
text-decoration:underline;
}
-->
</style>
</head>
<body id="nextstation">
<ul id="tabnav">
<li class="home"><a href="8-9_home.html">首頁</a></li>
<li class="news"><a href="8-9_news.html">新聞</a></li>
<li class="sports"><a href="8-9_sports.html">體育</a></li>
<li class="music"><a href="8-9_music.html">音樂</a></li>
<li class="nextstation"><a href="8-9_nextstation.html">下一站</a></li>
<li class="blog"><a href="8-9_blog.html">博客</a></li>
</ul>
<div id="content">
<span id="leftpic">
<a href="#"><img src="pic2.jpg"><br>
<center>追憶往事，展望將來</center></a>
</span>
<ul id="list">
<li>1. 在列車出發前，請將本身的手機置於無聲狀態。</li>
<li>2. 遵照乘車秩序，不要搶佔座位。</li>
<li>3. 請勿在車箱內大聲喧譁，或隨意投棄雜物。</li>
<li>4. 本次列車所有爲無煙列車，車箱內嚴禁吸菸。</li>
<li>5. 嚴禁攜帶易燃易爆等危險物品上車。</li>
<li>6. 如需在車箱內拍照，請勿使用閃光燈。</li>
<li>7. 請保持通道暢通，並留意距您最近的安全出口。</li>
</ul>
</div>
</body>
</html>
<html>
<head>
<title>流行的Tab菜單</title>
<link href="8-9.css" type="text/css" rel="stylesheet">
</head>
<body id="sports">
<ul id="tabnav">
<li class="home"><a href="8-9_home.html">首頁</a></li>
<li class="news"><a href="8-9_news.html">新聞</a></li>
<li class="sports"><a href="8-9_sports.html">體育</a></li>
<li class="music"><a href="8-9_music.html">音樂</a></li>
<li class="nextstation"><a href="8-9_nextstation.html">下一站</a></li>
<li class="blog"><a href="8-9_blog.html">博客</a></li>
</ul>
<div id="content">
<h3>Sports</h3>
</div>
</body>
</html>
<head>
<title>流行的Tab菜單</title>
<link href="8-9.css" type="text/css" rel="stylesheet">
</head>
<body id="sports">
<ul id="tabnav">
<li class="home"><a href="8-9_home.html">首頁</a></li>
<li class="news"><a href="8-9_news.html">新聞</a></li>
<li class="sports"><a href="8-9_sports.html">體育</a></li>
<li class="music"><a href="8-9_music.html">音樂</a></li>
<li class="nextstation"><a href="8-9_nextstation.html">下一站</a></li>
<li class="blog"><a href="8-9_blog.html">博客</a></li>
</ul>
<div id="content">
<h3>Sports</h3>
</div>
</body>
</html>
來源：《精通CSS+DIV網頁樣式與佈局
》
相關文章
- 1. 用GoLive實現CSSDIV之一
- 2. 二級菜單的製做
- 3. 製做樹形菜單
- 4. 響應式菜單製做
- 5. 使用antd UI 製做菜單
- 6. WPF利用radiobutton製做菜單按鈕
- 7. 利用CSS製做下拉菜單
- 8. html+css簡單下拉菜單製做
- 9. 實例：用UL製做橫向CSS導航菜單
- 10. 小白jquery橫向菜單彈出菜單製做
- 更多相關文章...
- • Eclipse 菜單 - Eclipse 教程
- • Eclipse 重構菜單 - Eclipse 教程
- • TiDB 在摩拜單車在線數據業務的應用和實踐
- • Docker容器實戰(六) - 容器的隔離與限制
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 用GoLive實現CSSDIV之一
- 2. 二級菜單的製做
- 3. 製做樹形菜單
- 4. 響應式菜單製做
- 5. 使用antd UI 製做菜單
- 6. WPF利用radiobutton製做菜單按鈕
- 7. 利用CSS製做下拉菜單
- 8. html+css簡單下拉菜單製做
- 9. 實例：用UL製做橫向CSS導航菜單
- 10. 小白jquery橫向菜單彈出菜單製做