如何使用css创建一个类似按扭的导航
发布时间：2018-08-28 16:47:06 所属栏目：创业 来源：站长网
导读：大多数的网站的导航,点击时会像按扭的效果.这种效果往往是利用图像替换技术.或者是用一些javascript代码来实现. 那么我们来想一下是否可以用纯css来做这样的效果. 答案是肯定的,你会发现使用CSS来做这样的效果会显得更加简单.在这个教程中使用的是CSS边框
|
大多数的网站的导航,点击时会像按扭的效果.这种效果往往是利用图像替换技术.或者是用一些javascript代码来实现. 那么我们来想一下是否可以用纯css来做这样的效果. 答案是肯定的,你会发现使用CSS来做这样的效果会显得更加简单.在这个教程中使用的是CSS边框属性.
分析:  引用的内容：[www.veryhuo.com]
#navigation a:link, #navigation a:visited { margin-right: 0.2em; padding: 0.2em 0.6em 0.2em 0.6em; color: #A62020; background-color: #FCE6EA; text-decoration: none; border-top: 1px solid #FFFFFF; border-left: 1px solid #FFFFFF; border-bottom: 1px solid #717171; border-right: 1px solid #717171; } 这步就是实现按扭按下的效果.设置hover状态的边框颜色. Copy to Clipboard引用的内容：[www.veryhuo.com]
#navigation a:hover { border-top: 1px solid #717171; border-left: 1px solid #717171; border-bottom: 1px solid #FFFFFF; border-right: 1px solid #FFFFFF; } 最终效果:
（编辑：核心网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
