欢迎光临散文网 会员登陆 & 注册

01-简单的导航栏（html+css）

2022-10-05 10:01 作者:爱前端的时迁酱  | 我要投稿

《01-简单的导航栏（html+css）》

代码如下：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>简单的导航栏</title>
  8.     <style>
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.       }
  13.       body {
  14.         background-color: #f1b8e4;
  15.         width: 100vw;
  16.         height: 100vh;
  17.       }
  18.       nav{
  19.         position: fixed;
  20.         top: 0;
  21.         left: 0;
  22.         width: 100%;
  23.         height: auto;
  24.         background-color: #fec433;
  25.         display: flex;
  26.         align-items: center;
  27.         justify-content: center;
  28.       }
  29.       .navbody{
  30.         /* border:1px red solid; */
  31.         margin: 0 10px;
  32.         width: 1200px;
  33.         height: 64px;
  34.         display: flex;
  35.         align-items: center;

  37.       }
  38.       img{
  39.         width: 100px;
  40.         height: 50%;
  41.       }
  42.       .navbody > ul{
  43.         display: flex;
  44.         width: calc(100% - 100px);
  45.         height: 100%;
  46.         justify-content: center;
  47.         align-items: center;
  48.       }
  49.       .navbody > ul > li{
  50.         margin: 5px;
  51.         font-weight: 500;
  52.         list-style: none;
  53.         color: aliceblue;
  54.         font-size: 22px;
  55.         height: 100%;
  56.         flex: 1;
  57.         text-align: center;
  58.         line-height: 64px;
  59.         /* 居中 */
  60.         /* transition: all .3s; */
  61.       }
  62.       .navbody > ul > li:hover{
  63.         opacity: 1;
  64.         background-color: #f6b206;
  65.       }
  66.     </style>
  67.   </head>
  68.   <body>
  69.     <nav>
  70.       <div class="navbody">
  71.         <!-- logo -->
  72.         <img src="./img/logo.svg" alt="logo" class="img">
  73.         <ul>
  74.           <li>导航1</li>
  75.           <li>导航2</li>
  76.           <li>导航3</li>
  77.           <li>导航4</li>
  78.           <li>导航5</li>
  79.         </ul>
  80.       </div>
  81.     </nav>
  82.   </body>
  83. </html>


github开源链接：https://github.com/timeshiftsauce/day

预览链接：https://timeshiftsauce.github.io/day/1-DAY.HTML

标签：

01-简单的导航栏（html+css）的评论 (共 条)

分享到微博请遵守国家法律