search

博客列表 >作业-导航菜单

作业-导航菜单

晓文
晓文原创
2022年05月07日 23:04:30351浏览
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>导航菜单</title>
  6.     <style>
  7.         body{
  8.             padding: 10px 0 10px 0; margin:0;
  9.         }
  10.         nav,ul,li,a{
  11.             padding:0; margin: 0;
  12.         }
  13.         nav{
  14.             width:1200px; height: 40px; margin: 0 auto; background-color: #E60012;
  15.             padding-left: 1px;
  16.         }
  17.         nav > ul > li{
  18.             list-style: none; font-size: 14px;
  19.             float:left; padding: 9px 30px 10px 30px;
  20.             margin-top:1px;
  21.             position: relative;
  22.         }
  23.         nav > ul > li > a{
  24.             color:#FFF; text-decoration: none;
  25.         }
  26.         nav > ul > li > span{
  27.             display: block; width: 1px; height: 20px; position: absolute; right: 1px; top: 10px; background-color: #CF0010;
  28.         }
  29.         nav > ul > li:last-child > span{
  30.             display:none;
  31.         }
  32.         nav > ul > li:hover{
  33.             background-color: #FFF;
  34.         }
  35.         nav > ul > li:hover > a{
  36.             color: #333;
  37.         }
  38.         nav > ul > li:hover > span{
  39.             display:none;
  40.         }
  41.     </style>
  42. </head>
  43. <body>
  44.     <nav>
  45.         <ul>
  46.             <li>
  47.                 <a href="">首页</a>
  48.                 <span></span>
  49.             </li>
  50.             <li>
  51.                 <a href="">前沿</a>
  52.                 <span></span>
  53.             </li>
  54.             <li>
  55.                 <a href="">前端</a>
  56.                 <span></span>
  57.             </li>
  58.             <li>
  59.                 <a href="">后端</a>
  60.                 <span></span>
  61.             </li>
  62.             <li>
  63.                 <a href="">云计算</a>
  64.                 <span></span>
  65.             </li>
  66.             <li>
  67.                 <a href="">产品设计</a>
  68.                 <span></span>
  69.             </li>
  70.             <li>
  71.                 <a href="">关于我们</a>
  72.                 <span></span>
  73.             </li>
  74.         </ul>
  75.     </nav>
  76. </body>
  77. </html>
上一条：作业-个人简历下一条：作业-九宫格
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议