css 好看的動態菜單效果
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
body{
background-color:#c1daff;
}
#navigation{
width:200px;
font-family:Arial;
}
#navigation ul{
font-family:Arial;
font-size:13px;
color:#00458c;
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{
background-color:#c11136;
color:#ffffff;
}
#navigation li a:visited{
background-color:#c11136;
color:#ffffff;
}
#navigation li a:hover{
background-color:#990020;
color:#ffff00;
}
#navigation2{
font-family:Arial;
margin-top:20px;
}
#navigation2 ul{
font-family:Arial;
font-size:13px;
color:#00458c;
margin:0px;
padding:0px;
}
#navigation2 li{
float:left;
}
#navigation2 li a{
font-family:Arial;
font-size:13px;
color:#00458c;
display:block;/* 按塊顯示*/
padding:3px 6px 3px 6px;
text-decoration:none;
border:1px solid #711515;
margin:2px;
}
#navigation2 li a:link{
background-color:#039803;
color:#ffffff;
}
#navigation2 li a:visited{
background-color:#039803;
color:#ffffff;
}
#navigation2 li a:hover{
background-color:#035803;
color:#ffff00;
}
</HEAD>
<BODY>
<div id="page">
<div id="navigation">
<ul>
<li><a href="#">自由泳</a></li>
<li><a href="javascript:">仰泳</a></li>
<li><a href="#">蛙泳</a></li>
<li><a href="#">蝶泳</a></li>
<li><a href="#">個人混合泳</a></li>
<li><a href="#">自由泳接力</a></li>
</ul>
</div>
<div id="navigation2">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">My Bolg</a></li>
<li><a href="#">Firends</a></li>
<li><a href="#">Next Staition</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</div>
</div>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
body{
background-color:#c1daff;
}
#navigation{
width:200px;
font-family:Arial;
}
#navigation ul{
font-family:Arial;
font-size:13px;
color:#00458c;
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{
background-color:#c11136;
color:#ffffff;
}
#navigation li a:visited{
background-color:#c11136;
color:#ffffff;
}
#navigation li a:hover{
background-color:#990020;
color:#ffff00;
}
#navigation2{
font-family:Arial;
margin-top:20px;
}
#navigation2 ul{
font-family:Arial;
font-size:13px;
color:#00458c;
margin:0px;
padding:0px;
}
#navigation2 li{
float:left;
}
#navigation2 li a{
font-family:Arial;
font-size:13px;
color:#00458c;
display:block;/* 按塊顯示*/
padding:3px 6px 3px 6px;
text-decoration:none;
border:1px solid #711515;
margin:2px;
}
#navigation2 li a:link{
background-color:#039803;
color:#ffffff;
}
#navigation2 li a:visited{
background-color:#039803;
color:#ffffff;
}
#navigation2 li a:hover{
background-color:#035803;
color:#ffff00;
}
</HEAD>
<BODY>
<div id="page">
<div id="navigation">
<ul>
<li><a href="#">自由泳</a></li>
<li><a href="javascript:">仰泳</a></li>
<li><a href="#">蛙泳</a></li>
<li><a href="#">蝶泳</a></li>
<li><a href="#">個人混合泳</a></li>
<li><a href="#">自由泳接力</a></li>
</ul>
</div>
<div id="navigation2">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">My Bolg</a></li>
<li><a href="#">Firends</a></li>
<li><a href="#">Next Staition</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</div>
</div>
</BODY>
</HTML>
posted on 2012-05-10 09:33 歐陽良才 閱讀(730) 評論(0) 編輯 收藏 所屬分類: HTML學習