本文介绍了一个使用CSS实现的固定在页面右侧的导航菜单。通过绝对定位和特定样式设置，该菜单能够保持在屏幕右侧不变，同时具备良好的视觉效果。
模仿做来的，万事开头难，谅解啊！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" />
<title>固定在右侧的CSS菜单</title>
<style type="text/css">
<!--
div#navcontainer
{
font-family: arial;
font-weight: bold;
background: #642;
position: absolute;
right: 0px;
margin: 0;
padding: 9px;
border: 0;
}
div#navcontainer ul
{
display: inline;
margin: 0;
padding: 0;
list-style: none;
border: solid 1px #642;
}
div#navcontainer h2
{
border: solid 1px #642;
padding: 4px;
text-align: center;
}
div#navcontainer ul li
{
display: inline;
margin: 0;
}
div#navcontainer ul li a
{
color: #a10;
background: #ffc;
margin: 0;
padding: 2px 5px 2px 5px;
text-decoration: none;
}
div#navcontainer ul li a:hover
{
background: #e8db6f;
border-bottom: solid 9px #ffc;
}
-->
</style>
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="/" id="current">mb5u.com</a></li>
<li><a href="/sort/list_1_1.shtml">ASP</a></li>
<li><a href="/sort/list_11_203_1.shtml">AJAX</a></li>
<li><a href="/sort/list_11_112_1.shtml">JQUERY</a></li>
<li><a href="/sort/list_11_1.shtml">EXT</a></li>
</ul>
</div>
</body>
</html>
效果图：
扫一扫
2092
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
