导航栏是位于页面顶部或者侧边区域的,在页眉横幅图片上边或下边的一排水平导航按钮,起着链接站点或者软件内的各个页面的作用。
关于位于页面顶部的导航栏究竟是如何实现的,希望下面的代码可以对朋友们有帮助。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>书香之家</title> <style type="text/css"> * { margin: 0; padding: 0; } #menu { position: relative; background-color:#dcc9c1; width: 100%; height: 60px; } .logo { color: #0c0c01; display: inline-block; line-height: 58px; position: absolute; padding: 20 40px; font-family:"仿宋"; font-weight: bold; } ul { list-style: none; display: inline-block; padding-left: 140px; } ul li { line-height: 60px; text-align: center; position: relative; float: left; } a { text-decoration: none; color: rgb(13, 6, 6); display: block; padding: 0 20px; white-space: nowrap; font-family:"仿宋"; font-weight: bold; } a:hover { color: #FFF; background-color: #ccc; } ul li ul li { float: none; margin-top: 2px; background-color: #dcc9c1; } ul li ul li a:hover { color: #FFF; background-color: #ccc; } ul li ul { position: absolute; left: 0; top: 60px; display: none; padding-left: 0; } ul li:hover ul { display: block; } </style> </head> <body> <div id="menu"> <div class="logo"> <p style="font-size: 20px;">📕 书香之家</p> </div> <ul > <li><a href="#">首页</a></li> <li><a href="#">门店服务</a> <ul> <li><a href="#">服务流程</a></li> <li><a href="#">开店时间</a></li> </ul> </li> <li><a href="#">预约中心</a> <ul> <li><a href="#">新华路店</a></li> <li><a href="#">正义路店</a></li> <li><a href="#">平安路店</a></li> </ul> </li> <li><a href="#">馆内指南</a> <ul> <li><a href="#">新华路店</a></li> <li><a href="#">正义路店</a></li> <li><a href="#">平安路店</a></li> </ul> </li> <li><a href="#">好书推荐</a> <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> </ul> </li> <li><a href="#">关于我们</a> <ul> <li><a href="#">书店简介</a></li> <li><a href="#">店内详情</a></li> <li><a href="#">联系我们</a></li> </ul> </li> </ul> </div> </body> </html>
效果展示
来源:https://www.huanp.com/wangzhan/141416.html
声明:欢迎分享本文,转载请保留出处!
声明:欢迎分享本文,转载请保留出处!