前端基础之状态栏的转换

最新推荐文章于 2024-05-24 23:45:01 发布

京都小白

最新推荐文章于 2024-05-24 23:45:01 发布

阅读量128

点赞数

分类专栏：前端文章标签：前端 css html

本文链接：https://blog.csdn.net/m0_53602804/article/details/128785480

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

如果学过面向对象编程的语言，JS语法很简单，只是CSS布局的时候方式有很多种，有的时候比较乱，这次是进行了状态栏转换的练习，当float时布局要采用相对布局，不能采用绝对布局，这一点要注意，依然是记录自己的代码，以后用得到的时候可以拿来看。

<!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>
  <link rel="stylesheet" href="style.css"> 
</head>
<body>
 <ul class="bigbox">
  <li>
    <span>画面</span>
    <ul>
      <li>
        <span>画面一</span>
      </li>
      <li>
        <span>画面二</span>
      </li>
    </ul>
  </li>
  <li>
    <span>记忆</span>
    <ul>
    <li>
      <span>记忆一</span>
    </li>
    <li>
      <span>记忆二</span>
    </li>
    </ul>
  </li>
   <li>
    <span>想象</span>
    <ul> 
      <li>
      <span>想象一</span>
      </li>
      <li>
      <span>想象二</span>
      </li>
    </ul>

  </li>
 </ul>
  <script src="style.js"></script> 
</body>
</html>

var bigbox = document.querySelector('.bigbox');
var lis = bigbox.children;//得到4个li
for(var i=0;i<lis.length;i++){
    lis[i].onmouseover = function(){
        this.children[1].style.display="block";
    }
    lis[i].onmouseout = function(){
        this.children[1].style.display="none";
    }
}

*{
    margin:0;
    padding:0;
}
li{
    list-style: none;
}

.bigbox{
    position: absolute;
    left:45%;
    top:40%;
}
.bigbox>li{
    float:left;
    position:relative;
    width:80px;
    height:21px;
    text-align: center; 
    background-color: bisque;  
}
.bigbox li span{
    display:block;
}
.bigbox li span:hover{
    color:brown;
}
.bigbox ul{
display: none;
position: relative;
left:0;
width:100%;
border-left: 1px solid #FECC58;
border-right: 1px solid #FECC58;
}
.bigbox ul li{
    border-bottom: 1px solid #FECC58;
}
.bigbox ul li span:hover{
    background-color: aqua;
}