1个点:
<style> ul{ display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; background: #ccc; } li{ width: 10px; height: 10px; background: #000; border-radius: 50%; } </style> <body> <ul> <li></li> </ul> </body>
2个点:
<style>
.box{
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
width: 60px;
height: 60px;
background: #ccc;
}
.bg{
width: 10px;
height: 10px;
background: #000;
border-radius: 50%;
}
</style>
<body>
<div class="box">
<div class="bg"></div>
<div class="bg"></div>
</div>
</body>
<style>
.box{
display: flex;
flex-direction: column;
justify-content: space-between;
width: 60px;
height: 60px;
background: #ccc;
}
.bg{
width: 10px;
height: 10px;
background: #000;
border-radius: 50%;
}
.bg:last-child{
align-self: flex-end;
}
</style>
<body>
<div class="box">
<div class="bg"></div>
<div class="bg"></div>
</div>
</body>
3个点:
<style>
.box{
display: flex;
flex-direction: column;
justify-content: space-between;
width: 60px;
height: 60px;
background: #ccc;
}
.bg{
width: 10px;
height: 10px;
background: #000;
border-radius: 50%;
}
.bg:nth-child(2){
align-self: center;
}
.bg:nth-child(3){
align-self: flex-end;
}
</style>
<body>
<div class="box">
<div class="bg"></div>
<div class="bg"></div>
<div class="bg"></div>
</div>
</body>
4个点:
<style>
.box{
display: flex;
flex-wrap: wrap;
align-content: space-between;
width: 60px;
height: 60px;
background: #ccc;
}
.cloumn{
display: flex;
justify-content:space-between;
flex-basis: 100%;
}
.bg{
width: 10px;
height: 10px;
background: #000;
border-radius: 50%;
}
</style>
<body>
<div class="box">
<div class="cloumn">
<div class="bg"></div>
<div class="bg"></div>
</div>
<div class="cloumn">
<div class="bg"></div>
<div class="bg"></div>
</div>
</div>
</body>
5个点:
<style>
.box{
display: flex;
flex-wrap: wrap;
align-content: space-between;
width: 60px;
height: 60px;
background: #ccc;
}
.cloumn{
display: flex;
justify-content:space-between;
flex-basis: 100%;
}
.cloumn:nth-child(2){
display: flex;
justify-content: center;
}
.bg{
width: 10px;
height: 10px;
background: #000;
border-radius: 50%;
}
</style>
<body>
<div class="box">
<div class="cloumn">
<div class="bg"></div>
<div class="bg"></div>
</div>
<div class="cloumn">
<div class="bg"></div>
</div>
<div class="cloumn">
<div class="bg"></div>
<div class="bg"></div>
</div>
</div>
</body>
6个点:
<style>
.box{
display: flex;
flex-wrap: wrap;
align-content: space-between;
width: 60px;
height: 60px;
background: #ccc;
}
.cloumn{
display: flex;
justify-content:space-between;
flex-basis: 100%;
}
.bg{
width: 10px;
height: 10px;
background: #000;
border-radius: 50%;
}
</style>
<body>
<div class="box">
<div class="cloumn">
<div class="bg"></div>
<div class="bg"></div>
</div>
<div class="cloumn">
<div class="bg"></div>
<div class="bg"></div>
</div>
<div class="cloumn">
<div class="bg"></div>
<div class="bg"></div>
</div>
</div>
</body>