0、效果：
1、html代码：：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>导航栏</title>
<link rel="stylesheet" href="./CSS/全局样式.css">
<link rel="stylesheet" href="./CSS/魅族导航栏.css">
</head>
<body>
<div class="BeiJin">
<div class="daoHang">
<ul>
<li><a href="">手机</a></li>
<li><a href="">MYVU</a></li>
<li><a href="">PANDAER</a></li>
<li><a href="">Flyme</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="">APP下载</a></li>
<li><a href=""><table><input type="text"></table></a></li>
</ul>
</div>
</div>
</body>
</html>
2、CSS代码：
.BeiJin{height: 680px;background-image: url(../图片/2-4.webp);}
.daoHang{width:796.92px;height: 82px;margin: 0 auto;}
.daoHang li{float: left;padding: 31px 20px 30px;font-size: 14px;font-family: Helvetica,Tahoma,Arial,"Hiragino Sans GB","Microsoft YaHei",SimSun,Heiti;}
.daoHang a{color: #fff;}
.daoHang a:hover{color: #008cff;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,legend,input,textarea,button,p,blockquote,th,td{margin:0;padding:0;}
li{list-style-type:none;}
a{text-decoration:none;}
img,input,button{border:none;vertical-align:middle;}
*{font-weight:400;font-style: normal;}
body{text-align: center;}
