css导航

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

weirdo_world

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

阅读量185

点赞数

分类专栏：前端文章标签：导航

本文链接：https://blog.csdn.net/weirdo_world/article/details/82349833

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

css样式

* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: rgb(245, 245, 245);
}

li {
    list-style: none;
}

/*nav*/
.nav {
    background-color: rgba(23, 23, 23, 0.94);
    height: 50px;
}

.nav > .nav_1 {
    position: absolute;
    width: 900px;
    height: 50px;
    margin-left: 500px;
    z-index: 1000;
}

.nav_1 > li {
    float: left;
}

.nav_1 > li {
    font: 16px/50px '微软雅黑';
    width: 80px;
    text-align: center;
}

.nav_2 > li {
    line-height: 35px;
    display: none;
}

.nav_1 > li a:hover {
    color: #fd572e;
    width: 80px;
}

.nav_1 > li:hover .nav_2 > li {
    display: block;
    background-color: rgba(8, 8, 16, 0.83);
}

页面代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>导航</title>
    <link rel="stylesheet" href="js/css.css">
  </head>
  <body>
  <div style="height: 50px;"></div>
  <div class="nav">
    <ul class="nav_1">
      <li><a href="" class="c">首页</a></li>
      <li><a href="">产品</a>
        <ul class="nav_2">
          <li><a href="">产品一</a></li>
          <li><a href="">产品二</a></li>
          <li><a href="">产品三</a></li>
        </ul>
      </li>
      <li><a href="">新闻</a></li>
      <li><a href="">关于</a>
        <ul class="nav_2">
          <li><a href="">简介</a></li>
          <li><a href="">历程</a></li>
        </ul>
      </li>
      <li><a href="">帮助</a></li>
    </ul>
  </div>
  <div style="height: 600px;"></div>
  </body>
</html>

weirdo_world

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css导航

css样式* { margin: 0; padding: 0; border: 0; box-sizing: border-box;}a { text-decoration: none; color: rgb(245, 245, 245);}li { list-style: none;}/*nav*/.nav { ...
复制链接

扫一扫

专栏目录