一个小案例------垃圾分类
首先是style样式
<style>
*{
margin: 0px;
padding: 0px;
list-style: none;
}
.box{
display: flex;
height: 100vh;
}
.left{
width: 200px;
}
.right{
flex: 1;
}
.left,.right{
border: 1px solid;
}
#ul>li{
width: 100%;
height: 25px;
margin-top: 5px;
background-color: aqua;
text-align: center;
line-height: 25px;
}
#ul>.li1{
background-color: aquamarine;
}
#divs>div{
display: none;
}
#divs>.div1{
display: block;
}
#form{
display: flex;
}
</style>
Html结构
<body>
<div class="box">
<div class="left">
<ul id="ul">
<li class="li1">首页</li>
<li>录入</li>
<li>表格展示</li>
</ul>
</div>
<div class="right">
<div id="divs">
<div class="div1">首页</div>
<div>
<form id="form">
<div>
<label for="user">垃圾</label>
<input type=