html-css源代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航栏</title>
<style>
body{
background-image: url("../01.html/07 表单标签/背景.jpg");
background-position: 50%;
}
div{
width: 700px;
height: 60px;
/* 外边距 */
margin: 400px auto;
/* 背景颜色 */
background-color: rgb(153, 153, 217);
border-radius: 50px;
box-shadow: 10px 10px 10px rgb(200, 160, 160);
/* 设置内边距 */
padding: 0 20px;
}
li{
font-size: 20px;
/* 列表样式 */
list-style-type: none;
color: white;
/* 字体之间的距离 */
margin: 10px 50px 10px 40px;
/* 边框样式 inset 镶嵌式 */
border-style:inset;
border-radius: 10px;
border-color: rgb(57, 138, 210);
box-shadow: 5px 5px 5px white;
display: inline-block;
}
li a{
text-decoration: none;
/* float: left; */
}
a{
font-family: 楷体;
}
li:hover{
background-color: rgb(101, 94, 159);
}
</style>
</head>
<body>
<div>
<li><a href="#华为">华为</a></li>
<li><a href="鸿蒙智行">鸿蒙智行</a></li>
<li><a href="华为智选">华为智选</a></li>
<li><a href="生态周边">生态周边</a></li>
</div>
</body>
</html>
效果图:
![](https://i-blog.csdnimg.cn/blog_migrate/257b2c946a3c1adad5adfb0a75cbec5e.png)