最近看了很多CSS的东西,对CSS的布局有了更深一步的了解,下面两个实例感觉很有意思,都是用很精简的代码来实现的,上代码:
1.polka dot
background: #655;
background-image: radial-gradient(tan 20%, transparent 0),
radial-gradient(tan 20%, transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;
效果:POLKA DOT
2.flex布局实现骰子1-6点
用flex做布局实现骰子1-6点:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>骰子</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.dice-container {
width: 600px;
height: 600px;
background: #cccccc;
padding: 30px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
/* align-content: center; */
}
div[class*='dice-box']{
width: 180px;
height: 180px;
background: #ffffff;
padding: 5px;
border: 1px solid #cccccc;
border-radius: 10px;
display: flex;
flex-wrap: wrap;
}
div.dice-box-one {
align-content: center;
justify-content: center;
/* flex: 0 1 25%; */
}
div.dice-box-two {
align-content: center;
justify-content: space-between;
}
div.dice-box-three {
/* flex-direction: column; */
justify-content: space-between;
}
div.dice-box-three>.dot:nth-child(2) {
align-self: center;
}
div.dice-box-three>.dot:nth-child(3) {
align-self: flex-end;
}
div.dice-box-four {
justify-content: space-between;
}
div.dice-box-four .column {
display: flex;
flex-direction: column;
justify-content: space-between;
}
div.dice-box-five {
justify-content: space-between;
}
div.dice-box-five .column {
display: flex;
flex-direction: column;
justify-content: space-between;
}
div.dice-box-five .column:nth-child(2){
justify-content: center;
}
div.dice-box-six {
justify-content: space-between;
}
div.dice-box-six .column {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.dot {
width: 50px;
height: 50px;
border-radius: 50%;
background: #000000;
}
</style>
</head>
<body>
<div class="dice-container">
<div class="dice-box-one">
<div class="dot"></div>
</div>
<div class="dice-box-two">
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="dice-box-three">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="dice-box-four">
<div class="column">
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="column">
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
<div class="dice-box-five">
<div class="column">
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="column">
<div class="dot"></div>
</div>
<div class="column">
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
<div class="dice-box-six">
<div class="column">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<div class="column">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
</div>
</body>
</html>
效果:骰子