<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
/* 设置背景块和骰子的共同属性: */
section,
span {
/* 设置为弹性盒子 */
display: flex;
/* 加边框:美观 */
border: 2px solid black;
/* 背景色:美观 */
background-color: aquamarine;
/* 设置为怪异盒子,即宽高不被margin和padding影响 */
box-sizing: border-box;
/* 设置圆角半径20px */
border-radius: 20px;
}
/* 给section设置宽高 */
section {
width: 650px;
height: 150px;
/* 侧轴对齐方式:使得骰子垂直居中 */
align-items: center;
/* 主轴对齐方式 :平均分*/
justify-content:
space-evenly;
/* 补充易混点:
1.space-between:紧贴父元素两边,平均分布
2.space-around:每个子元素有固定的边距进行分布
*/
}
/* span为骰子容器 */
span {
width: 100px;
height: 100px;
display: flex;
background-color: pink;
/* 让骰子中的子元素在容器里贴边平均分布开 */
justify-content: space-between;
padding: 5px;
}
/* 骰子的子元素:小点 */
b {
width: 20px;
height: 20px;
background-color: white;
border-radius: 100%;
}
/* 给第一个骰子设置小点的位置 */
span:nth-child(1) {
/* 主轴水平 */
justify-content: center;
/* 侧轴垂直 */
align-items: center;
}
/* 给第二个骰子设置第二个小点的位置,因为第一个点的位置默认就是在左上 */
span:nth-child(2) b:nth-child(2) {
align-self: flex-end;
}
/* 给第三个骰子设置第二个小点的位置 ,因为在最前面已经设置过span内的元素space-between:贴边平均分布了,所以只需要设置中间的点居中和第三个点垂直方向(align-self)为flex-end*/
span:nth-child(3) b:nth-child(2) {
align-self: center;
}
span:nth-child(3) b:nth-child(3) {
align-self: flex-end;
}
/* 第四个点分两组,i为分组,首先给i设置主轴方向是竖着的(colmun)他,再给主轴对齐方式设置贴边对齐 */
i {
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* 第五个骰子,只需要设置中间的第二个分组为居中对齐,可以用子类的align-self直接设置居中,
这里如果误用为align-items效果不会显示的,align-items是针对i起效果的,而i的侧轴方向现在是横着的,因为在上面一个代码中给i设置了主轴为竖着,所以现在i的侧轴就是横着的*/
span:nth-child(5) i:nth-child(2) {
align-self: center;
}
</style>
<body>
<section>
<span>
<b></b>
</span>
<span>
<b></b>
<b></b>
</span>
<span>
<b></b>
<b></b>
<b></b>
</span>
<span>
<i>
<b></b>
<b></b>
</i>
<i>
<b></b>
<b></b>
</i>
</span>
<span>
<i>
<b></b>
<b></b>
</i>
<i>
<b></b>
</i>
<i>
<b></b>
<b></b>
</i>
</span>
<span>
<i>
<b></b>
<b></b>
<b></b>
</i>
<i>
<b></b>
<b></b>
<b></b>
</i>
</span>
</section>
</body>
</html>
html5写骰子 css
最新推荐文章于 2024-03-07 20:15:03 发布