Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 弹性布局和下拉列表
Blogger Information
Blog 7
fans 0
comment 1
visits 3619
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
567 people have browsed it
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.       /*去除自带效果*/
  11.       body,nav>ul{
  12.             margin:0;
  13.             padding: 0;
  14.         }
  15.          /*去除li前的小点*/
  16.          nav>ul>li>ul>li{
  17.             list-style-type: none;
  18.             /* line-height: 70px; */
  19.             color: blueviolet;
  20.         }
  21.         nav>ul>li>ul>li{
  23.             border-bottom:1px solid rgb(245, 245, 245);
  24.             width: 120px;
  25.         }
  26.         a{
  27.             /*去除a标签下的样式*/
  28.             text-decoration: none;
  29.             /*设置文字的颜色*/
  30.             color: grey;
  31.             /* a是行内元素，要用宽度得转成块级元素 */
  32.            display:block;
  33.            text-align: center;
  34.            width:120px;
  36.         }
  37.          /*设置logo*/
  38.          .tupian img{
  39.             height: 50px;
  40.             width: 120px;
  41.         }
  42.        .daohang{
  43.            background: #74cdf0;
  44.             display: flex;
  45.             /*宽度铺满*/
  46.             width: 100%;
  47.             /*最低宽度*/
  48.             min-width: 1024px ;
  49.             height: 50px;
  50.             /*使li分散对齐*/
  51.             Justify-content:space-around;
  52.             /*超出部分隐藏*/
  53.             /*overflow:hidden;*/
  54.             list-style-type: none;
  55.             /* align-items: center; */
  56.             /* height:50px; */
  57.              line-height:50px;
  58.               /* 固定高度的设置行高， 文字在行中间。 
  59.               变高的padding-top:20px; padding-bottom:20px; 设置边距 */
  60.         }
  61.         .neirong{
  62.             background-color: rgb(189, 234, 255);
  64.             padding-left: 0;
  65.             /*隐藏二级菜单*/
  66.             display: none;
  67.         }
  68.         .liebiao{
  69.             background-color: rgb(189, 234, 255);
  71.             padding-left: 0;
  72.             /*隐藏二级菜单*/
  74.         }
  75.         nav>ul>li:hover>ul{
  76.             /*显示二级菜单*/
  77.             display: block;
  79.         }
  81.          /*一级级菜单鼠标悬停效果*/
  82.         nav>ul>li:hover{
  84.             background-color: rgb(255, 253, 136);
  85.         }
  86.               /*二级级菜单鼠标悬停效果*/
  87.               .neirong>li>a:hover{
  89.             background-color: rgb(138, 255, 187);
  90.         }
  91.      /* 一二级菜单鼠标悬停效果
  92.         nav>ul>li:hover,nav>ul>li>ul>li:hover {
  93.             background: #e2ff94;
  94.         }
  95.         */
  96.         /*输入框的样式*/
  97.         nav>ul>li>form>input{
  98.             border: 1px #8ffff9 solid;border-radius: 5px;height: 30px;
  99.         }
  100.     </style>
  101. </head>
  102. <body>
  103.     <nav>
  104. <ul class="daohang">
  105.     <li class="tupian"><span><a href="">
  106.         <img src=
  107.         "http://d300.paixin.com/thumbs/1028599/3836308/staff_1024.jpg"
  108.         alt=""></a></span></li>
  110.   <li>
  111.       <a href="">文章类</a>
  112.       <ul class="neirong">
  113.           <li><a class="liebiao" href="">2</a></li>
  114.           <li><a class="liebiao" href="">2</a></li>
  115.           <li><a class="liebiao" href="">2</a></li>
  116.           <li><a class="liebiao" href="">2</a></li>
  117.     </ul>
  118.   </li>
  122.   <li>
  123.     <a href="">视频类</a>
  124.     <ul class="neirong">
  125.         <li><a href=""></a>1</li>
  126.         <li><a href=""></a>1</li>
  127.         <li><a href=""></a>1</li>
  128.         <li><a href=""></a>1</li>
  129.   </ul>
  130. </li>
  133. <li>
  134.     <a href="">音频类</a>
  135.     <ul class="neirong">
  136.         <li><a href=""></a>1</li>
  137.         <li><a href=""></a>1</li>
  138.         <li><a href=""></a>1</li>
  139.         <li><a href=""></a>1</li>
  140.   </ul>
  141. </li>
  142. <li>
  143. <form action="">
  144.     <input  type="search" placeholder="搜索" onchange="alert(this.value)" name="" id="">
  145. </form>
  146. </li>
  147. </ul>
  148. </nav>
  149. </body>
  150. </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