目录
一、效果展示
二、注意
（1）这个蓝色背景并不是设置了背景颜色，这是背景贴图，并且是高度100px，宽度1px的图片横向重复粘贴
（2）这里面三个文字的祖先元素是li，为了能够横向排版，进行了浮动，为防止高度塌陷，外联了css文件，这里需要注意，不然代码会出问题
-至于高度塌陷，请参考这篇文章：
https://blog.csdn.net/comegoing_xin_lv/article/details/126086973?spm=1001.2014.3001.5501
（3）至于动漫导航条的图片，自己截图
-这里是链接：
扫描二维码关注公众号，回复：
14474404 查看本文章
三、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>背景导航条</title>
<link rel="stylesheet" href="../src/clearfix.css" />
<style>
/* 设置背景元素 */
.background {
/* 贴入1像素图片 */
background-image: url("../src/img_exercise/qiqidongman.png");
/* 设置元素大小 */
height: 100px;
width: 300px;
/* x轴重复贴图 */
background-repeat: repeat-x;
/* 背景元素居中 */
margin: 0px auto;
}
/* 设置大列表 */
ul.clearfix {
/* 取消padding */
padding: 0px;
/* ul居中 */
margin: 0px auto;
/* 强制大小 */
width: 240px;
height: 100px;
}
/* 去除小圆点 */
li {
list-style: none;
}
/* 列表元素浮动，横向排版 */
.list {
float: left;
}
/* 设置列表中链接 */
.list a {
/* 文字垂直居中 */
line-height: 100px;
/* 文字水平居中 */
text-align: center;
/* 设置颜色 */
color: white;
/* 去除下划线 */
text-decoration: none;
/* 设置大小，先更改属性 */
display: inline-block;
width: 80px;
}
.list a:hover {
/* 鼠标移入后变色 */
background-color: white;
color: #08d;
}
</style>
</head>
<body>
<div class="background">
<ul class="clearfix">
<li class="list">
<a href="javasrcipt:;">首页</a>
</li>
<li class="list">
<a href="javasrcipt:;">电影</a>
</li>
<li class="list">
<a href="javasrcipt:;">电视剧</a>
</li>
</ul>
</div>
</body>
</html>