目录

一、效果展示

二、注意

三、代码

---

一、效果展示

 

二、注意

（1）这个蓝色背景并不是设置了背景颜色，这是背景贴图，并且是高度100px，宽度1px的图片横向重复粘贴

（2）这里面三个文字的祖先元素是li，为了能够横向排版，进行了浮动，为防止高度塌陷，外联了css文件，这里需要注意，不然代码会出问题

-至于高度塌陷，请参考这篇文章：

https://blog.csdn.net/comegoing_xin_lv/article/details/126086973?spm=1001.2014.3001.5501

（3）至于动漫导航条的图片，自己截图

-这里是链接：

http://qiqidm8.com/

三、代码

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>