HTML使用栅格布局实现六种筛子样式的代码详解

时间：2020-06-03|栏目：HTML/Xhtml|点击：次 |我要投稿

先上效果图下面附上代码

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.big {
width: 100px;
height: 100px;
background: skyblue;
display: flex;
margin-top: 20px;
} 
.small {
width: 10px;
height: 10px;
background: purple;
border-radius: 5px;
}

.one {
display: flex;
justify-content: center;
/*交叉轴*/
align-items: center;
}

.two {
display: flex;
justify-content: space-around;
align-items: center;
}

.two2 {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}

.three {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}

.four {
display: flex;
justify-content: space-around;
}

.four1 {
display: flex;
justify-content: space-around;
align-items: center;
}

.four2 {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}

.five {
display: flex;
justify-content: space-around;
}

.five1 {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}

.five2 {
display: flex;
flex-direction: row;
align-self: center;
}

.six {
display: flex;
justify-content: space-around;
}

.six1 {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
</style>
</head>

<body>
<div class="big one">
<div class="small"></div>
</div>
<div class="big two">
<div class="small"></div>
<div class="small"></div>
</div>
<div class="big two2">
<div class="small"></div>
<div class="small"></div>
</div>
<div class="big three">
<div class="small" style="align-self: flex-start;"></div>
<div class="small" style="align-self: center;"></div>
<div class="small" style="align-self: flex-end;"></div>
</div>
<div class="big three">
<div class="small" style="align-self: flex-end;"></div>
<div class="small" style="align-self: center;"></div>
<div class="small" style="align-self: flex-start;"></div>
</div>
<div class="big four">
<div class="four2">

<div class="small"></div>
<div class="small"></div>
</div>
<div class="four2">

<div class="small"></div>
<div class="small"></div>
</div>
</div>
<div class="big five">
<div class="five1">

<div class="small"></div>
<div class="small"></div>
</div>
<div class="five2">

<div class="small"></div>
</div>
<div class="five1">

<div class="small"></div>
<div class="small"></div>
</div>
</div>

<div class="big six">
<div class="six1">
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
</div>
<div class="six1">
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
</div>
</div>
<div class="big six">
<div class="six1">
<div class="small"></div> 
<div class="small"></div>
</div>
<div class="six1">
<div class="small"></div>
<div class="small"></div> 
</div>
<div class="six1">
<div class="small"></div>
<div class="small"></div> 
</div>
</div>
</body>

</html>

(资源库 www.zyku.net)

栅格布局

上一篇：div去除点击出现蓝框的方法

栏目：HTML/Xhtml

下一篇：返回列表

本文标题：HTML使用栅格布局实现六种筛子样式的代码详解

本文地址：https://www.zyku.net/xhtml/1929.html

更多互联网推荐教程

您可能感兴趣的文章

HTML/Xhtml

HTML使用栅格布局实现六种筛子样式的代码详解

您可能感兴趣的文章

阅读排行

推荐教程