ASCII码 ASCII码

导航栏练习

发布于：2022-05-10 11:49:52  栏目：技术文档

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>导航栏</title>
  6.     <style>
  7.         .nav{
  8.             border:1px solid red;
  9.             width: 974px;
  10.             height: 38px;
  11.             background-color: #A10000;
  12.         }
  13.         ul{
  14.             padding: 0px;
  15.             height: 38px;
  16.             margin-top: 2px;
  17.             margin-left: 2px;
  18.         }
  19.         a{
  20.             text-decoration: none;
  21.             font-weight: bold;
  22.             color: white;
  23.         }
  24.         li{
  25.             list-style: none;
  26.             height: 38px;
  27.             line-height: 38px;
  28.             text-align: center;
  29.         }
  30.         .one{
  31.             width: 88px;
  32.         }
  33.         .two{
  34.             width: 88px;
  35.             position: relative;
  36.             top:-38px;
  37.             left:88px;
  38.         }
  39.         .three{
  40.             width: 88px;
  41.             position: relative;
  42.             top:-76px;
  43.             left:176px;
  44.         }
  45.         .four{
  46.             width: 102px;
  47.             position: relative;
  48.             top:-114px;
  49.             left:278px;
  50.         }
  51.         .five{
  52.             width: 116px;
  53.             position: relative;
  54.             top:-152px;
  55.             left:394px;
  56.         }
  57.         .six{
  58.             width: 116px;
  59.             position: relative;
  60.             top:-190px;
  61.             left:510px;
  62.         }
  63.         .seven{
  64.             width: 116px;
  65.             position: relative;
  66.             top:-228px;
  67.             left:626px;
  68.         }
  69.         li:hover{
  70.             background-color: white;
  71.         }
  72.         li:hover a{
  73.             color: #A10000;
  74.         }
  75.     </style>
  76. </head>
  77. <body>
  78. <div class="nav">
  79.     <ul>
  80.         <li class="one">
  81.             <a href="">首页</a>
  82.         </li>
  83.         <li class="two">
  84.             <a href="">前沿</a>
  85.         </li>
  86.         <li class="three">
  87.             <a href="">前端</a>
  88.         </li>
  89.         <li class="four">
  90.             <a href="">后端</a>
  91.         </li>
  92.         <li class="five">
  93.             <a href="">云计算</a>
  94.         </li>
  95.         <li class="six">
  96.             <a href="">产品设计</a>
  97.         </li>
  98.         <li class="seven">
  99.             <a href="">联系我们</a>
  100.         </li>
  101.     </ul>
  102. </div>
  103. </body>
  104. </html>
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行