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横向菜单弹出菜单制做