[CSS] 蓝白相间纯CSS悬停立体效果导航菜单
2014-08-19 03:59:02 -0400
代码说明
纯CSS编写的导航菜单，当悬停的时候它是有阴影的，显出立体效果的菜单，蓝色与白色搭配，对比强烈，清新自然，完全CSS实现，初学CSS的朋友可以把此当作一个CSS菜单制作教程，都是基础代码实现的。
代码复制
<style type="text/css"> #nav { margin:20px auto 0 auto; } #nav li { display: inline; list-style-type: none; } #nav li a:link,#nav li a:visited { float:left; margin-right:2px; padding:3px 8px 3px 8px; text-decoration: none; color:#fff; background: #76c2fa ; border-top:1px solid #fff; border-right:1px solid #333; border-bottom:1px solid #333; border-left:1px solid #fff; } #nav li a:hover { padding:2px 8px 4px 8px; border-top:1px solid #333; border-right:1px solid #fff; border-bottom:1px solid #fff; border-left:1px solid #333; } #nav li a#current { color:#ff0; } </style> </head> <body> <ul id="nav"> <li><a href="/" id="current">返回</a></li> <li><a href="/">网站</a></li> <li><a href="/">网站</a></li> <li><a href="/">网站</a></li> </ul>
代码演示
返回
网站
网站
网站
«Newer
Older»
Comment:
Name:
Back to home
Subscribe
|
Register
|
Login
|
N