我们做一个简易的选项卡,但是适用所有的选项卡(自改),首先我们来先把页面基本样式写好
<ul>
<li class="active">周一</li>
<li>周三</li>
<li>周五</li>
</ul>
<div class="box1 block">医务科</div>
<div class="box2">警卫科</div>
<div class="box3">教育科</div>
下面是页面的基础css,user-select:none;可以禁止选中文字。
* {
margin: 0;
padding: 0;
}
.box1 {
width: 300px;
height: 300px;
background-color: #bfa;
}
.box2 {
width: 300px;
height: 300px;
background-color: orange;
}
.box3 {
width: 300px;
height: 300px;
background-color: skyblue;
}
li {
list-style: none;
display: inline-block;
width: 97px;
height: 50px;
text-align: center;
line-height: 50px;
background-color: pink;
cursor: pointer;
/* 无法选中文字 */
u