骰子模型代码less代码

代码

<body>
<div class="number one">
    <div class="item"></div>
</div>
<div class="number two">
    <div class="item"></div>
    <div class="item"></div>
</div>
<div class="number two2">
    <div class="item"></div>
    <div class="item"></div>
</div>
<div class="number three">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
<div class="number three1">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
<div class="number four">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
<div class="number four1">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
<div class="number four2">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
<!-- 五点骰子 -->
<div class="number five">
    <div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div>
        <div class="item"></div>
    </div>
    <div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>
<!-- 六点骰子 -->
<div class="number six">
    <div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>
<div class="number seven">
    <div>
        <div class="item1"></div>
    </div>
    <div>
        <div class="item1"></div>
        <div class="item1"></div>
        <div class="item1"></div>
    </div>
    <div>
        <div class="item1"></div>
        <div class="item1"></div>
        <div class="item1"></div>
    </div>
</div>
<div class="number seven1">
    <div class="div2">
        <div class="item3"></div>
    </div>
    <div>
        <div class="item3"></div>
    </div>
    <div class="div1">
        <div class="item3"></div>
    </div>
    <div>
        <div class="item3 "></div>
        <div class="item3"></div>
    </div>
    <div>
        <div class="item3"></div>
        <div class="item3"></div>
    </div>
</div>
<div class="number eight">
    <div>
        <div class="item2"></div>
        <div class="item2"></div>
    </div>
    <div>
        <div class="item2"></div>
        <div class="item2"></div>
    </div>
    <div>
        <div class="item2"></div>
        <div class="item2"></div>
    </div>
    <div>
        <div class="item2"></div>
        <div class="item2"></div>
    </div>
</div>
<div class="number nine">
    <div>
        <div class="item2"></div>
        <div class="item2"></div>
        <div class="item2"></div>
    </div>
    <div>
        <div class="item2"></div>
        <div class="item2"></div>
        <div class="item2"></div>
    </div>
    <div>
        <div class="item2"></div>
        <div class="item2"></div>
        <div class="item2"></div>
    </div>
</div>

less代码

.number{
display:flex;
padding:10px;
width: 120px;height: 120px;
border: 3px solid #ddd;
border-radius: 10px;
background: #fff;
box-shadow: 3px 3px 3px 0px #999;
margin: 5px;
}
.item{
width: 50px;height: 50px;
background: #999;
border-radius: 50%;  
box-shadow: 1px 1px 2px 0px #999;
}
.item1{
width: 40px;
height: 40px;
background: #999;
border-radius: 50%;
box-shadow: 1px 1px 2px 0px #999;
}
.item2{
width: 35px;
height: 35px;
background: #999;
border-radius: 50%;
box-shadow: 1px 1px 2px 0px #999;
}
.item3{
width: 30px;
height: 30px;
background: #999;
border-radius: 50%;
box-shadow: 1px 1px 2px 0px #999;
}
.one{
justify-content: center;
align-items: center;
}
.two{
justify-content: space-around;
align-items: center;
}
.two2{
justify-content: space-around;
align-items: center;
flex-direction: column;
}
.three{
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.three div:first-child{
align-self: flex-start;
}
.three div:last-child{
align-self: flex-end;
}
.three1{
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.three1 div:first-child{
align-self: flex-end;
}
.three1 div:last-child{
align-self: flex-start;
}
// 调整间距实现4骰子
.four{
flex-wrap: wrap;
.item{
    margin: 5px;
}
}
.four1{
flex-wrap: wrap;
flex-direction: column;
justify-content: space-around;
}
.four2{
flex-wrap: wrap;
// display: flex;  //这一行好像没有神么用处
justify-content: space-around;
}
.five{
flex-direction: column;
justify-content: space-around;
div{
    display: flex;
    justify-content: space-around;
    margin: -2px;
}
}
.six{
flex-direction: column;
justify-content: space-around;
div{
    display: flex;
    justify-content: space-around;
}
}
.seven{
flex-direction: column;
justify-content: space-around;
div{
    display: flex;
    justify-content: space-around;
}
}
.seven1{
flex-direction: column;
justify-content: space-around;
div{
    display: flex;
    justify-content: space-around;
}
.div1 {
    width:120px;
    padding-left: 50px;
    margin-top: -10px;
}
}
.seven1 div:first-child{
align-self: flex-start;
}
.eight{
flex-direction: column;
justify-content: space-around;
div{
    display: flex;
    justify-content: space-around;
}
}
.nine{
flex-direction: column;
justify-content: space-around;
div{
    display: flex;
    justify-content: space-around;
}
}