2019.6.18 实训第二天
骰子布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex布局实例--骰子</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background: #000;
display: flex;
flex-wrap: wrap;
}
.box{
width: 100px;
height: 100px;
background: #fff;
border-radius: 20px;
margin: 100px;
padding: 15px;
}
.item{
width: 30px;
height: 30px;
background-color: #000;
border-radius: 30px;
}
</style>
<style type="text/css">
.box1_1 {
display: flex;
}
.item1_1 {}
</style>
<style type="text/css">
.box1_2 {
display: flex;
justify-content: center;
}
.item1_2{}
</style>
<style type="text/css">
.box1_3 {
display: flex;
justify-content: flex-end;
}
.item1_3{}
</style>
<style type="text/css">
.box1_4 {
display: flex;
align-items: center;
}
.item1_4{}
</style>
<style type="text/css">
.box1_5{
display: flex;
justify-content: center;
align-items: center;
}
.item1_5{}
</style>
<style type="text/css">
.box1_6{
display: flex;
justify-content: center;
align-items: flex-end;
}
.item1_6{}
</style>
<style type="text/css">
.box1_7{
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
.item1_7{}
</style>
<style type="text/css">
.box2_1 {
display: flex;
justify-content: space-between;
}
.item2_1{}
</style>
<style type="text/css">
.box2_2{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.item2_2{}
</style>
<style type="text/css">
.box2_3{
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.item2_3{}
</style>
<style type="text/css">
.box2_4{
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
}
.item2_4{}
</style>
<style type="text/css">
.box2_5{
display: flex;
}
.item2_5:nth-child(2) {
align-self: center;
}
</style>
<style type="text/css">
.box2_6{
display: flex;
justify-content: space-between;
}
.item2_6:nth-child(2) {
align-self: flex-end;
}
</style>
<style type="text/css">
.box3{
display: flex;
}
.item3:nth-child(2){
align-self: center;
}
.item3:nth-child(3){
align-self: flex-end;
}
</style>
<style type="text/css">
.box4_1{
display: flex;
flex-wrap: wrap;
align-content: space-between;
justify-content:flex-end;
}
.column4_1{
flex-basis: 100%;
display: flex;
justify-content: space-between;
}
</style>
<style type="text/css">
.box4_2{
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
.column4_2{
flex-basis: 100%;
display: flex;
justify-content: space-between;
}
</style>
<style type="text/css">
.box5{
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
.column5{
flex-basis: 100%;
display: flex;
justify-content: space-between;
}
.column5:nth-child(2){
justify-content: center;
}
</style>
<style type="text/css">
.box6_1{
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
.column6_1{
flex-basis: 100%;
display: flex;
justify-content: space-between;
}
</style>
<style type="text/css">
.box6_2{
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
.column6_2{
flex-basis: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
</style>
<style type="text/css">
.box {
display: flex;
flex-wrap: wrap;
}
.row{
flex-basis: 100%;
display:flex;
justify-content: space-between;
}
.row:nth-child(2){
justify-content: center;
}
.row:nth-child(3){
justify-content: space-between;
}
</style>
<style type="text/css">
.box9 {
display: flex;
flex-wrap: wrap;
}
.column9_1{
flex-basis: 100%;
display: flex;
justify-content: space-between;
align-content: space-between;
}
</style>
</head>
<body>
<!-- 1 -->
<div class="box box1_1">
<span class="item item1_1"></span>
</div>
<div class="box box1_2">
<span class="item item1_2"></span>
</div>
<div class="box box1_3">
<span class="item item1_3"></span>
</div>
<div class="box box1_4">
<span class="item item1_4"></span>
</div>
<div class="box box1_5">
<span class="item item1_5"></span>
</div>
<div class="box box1_6">
<span class="item item1_6"></span>
</div>
<div class="box box1_7">
<span class="item item1_7"></span>
</div>
<!-- 2 -->
<div class="box box2_1">
<span class="item item2_1"></span>
<span class="item item2_1"></span>
</div>
<div class="box box2_2">
<span class="item item2_2"></span>
<span class="item item2_2"></span>
</div>
<div class="box box2_3">
<span class="item item2_3"></span>
<span class="item item2_3"></span>
</div>
<div class="box box2_4">
<span class="item item2_4"></span>
<span class="item item2_4"></span>
</div>
<div class="box box2_5">
<span class="item item2_5"></span>
<span class="item item2_5"></span>
</div>
<div class="box box2_6">
<span class="item item2_6"></span>
<span class="item item2_6"></span>
</div>
<!-- 3 -->
<div class="box box3">
<span class="item item3"></span>
<span class="item item3"></span>
<span class="item item3"></span>
</div>
<!-- 4 -->
<div class="box box4_1">
<div class="column4_1">
<span class="item item4_1"></span>
<span class="item item4_1"></span>
<span class="item item4_1"></span>
</div>
<div class="column4_1">
<span class="item item4_1"></span>
</div>
</div>
<div class="box box4_2">
<div class="column4_2">
<span class="item item4_2"></span>
<span class="item item4_2"></span>
</div>
<div class="column4_2">
<span class="item item4_2"></span>
<span class="item item4_2"></span>
</div>
</div>
<!-- 5 -->
<div class="box box5">
<div class="column5">
<span class="item item5"></span>
<span class="item item5"></span>
</div>
<div class="column5">
<span class="item item5"></span>
</div>
<div class="column5">
<span class="item item5"></span>
<span class="item item5"></span>
</div>
</div>
<!-- 6 -->
<div class="box box6_1">
<div class="column6_1">
<span class="item item6_1"></span>
<span class="item item6_1"></span>
</div>
<div class="column6_1">
<span class="item item6_1"></span>
<span class="item item6_1"></span>
</div>
<div class="column6_1">
<span class="item item6_1"></span>
<span class="item item6_1"></span>
</div>
</div>
<div class="box box6_2">
<div class="column6_2">
<span class="item item6_2"></span>
<span class="item item6_2"></span>
<span class="item item6_2"></span>
</div>
<div class="column6_2">
<span class="item item6_2"></span>
<span class="item item6_2"></span>
<span class="item item6_2"></span>
</div>
</div>
<div class="box">
<div class="row">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
<div class="row">
<span class="item"></span>
</div>
<div class="row">
<span class="item"></span>
<span class="item"></span>
</div>
</div>
<div class="box box9">
<div class="column9_1">
<span class="item item9_1"></span>
<span class="item item9_1"></span>
<span class="item item9_1"></span>
</div>
<div class="column9_1">
<span class="item item9_1"></span>
<span class="item item9_1"></span>
<span class="item item9_1"></span>
</div>
<div class="column9_1">
<span class="item item9_1"></span>
<span class="item item9_1"></span>
<span class="item item9_1"></span>
</div>
</body>
</html>
扫一扫
30万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
