蓝白相间立体按钮
2014-11-09 09:10:28 -0500
[代码收集]蓝白相间立体按钮
2014-06-21 06:47:34 +0800
蓝白相间立体按钮
代码说明
纯CSS编写的导航菜单，当悬停的时候它是有阴影的，显出立体效果的菜单，蓝色与白色搭配，对比强烈，清新自然，完全CSS实现，初学CSS的朋友可以把此当作一个CSS菜单制作教程，都是基础代码实现的。转自＠X6
html代码
<style type="text/css"> <!-- .style1 {color: #FFFFFF} --> </style></div><div class="wo-entry-section wo-text-html"> <textarea> <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