CSS3面包屑导航菜单

发布时间:2020-06-25 02:24:17发布者:admin浏览数:

本章节分享一段代码实例,它实现了扁平化面包屑导航菜单代码实例。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码

<!doctype html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style>* { margin: 0; padding: 0;}body { text-align: center; background-color: #34495e;}ul { display: inline-block; margin-top: 200px;}ul li { list-style: none; float: left;}ul li a { text-decoration: none; background-color: #3498db; color: #FFF; display: block; height: 40px; line-height: 40px; padding: 0 20px 0 10px; position: relative; margin-right: 25px;}ul li:nth-child(even) a { background-color: #2980b9;}ul li:nth-child(even) a:before { border-color: #2980b9; border-left-color: transparent;}ul li:nth-child(even) a:after { border-left-color: #2980b9;}ul li:first-child a { padding-left: 20px; border-radius: 5px 0 0 5px;}ul li:last-child a { padding-right: 20px; border-radius: 0 5px 5px 0;}ul li a:before, ul li a:after { content: ""; position: absolute; top: 0; border: 0 solid #3498db; border-width: 20px 10px; width: 0; height: 0;}ul li:first-child a:before { border: none;}ul li:last-child a:after { border: none;}ul li a:before { left: -20px; border-left-color: transparent;}ul li a:after { left: 100%; border-color: transparent; border-left-color: #3498db;}ul li a:hover { background-color: #1abc9c;}ul li a:hover:before { border-color: #1abc9c; border-left-color: transparent;}ul li a:hover:after { border-left-color: #1abc9c;}ul li a:active { background-color: #16a085;}ul li a:active:before { border-color: #16a085; border-left-color: transparent;}ul li a:active:after { border-left-color: #16a085;}</style></head><body><ul> <li><a href="#">首页</a></li> <li><a href="#">蚂蚁部落一</a></li> <li><a href="#">蚂蚁部落二</a></li> <li><a href="#">蚂蚁部落三</a></li> <li><a href="#">蚂蚁部落四</a></li> <li><a href="#">蚂蚁部落五</a></li> <li><a href="#">蚂蚁部落六</a></li> <li><a href="#">softwhy.com</a></li></ul></body></html>

  网站建设分类
程序开发 |  系统教程 |  软件应用 |  图形图像 |  网络应用 |  站长教程 |  网站建设 |  视频教程 |  硬件维护 |  IT资讯 |  中国it动力网
本站发布的系统与软件仅为个人学习测试使用,请在下载后24小时内删除,不得用于任何商业用途,否则后果自负,请支持购买微软正版软件!
如侵犯到您的权益,请及时通知我们,我们会及时处理。
Copyright @ 2019 中国it动力网 网站导航