当前位置:首页 >  站长 >  编程技术 >  正文

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

 2020-12-21 16:02  来源: 脚本之家   我来投稿 撤稿纠错

  【推荐】海外独服/站群服务器/高防

这篇文章主要介绍了HTML使用栅格布局实现六种筛子的样式,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

先上效果图下面附上代码

 

<!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>

总结

到此这篇关于HTML使用栅格布局实现六种筛子的样式的代码详解的文章就介绍到这了,更多相关html 栅格布局 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

来源:脚本之家

链接:https://www.jb51.net/web/728714.html

申请创业报道,分享创业好点子。点击此处,共同探讨创业新机遇!

相关标签
html
代码设计

相关文章

  • 一场深度的IT效率革命:低代码市场加速嬗变

    尽管IT技术支撑了全球的信息化浪潮,然而困扰行业已久的软件开发效率却难以像摩尔定律一样快速提升,甚至已经成为了一种瓶颈,在困扰着行业的继续发展。一边是码农们高喊着996的境况,另一边是程序员的生产力并没有用在更具价值的生产活动之中,重复造轮子的情况依然大量存在。近几年,低代码领域发展迅速,赛道相继跑

    标签:
    代码设计
  • 网站页面一定需要HTML静态化吗 实战说明静态化的必要性

    很多刚开始运营网站的伙伴们都要知道网站内的页面需要进行URL优化吗?如设置静态化等,对此,本文就为大家解析一下网站静态化的必要性,有兴趣的朋友们可以了解下哦

    标签:
    html
  • 在html页面中取得session中的值的方法

    这篇文章主要介绍了在html页面中取得session中的值的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

    标签:
    html
  • 如何通过HTML代码提高SEO的效果

    我们的网页是由HTML(超文本标记语言)元素组成的。甚至对于ASP、PHP和其他动态页面,服务器也会将ASP或PHP语句呈现为相应的HTML元素并发送给客户端;对于JavaScript和其他动态页面,客户端会将它们转换为HTML。

    标签:
    seo优化
    html
  • 解决vscode 中保存后html自动格式化的问题

    这篇文章主要介绍了vscode中保存后html自动格式化的问题,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

热门排行

信息推荐