弹性布局和下拉列表


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      /*去除自带效果*/
      body,nav>ul{
            margin:0;
            padding: 0;
        }
         /*去除li前的小点*/
         nav>ul>li>ul>li{
            list-style-type: none;
            /* line-height: 70px; */
            color: blueviolet;
        }
        nav>ul>li>ul>li{
            border-bottom:1px solid rgb(245, 245, 245);
            width: 120px;
        }
        a{
            /*去除a标签下的样式*/
            text-decoration: none;
            /*设置文字的颜色*/
            color: grey;
            /* a是行内元素，要用宽度得转成块级元素 */
           display:block;
           text-align: center;
           width:120px;
        }
         /*设置logo*/
         .tupian img{
            height: 50px;
            width: 120px;
        }
       .daohang{
           background: #74cdf0;
            display: flex;
            /*宽度铺满*/
            width: 100%;
            /*最低宽度*/
            min-width: 1024px ;
            height: 50px;
            /*使li分散对齐*/
            Justify-content:space-around;
            /*超出部分隐藏*/
            /*overflow:hidden;*/
            list-style-type: none;
            /* align-items: center; */
            /* height:50px; */
             line-height:50px;
              /* 固定高度的设置行高， 文字在行中间。 
              变高的padding-top:20px; padding-bottom:20px; 设置边距 */
        }
        .neirong{
            background-color: rgb(189, 234, 255);
            padding-left: 0;
            /*隐藏二级菜单*/
            display: none;
        }
        .liebiao{
            background-color: rgb(189, 234, 255);
            padding-left: 0;
            /*隐藏二级菜单*/
        }
        nav>ul>li:hover>ul{
            /*显示二级菜单*/
            display: block;
        }
         /*一级级菜单鼠标悬停效果*/
        nav>ul>li:hover{
            background-color: rgb(255, 253, 136);
        }
              /*二级级菜单鼠标悬停效果*/
              .neirong>li>a:hover{
            background-color: rgb(138, 255, 187);
        }
     /* 一二级菜单鼠标悬停效果
        nav>ul>li:hover,nav>ul>li>ul>li:hover {
            background: #e2ff94;
        }
        */
        /*输入框的样式*/
        nav>ul>li>form>input{
            border: 1px #8ffff9 solid;border-radius: 5px;height: 30px;
        }
    </style>
</head>
<body>
    <nav>
<ul class="daohang">
    <li class="tupian"><span><a href="">
        <img src=
        "http://d300.paixin.com/thumbs/1028599/3836308/staff_1024.jpg"
        alt=""></a></span></li>
  <li>
      <a href="">文章类</a>
      <ul class="neirong">
          <li><a class="liebiao" href="">2</a></li>
          <li><a class="liebiao" href="">2</a></li>
          <li><a class="liebiao" href="">2</a></li>
          <li><a class="liebiao" href="">2</a></li>
    </ul>
  </li>
  <li>
    <a href="">视频类</a>
    <ul class="neirong">
        <li><a href=""></a>1</li>
        <li><a href=""></a>1</li>
        <li><a href=""></a>1</li>
        <li><a href=""></a>1</li>
  </ul>
</li>
<li>
    <a href="">音频类</a>
    <ul class="neirong">
        <li><a href=""></a>1</li>
        <li><a href=""></a>1</li>
        <li><a href=""></a>1</li>
        <li><a href=""></a>1</li>
  </ul>
</li>
<li>
<form action="">
    <input  type="search" placeholder="搜索" onchange="alert(this.value)" name="" id="">
</form>
</li>
</ul>
</nav>
</body>
</html>
更多相关文章

随机推荐
