使用UL和LI来完成菜单
Posted zijiang-4476
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用UL和LI来完成菜单相关的知识，希望对你有一定的参考价值。
代码如下
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用ul和li来完成菜单</title> <style> .menu{ width: 693px; height: 50px; background-color: cyan; /*list-style:none去掉小圆点*/ list-style: none; margin: 50px auto 0; padding: 0; } .menu li{ width: 98px; height:50px; /*display: inline-block;*/ float: left; border: 1px solid gold; background-color: #fff; font-size:16px; margin-left: -1px; } .menu li a{ /*background-color: gold; */ display: block; width: 98px; height: 50px; text-align: center; line-height: 50px; color: pink; text-decoration: none; font-size:20px; font-family: ‘microsoft yahei‘; } .menu li a:hover{ background-color: skyblue; color: #fff; } </style> </head> <body> <ul class="menu"> <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> </ul> </body> </html>
执行效果图
以上是关于使用UL和LI来完成菜单的主要内容，如果未能解决你的问题，请参考以下文章