html 之一个简单的导航栏

最新推荐文章于 2024-05-19 09:58:49 发布

debby004

最新推荐文章于 2024-05-19 09:58:49 发布

阅读量1.8k

点赞数 4

分类专栏： html

本文链接：https://blog.csdn.net/qq_41370724/article/details/102736293

版权

html 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

仅仅只是模仿淘宝的导航栏而已

效果图如下：

简单介绍一下：

两个div，子元素的div居中显示，鼠标浮动上去会改变字体的颜色和背景图

完整代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style type="text/css">
  * {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
  }

  .red {
    background-color: pink;
    height: 50px;
    opacity: 0.6;
  }

  .wheat {
    height: 50px;
    width: 1200px;
    background-color: wheat;
    margin: 0 auto;
  }

  .wheat::after {
    content: "";
    display: block;
    clear: both;
  }

  .wheat ul {
    list-style: none;
  }

  .wheat ul li {
    float: left;
    margin: 0 20px;
    font-size: 25px;
    line-height: 50px;
  }

  .wheat ul li a {
    text-decoration: none;
    display: inline-block;
    color: tomato;
    padding: 0 15px;
  }

  .wheat ul li a:hover {
    background-color: orangered;
    color: white;
    border-radius: 15px;
  }
</style>

<body>
  <div class="red">
    <div class="wheat">
      <ul>
        <li class="item"><a href="#">天猫</a></li>
        <li class="item"><a href="#">聚划算</a></li>
        <li class="item"><a href="#">双十一</a></li>
        <li class="item"><a href="#">儿童节</a></li>
      </ul>
    </div>
  </div>
</body>

</html>

debby004

关注

4
点赞
踩
27

收藏

觉得还不错? 一键收藏
0
评论
html 之一个简单的导航栏

仅仅只是模仿淘宝的导航栏而已效果图如下：简单介绍一下：两个div，子元素的div居中显示，鼠标浮动上去会改变字体的颜色和背景图完整代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="view...
复制链接

扫一扫