实物图
效果图
具体代码落地(一饼)
<style>
*{
padding: 0;
list-style: none;
}
ul{
display: flex;
justify-content: center;
align-items: center;
width: 80px;
height: 100px;
border-radius: 5px;
background-color: #e5e7df;
}
ul li {
width: 35px;
height: 35px;
border-radius: 50%;
background-color: #13421c;
}
</style>
<body>
<ul>
<li></li>
</ul>
</body>
具体代码落地(二饼)
<style>
*{
padding: 0;
list-style: none;
}
ul{
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
width: 80px;
height: 100px;
border-radius: 5px;
background-color: #e5e7df;
}
ul li {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #13421c;
}
</style>
<body>
<ul>
<li></li>
<li></li>
</ul>
</body>
具体代码落地(三饼)
<style>
*{
padding: 0;
list-style: none;
}
ul{
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 5px;
width: 80px;
height: 100px;
border-radius: 5px;
background-color: #e5e7df;
}
ul li {
width: 25px;
height: 25px;
border-radius: 50%;
background-color: #13421c;
}
ul .two{
align-self: center;
background-color: #7f2f2f;
}
ul .three{
align-self:flex-end;
background-color: #212421;
}
</style>
<body>
<ul>
<li></li>
<li class="two"></li>
<li class="three"></li>
</ul>
</body>
具体代码落地(四饼)
<style>
*{
padding: 0;
list-style: none;
}
ul{
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 5px;
width: 80px;
height: 100px;
border-radius: 5px;
background-color: #e5e7df;
}
ul li {
width: 25px;
height: 25px;
border-radius: 50%;
margin:7px;
background-color: #13421c;
}
ul .two{
background-color: #212421;
}
ul .three{
background-color: #212421;
}
</style>
<body>
<ul>
<li></li>
<li class="two"></li>
<li class="three"></li>
<li></li>
</ul>
</body>
具体代码落地(五饼)
<style>
*{
padding: 0;
list-style: none;
}
ul{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
padding: 5px;
width: 80px;
height: 100px;
border-radius: 5px;
background-color: #e5e7df;
}
ul li {
width: 26px;
height: 26px;
border-radius: 50%;
margin:7px;
background-color: #13421c;
}
ul .two{
background-color: #212421;
}
ul .three{
background-color:#7f2f2f ;
margin: 0 25px;
}
ul .four{
background-color: #212421;
}
</style>
<body>
<ul>
<li></li>
<li class="two"></li>
<li class="three"></li>
<li class="four"></li>
<li class="five"></li>
</ul>
</body>
具体代码落地(六饼)
<style>
*{
padding: 0;
list-style: none;
box-sizing: border-box;
}
ul{
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 10px;
width: 80px;
height: 100px;
border-radius: 5px;
background-color: #e5e7df;
}
ul li {
width: 25px;
height: 25px;
border-radius: 50%;
background-color: #13421c;
}
ul .three{
background-color: #7f2f2f;
margin-top: 10px;
}
ul .four{
background-color: #7f2f2f;
margin-top: 10px;
}
ul .five{
background-color: #7f2f2f;
}
ul .six{
background-color: #7f2f2f;
}
</style>
<body>
<ul>
<li></li>
<li class="two"></li>
<li class="three"></li>
<li class="four"></li>
<li class="five"></li>
<li class="six"></li>
</ul>
</body>
具体代码落地(七饼)
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
}
.box{
float: left;
width: 80px;
height: 100px;
border-radius: 5px;
background-color: #e5e7df;
}
.box ul{
display: flex;
justify-content: space-between;
width: 80px;
height: 50px;
padding: 5px;
}
ul li {
width: 25px;
height: 25px;
border-radius: 50%;
background-color: #7f2f2f;
}
.top .one{
align-self: flex-start;
background-color: #13421c;
}
.top .two{
align-self: center;
background-color: #13421c;
}
.top .three{
align-self: flex-end;
background-color: #13421c;
}
.box .bottom {
flex-wrap: wrap;
padding: 0 12px;
}
</style>
<body>
<div class="box">
<ul class="top">
<li class="one"></li>
<li class="two"></li>
<li class="three"></li>
</ul>
<ul class="bottom">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
具体代码落地(八饼)
<style>
*{
padding: 0;
list-style: none;
box-sizing: border-box;
}
ul{
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 5px 15px;
width: 80px;
height: 100px;
border-radius: 5px;
background-color: #e5e7df;
}
ul li {
width: 23px;
height: 23px;
border-radius: 50%;
background-color: #212421;
}
</style>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
具体代码落地(九饼)
<style>
*{
padding: 0;
list-style: none;
box-sizing: border-box;
}
ul{
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 5px;
width: 80px;
height: 100px;
border-radius: 5px;
background-color: #e5e7df;
}
ul li {
width: 23px;
height: 23px;
border-radius: 50%;
background-color: #212421;
}
.two{
background-color: #7f2f2f
}
.three{
background-color: #13421c;
}
</style>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li class="two"></li>
<li class="two"></li>
<li class="two"></li>
<li class="three"></li>
<li class="three"></li>
<li class="three"></li>
</ul>
</body>
