欢迎来到资源库(www.zyku.net)

HTML/Xhtml

当前位置:首页 > 网页制作 > HTML/Xhtml

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

关于我们 | 版权申明 | 寻求合作 |

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:95148658 | 邮箱:mb8#qq.com(#换成@)

沪ICP备15050984号-12