怎样行使css建设一个相同按扭的导航

发布时间：2018-08-28 10:24:48 所属栏目：创业来源：站长网

导读：大大都的网站的导航,点击时会像按扭的结果.这种结果每每是操作图像替代技能.可能是用一些javascript代码来实现. 那么我们来想一下是否可以用纯css来做这样的结果. 谜底是必定的,你会发明行使CSS来做这样的结果会显得越发简朴.在这个教程中行使的是CSS边框

　　大大都的网站的导航,点击时会像按扭的结果.这种结果每每是操作图像替代技能.可能是用一些javascript代码来实现.

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

　　谜底是必定的,你会发明行使CSS来做这样的结果会显得越发简朴.在这个教程中行使的是CSS边框属性.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US"> <head> <title>Lists as navigation - liehuo.net</title> <meta http-equiv="content-type" content="text/html; charset=gbk" /> <style> #navigation { font-size:90% } #navigation ul { list-style: none; margin: 0; padding: 0; padding-top: 1em; } #navigation li { display: inline; } #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; } #navigation a:hover { border-top: 1px solid #717171; border-left: 1px solid #717171; border-bottom: 1px solid #FFFFFF; border-right: 1px solid #FFFFFF; } </style> </head> <body> <div id="navigation"> <ul> <li><a href="#">Recipes</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Articles</a></li> <li><a href="#">Buy Online</a></li> </ul> </div> </body> </html> <br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

说明:

在做这个结果之前,先把导航程度分列(在上节课有说到怎样使导航横向)我们来想想怎样做出扭按的结果.先给上边框和左边框一个颜色,再给下边框和右边框另一个颜.我们给上边框和左边框的颜色要比右边框和下边框的颜色要浅,这样就可以建设出一个稍微的斜角结果.

Copy to Clipboard Liehuo.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 Clipboard Liehuo.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;
}

最终结果:

怎样行使css建设一个相同按扭的导航

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

2021创业做什么好？低	香港虚拟主机，香港虚
《启航当风起时》起于	域名最网站至关重要如