导航栏
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width ,initial-scale=1"> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <style> .nav{ background-color: #3a3a3a; height: 65px; } ul{ overflow: hidden; } ul li{ float: left; {# 清除浮动 #} list-style: none; {# 去除li标签前面的小圆点 #} padding: 0 10px; {# li之间的间隔 #} line-height: 65px; {# 居中 #} } ul li a{ color: white; text-decoration:none; {# a 标签的下划线去掉 #} } </style> </head> <body> <div class="nav"> <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> </ul> </div> </body> </html>