如果学过面向对象编程的语言,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;
}