logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

【导航菜单特效】在横线中间的简洁CSS菜单

 163九九 2016-04-17

最新【导航菜单特效】在横线中间的简洁CSS菜单

以下是三零网为大家整理的最新【导航菜单特效】在横线中间的简洁CSS菜单的文章，希望大家能够喜欢!

在一线条中间的简洁CSS菜单导航条，来自Wiki程序中，为你的网页增加一点个性。注意改变CSs中padding-bottom: 18px;的数值可以改变CSS与横线的位置 ，你可以试着改变它的值 ，会得到不同的菜单效果。

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>简洁CSS菜单</title>
<style type="text/css">
<!--
ul#navlist
{
font: bold 12px verdana;
list-style-type: none;
padding-bottom: 18px;
border-bottom: 1px solid #6c6;
margin: 0;
}

ul#navlist li
{
float: left;
height: 21px;
background-color: #cfc;
margin: 2px 2px 0 2px;
border: 1px solid #6c6;
}

li#active a
{
border-bottom: 1px solid #fff;
background-color: #fff;
}

li#active a { color: #003399; }
#navlist a
{
float: left;
display: block;
color: #666;
text-decoration: none;
padding: 4px;
}
#navlist a:hover { background: #fff; }
-->
</style>
</head>

<body>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">首页</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>
</div>
</body>
</html>


延伸阅读:
·【导航菜单特效】带英文提示的CSS网站导航栏
·【导航菜单特效】新浪博客自适应宽度的CSS菜单
·【导航菜单特效】新浪博客左侧的Blog管理菜单
·【导航菜单特效】带标记滑动的JS+CSS菜单
·【导航菜单特效】自动变为大写的自适应CSS漂亮菜单
·【导航菜单特效】很平和的一个CSs圆角导航
·【导航菜单特效】选项卡式的菜单
·【导航菜单特效】横向滑动特效的菜单
·【导航菜单特效】鼠标移动会动的CSS菜单
·【导航菜单特效】像滑动门一样的CSs菜单
·【导航菜单特效】横向三级展开的CSS菜单
·【导航菜单特效】蓝色清新菜单，和图片配合的很完美
·【导航菜单特效】点击展开的下拉菜单
·【导航菜单特效】紫罗兰风格CSS导航条
·【导航菜单特效】分类信息网站的超酷纯CSS菜单

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： 163九九 > 《html》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多