Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 自定义导航条样式
Blogger Information
Blog 21
fans 0
comment 0
visits 12415
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
自定义导航条样式
中天行者
Original
702 people have browsed it
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>导航</title>
  6.     <style>
  7.         /*去除自带效果*/
  8.         body,nav>ul{
  9.             margin: 0;
  10.             padding: 0;
  11.         }
  12.         body{
  13.             background: #e1dada;
  14.         }
  15.         nav>ul{
  16.             background: white;
  17.         }
  18.         /*定义伸缩盒子*/
  19.         .flex{
  20.             display: flex;
  21.             /*宽度铺满*/
  22.             width: 100%;
  23.             /*最低宽度*/
  24.             min-width: 1024px ;
  25.             height: 70px;
  26.             /*使li分散对齐*/
  27.             Justify-content:space-around;
  28.             /*超出部分隐藏*/
  29.             /*overflow:hidden;*/
  30.         }
  31.         /*去除li前的小点*/
  32.         nav>ul>li{
  33.             list-style-type: none;
  34.             line-height: 70px;
  35.         }
  36.         a{
  37.             /*去除a标签下的样式*/
  38.             text-decoration: none;
  39.             /*设置文字的颜色*/
  40.             color: grey;
  41.         }
  42.         /*设置logo*/
  43.         .logo img{
  44.             height: 70px;
  45.             width: 120px;
  46.         }
  47.         /*一级菜单鼠标悬停效果*/
  48.         nav>ul>li>a:hover{
  49.             color: red;
  50.             background-color: white;
  51.         }
  52.         .erjiul{
  53.             background-color: white;
  54.             width: 200px;
  55.             padding-left: 0;
  56.             /*隐藏二级菜单*/
  57.             display: none;
  58.         }
  59.         .erjiul>li{
  60.             list-style-type: none;
  61.         }
  62.         .erjiul>li>a{
  63.             text-align: left;
  64.             padding-left: 5px;
  65.         }
  66.         /*二级菜单的悬停效果*/
  67.         .erjiul>li>a:hover{
  68.             color: red;
  69.         }
  70.         nav>ul>li:hover>ul{
  71.             /*显示二级菜单*/
  72.             display: block;
  73.         }
  74.         /*输入框的样式*/
  75.         nav>ul>li>form>input{
  76.             border: 1px #e1dada solid;border-radius: 5px;height: 30px;
  77.         }
  78.     </style>
  79. </head>
  80. <body>
  81. <nav>
  82.     <ul class="flex">
  83.         <li class="logo"><span><a href="" ><img src="https://www.php.cn/static/images/PHPlogo.png" alt=""> </a></span></li>
  84.         <li>
  85.             <a href=""> 下载站首页 v </a>
  86.             <ul class="erjiul">
  87.                 <li><a href="">PHP开发编辑器</a></li>
  88.                 <li><a href="">JAVA开发编辑器</a></li>
  89.                 <li><a href="">PYTHON开发编辑器</a></li>
  90.             </ul>
  91.         </li>
  92.         <li>
  93.             <a href=""> JS特效 v </a>
  94.             <ul class="erjiul">
  95.                 <li><a href="">聚焦幻灯</a></li>
  96.                 <li><a href="">图片特效</a></li>
  97.             </ul>
  98.         </li>
  99.         <li><a href=""> 网站源码 v </a></li>
  100.         <li><a href=""> 工具下载 v </a></li>
  101.         <li><a href=""> 手册下载 v </a></li>
  102.         <li>
  103.             <form action="">
  104.                 <input  type="search" placeholder="搜索" onchange="alert(this.value)" name="" id="">
  105.             </form>
  107.         </li>
  109.     </ul>
  110. </nav>
  112. </body>
  113. </html>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post