6.25 随堂笔记（一）

.container{
display: flex; //让内部子盒子横向并排；
height: 48px; //设置整个彩色长条总高度为 48 像素;
}
div[class^=item]{
flex: 1; //让 6 个色块平均分配父容器宽度，宽度全部相等;
}
.num{
width: 24px; //数字白圈：宽 24px、高 24px;
height: 24px;
color: #000; //圈内数字颜色黑色;
background-color: #FFF; //圆圈背景纯白色;
border-radius: 50%; //圆角 50%，正方形直接变成圆形;
text-align: center; //文字水平居中;
margin: 12px auto; //auto 实现水平居中；上下外边距12px，让24px圆圈在48px高的色块里垂直居中

}
.item1 { background-color: red; } //第 1 个色块背景红色
.item2 { background-color: orange; } //..
.item3 { background-color: yellow; } //..
.item4 { background-color: green; } //..
.item5 { background-color: blue; } //..
.item6 { background-color: purple; } //..

1

2

3

4

5

6

效果图：