二级菜单菜单设置与下拉框

最新推荐文章于 2022-12-28 16:53:44 发布

六行代码

最新推荐文章于 2022-12-28 16:53:44 发布

阅读量194

点赞数

文章标签： java html 服务器

本文链接：https://blog.csdn.net/m0_55751104/article/details/127425045

版权

设置表单都在同一行

一个盒子的组成是由内容+border+padding组成

要想实现表单的内容都在同一行，要考虑代码里宽和边框的距离问题，就如同下面的

width: 150px; 

border: 1px solid blue;

就可以实现内容都在同一行，因为左右两边都有1厘米，相加起来刚好可以满足150的宽度。

width: 148px; 

border: 1px solid blue;

菜单栏的颜色变化

当鼠标移动到某一个菜单栏上时，菜单栏的颜色也随着发着变化。

  .box .item{
      float:left;
      width: 148px;
      text-align: center;
      border: 1px solid blue;
      background: blue;
      line-height: 40px;
      color: black;
    }

    .item:hover{

       background: lightcoral;
       /* 这里对菜单进行调用，随着指针移动改变颜色 */
    }

<!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>
    *{
      margin: 0;
      padding: 0;
    }
    .box{
      width: 300px;  
      /* 这里的宽度要和盒子的宽度成倍数关系，比如150*2等于300，如果用200，两个表单之间会呈现上下排列，
      而不是在同一行上。 */
      margin: 0 auto;
    }
    ul{
      list-style: none;   
      /* 可以消掉每列前面的点 */
    }

    .box .item{
      float:left;
      width: 148px;
      text-align: center;
      border:1px solid blue;
      background: blue;
      line-height: 40px;
      color: black;
    }

    .item:hover{

       background: lightcoral;
       /* 这里对菜单进行调用，随着指针移动改变颜色 */
    }

    .item ul {
      display: none ;
      background: rgb(111, 216, 13);
      color: aqua;
      /* 这里让下拉框里内容在指针没有移动到的时候不显示，设置下拉框内容的颜色 */
    }
    .item:hover ul{
      display: block;
      /* 这里设置在指针移动到表单上时，下拉框的内会出现 */
    }
    .item li:hover {
      color: rgb(231, 21, 144);
      /* 让下拉框里的文字被指针指到的时候，颜色发生变化 */
    }

  </style>

</head>
<body>
      <ul class="box">
        <li  class="item">视频教程
           <ul>
              <li>全部视频教程</li>
              <li>html视频教程</li>
              <li>java视频教程</li>
              <li>pathon视频教程</li>
              <!-- 这里表单里的下拉框的内容 -->
           </ul>
        </li>
        <li  class="item">认证考试
          <ul>
              <li>pmp</li>
              <li>红帽</li>
          </ul>
        </li>
            


      </ul>


</body>
</html>

第二种css的写法，就是采用>和空格，对子代和后代选择器，进行调用

<!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>
    *{
      margin: 0;
      padding: 0;
    }
    .box{
      width: 300px;  
      /* 这里的宽度要和盒子的宽度成倍数关系，比如150*2等于300，如果用200，两个表单之间会呈现上下排列，
      而不是在同一行上。 */
      margin: 0 auto;
    }
    ul{
      list-style: none;   
      /* 可以消掉每列前面的点 */
    }

    .box>li{
      float:left;
      width: 148px;
      text-align: center;
      border:1px solid blue;
      background: blue;
      line-height: 40px;
      color: black;
    }

    .box>li:hover{
       background: lightcoral;
       /* 这里对菜单进行调用，随着指针移动改变颜色 */
    }

    .box>li>ul{
      display: none ;
      background: rgb(111, 216, 13);
      color: aqua;
      /* 这里让下拉框里内容在指针没有移动到的时候不显示，设置下拉框内容的颜色 */
    }
    .box>li:hover ul{
      display: block;
      /* 这里设置在指针移动到表单上时，下拉框的内会出现 */
    }
    .box>li li:hover {
      color: rgb(231, 21, 144);
      /* 让下拉框里的文字被指针指到的时候，颜色发生变化 */
    }

    /* >后面是子代选择器，空格后面是后代选择器 */
  </style>

</head>
<body>
      <ul class="box">
        <li  class="item">视频教程
           <ul>
              <li>全部视频教程</li>
              <li>html视频教程</li>
              <li>java视频教程</li>
              <li>pathon视频教程</li>
              <!-- 这里表单里的下拉框的内容 -->
           </ul>
        </li>
        <li  class="item">认证考试
          <ul>
              <li>pmp</li>
              <li>红帽</li>
          </ul>
        </li>
            


      </ul>


</body>
</html>