search

博客列表 >自定义导航条样式

自定义导航条样式

中天行者
中天行者原创
2021年11月12日 00:02:50701浏览
  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>
上一条：使用css浮动完成网页顶部导航下一条：表格table和表单form的使用
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多