点名器效果展示
话不多说,直接上代码!!!
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>点名器</title>
</head>
<style>
*{
margin:0;
padding:0;
}
body{
width:100%;
height:100%;
}
#box{
width:500px;
height:400px;
line-height: 400px;
margin:0 auto;
border:2px solid cyan;
background: black;
}
span{
display: block;
width:100%;
height:80px;
line-height: 80px;
text-align: center;
color:#fff;
font-size: 25px;
}
ul{
width: 100%;
height: 30px;
line-height: 50px;
list-style: none;
display: flex;
}
li{
flex-wrap: wrap;
width: 250px;
height: 30px