软件下载 | 资讯教程 | 最近更新 | 下载排行 | 一键转帖 | 发布投稿
您的位置:最火下载站 > Web前端 > Html/css > 如何使用css创建一个类似按扭的导航

如何使用css创建一个类似按扭的导航

  大多数的网站的导航,点击时会像按扭的效果.这种效果往往是利用图像替换技术.或者是用一些javascript代码来实现.

  那么我们来想一下是否可以用纯css来做这样的效果.

  答案是肯定的,你会发现使用CSS来做这样的效果会显得更加简单.在这个教程中使用的是CSS边框属性.


提示:可修改后代码再运行!

分析:

在做这个效果之前,先把导航水平排列(在上节课有说到如何使导航横向)我们来想想如何做出扭按的效果.先给上边框和左边框一个颜色,再给下边框和右边框另一个颜.我们给上边框和左边框的颜色要比右边框和下边框的颜色要浅,这样就可以创建出一个轻微的斜角效果.

Copy to ClipboardLiehuo.Net Codes引用的内容:[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 ClipboardLiehuo.Net Codes引用的内容:[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;
}

最终效果:

    相关阅读
    栏目导航
    推荐软件