css进阶项目3

下拉框

　下拉框所在的 ul 都放在 id 为 navbar 的一个 nav 标签里。每一个 li 都对应一个一级菜单，第三个和第四个 li 里面嵌套一个 ul，这个 ul 里的 li 就是二级菜单。nav 下面用一个 header 包裹内容。

复制代码
<!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">
  <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.1.0/css/all.css" rel="stylesheet">
  <link rel="stylesheet" href="./style.css">
  <title>Document</title>
</head>

<body>
  <nav id="navbar">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li>Services <i class="fas fa-angle-down"></i>
        <ul>
          <li><a href="#">Web Development</a></li>
          <li><a href="#">Website Design</a></li>
          <li><a href="#">Mobile Development</a></li>
          <li><a href="#">SEO</a></li>
        </ul>
      </li>
      <li>Blog <i class="fas fa-angle-down"></i>
        <ul>
          <li><a href="#">HTML</a><span>22 Posts</span></li>
          <li><a href="#">CSS</a><span>16 Posts</span></li>
          <li><a href="#">JavaScript</a><span>10 Posts</span></li>
          <li><a href="#">Python</a><span>13 Posts</span></li>
          <li><a href="#">PHP</a><span>10 Posts</span></li>
          <li><a href="#">Design</a><span>21 Posts</span></li>
        </ul>
      </li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <header id="showcase">
    <h1>欢迎来到欧青拉少</h1>
  </header>
</body>

</html>
复制代码

样式

　　让一级菜单变为行内块元素，并添加相对定位。让二级菜单隐藏，给一级菜单添加 hover 让二级菜单显示。给二级菜单添加 hover 让二级菜单显示背景色，让 span 的背景色变浅一点。给下面的内容设置成弹性布局，让内容水平、垂直居中，并让文字居中。添加媒体查询，当宽度小于 600px 时将一级菜单改为块级元素，给一级菜单的 hover 改为宽百分百、定位改成相对定位。

复制代码
:root{
  --primary-color: cyan;
  --secondary-color: rgba(0,255,255,0.5);
}

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  transition: .3s;
}

html,body{
  background-color: #f4f4f4;
  font-family: Arial, Helvetica, sans-serif;
}

#navbar ul{
  list-style: none;
}

#navbar ul li{
  color: #333;
  display: inline-block;
  padding: 1rem;
  position: relative;
}

#navbar ul li a{
  color: #333;
  text-decoration: none;
}

#navbar ul li ul{
  display: none;
}

#navbar ul li:hover{
  cursor: pointer;
  background: var(--primary-color);
  color: #FFF;
}
#navbar ul li:hover a{
  color: #FFF;
}

#navbar ul li:hover ul{
  display: block;
  position: absolute;
  left: 0;
  width: 200px;
  margin-top: 1rem;
}

#navbar ul li:hover ul li{
  display: block;
  background-color: #e7e7e7;
}

#navbar ul li:hover ul li a{
  color: #333;
}

#navbar ul li:hover ul li:hover{
  background-color: #e0e0e0;
}

#navbar ul li:hover ul li span{
  float: right;
  color: #fff;
  background-color: var(--primary-color);
  padding: .2rem .5rem;
  text-align: center;
  font-size: 0.8rem;
  border-radius: 5px;
}

#navbar ul li:hover ul li:hover span{
  background: var(--secondary-color);
}

#showcase{
  display: flex;
  flex-direction: column;
  height: 300px;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: .2rem;
  background: cyan;
}

#showcase h1{
  color: #FFF;
  font-size: 4rem;
}

@media (max-width:600px) {
  #navbar ul li{
    display: block;
  }
  #navbar ul li:hover ul{
    width: 100%;
    position: relative;
  }
}
复制代码

 

posted @   守鹤  阅读(80)  评论(0)  编辑  收藏  举报
相关博文：
· css进阶项目2
· css进阶项目1
· 进阶实战 下拉菜单栏
· 请使用css写一个多级的下拉菜单
· JQuery 入门 - 附案例代码
阅读排行：
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
点击右上角即可分享
微信分享提示