CSS3面包屑导航菜单
分类:实例代码
CSS3面包屑导航菜单属于前端实例代码,有关更多实例代码大家可以查看。
本章节分享一段代码实例,它实现了扁平化面包屑导航菜单代码实例。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <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="#">pipipi.net</a></li> </ul> </body> </html>
CSS3面包屑导航菜单,这样的场景在实际项目中还是用的比较多的,关于CSS3面包屑导航菜单就介绍到这了。