HTML css简洁导航条

2024-09-05 12:20:53

字体：大中小

来源：转载

供稿：网友

HTML css简洁导航，菜单条，经典的水平导航条阄要，纯CSS实现，无JS,无插件，兼容各大浏览器，代码简单，复制代码即可使用。带有鼠标悬停动态效果，鼠标滑过时会在对应菜单文字下显示一个横条，很不错的埃

<!DOCTYPE html><html><head><title>HTML css简洁导航</title><style>body{    margin: 0;    padding: 0;    font: 14px/15pt;    background: #dad8d9;}#nav{    width: 80%;    margin: 100px auto;    height: 46px;    border-radius: 8px;    border: 1px solid #cbcbcb;    border-bottom: 4px solid #adadad;    background: url(/jscss/demoimg/201403/navbg.png") 14.28% center no-repeat,    url(/jscss/demoimg/201403/navbg.png") 28.56% center no-repeat,    url(/jscss/demoimg/201403/navbg.png") 42.84% center no-repeat,    url(/jscss/demoimg/201403/navbg.png") 57.18% center no-repeat,    url(/jscss/demoimg/201403/navbg.png") 71.62% center no-repeat,    #f3f3f3 url(/jscss/demoimg/201403/navbg.png") 85.80% center no-repeat;}#nav a{    display: block;    width: 14.28%;    height: 46px;    line-height: 46px;    float: left;    border-bottom: 4px solid #adadad;    text-align: center;    text-decoration: none;    color: seagreen;}#nav a:first-child{    border-radius: 0 0 0 8px;}#nav a:last-child{    border-radius: 0 0 8px 0;}#nav a:hover{    border-bottom: 4px solid red;    color: red;}#nav a:first-child:hover{    border-bottom: 4px solid red;    border-radius: 0 0 0 8px;}#nav a:last-child:hover{    border-bottom: 4px solid red;}</style></head><body><div id="nav">    网站首页    公司简介    产品介绍    经典案例    企业动态    在线留言    通信地址</div></body></html>

上一篇：很酷的网页顶部图标菜单右上角下拉菜单

下一篇：jquery伸缩导航条点击向下展开菜单项