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>
(资源库 www.zyku.net)
您可能感兴趣的文章
- 09-27帝国CMS系统内置标签语法介绍
- 10-12IIS6和IIS7做301永久重定向
- 11-21PHP中清除HTML标签的函数strip_tags
- 11-28帝国cms列表页分页显示条数的修改
- 01-23apache在本地支持多个站点的配置方法
- 02-19宿主机不能访问虚拟机CentOS中的web站
- 02-21PHP脚本超时时间设置
- 02-23DedeCms时间格式汇总
- 02-26帝国CMS用PHP代码实现灵动标签的技巧
- 03-27html 中input标签的隐藏方法
- 03-27PHP 判断变量的类型总结
- 05-16DeDeCms调用任意栏目名称的方法
- 07-09帝国网站管理系统全站全文搜索
- 07-15帝国网站管理系统常见问题
- 07-15帝国CMS的栏目绑定域名步骤
- 07-15帝国cms留言板
- 07-15帝国整合dz7.1后退出到首页的两种方法
- 07-15帝国CMS自定义页面调用方法
- 02-17到底SEO逻辑是什么?SEO有没有未来呢?
- 02-17正则验证不能含有中文的实现方法【jQu
阅读排行
猜你喜欢
- 09-25安装帝国CMS遇到“修改php.ini,将:short
- 11-21PHP中判断一个数是否为素数的方法
- 02-23MySQL 创建一个用户,并指定数据库
- 02-26帝国网站管理系统之安全设置最优化
- 02-26帝国cms封面网页模板调用栏目别名
- 04-16帝国CMS去掉注册会员“选择注册会员类
- 07-08解决帝国cms上传文件大小的限制php.in
- 07-10帝国CMS商城支付后跳转到指定页面
- 07-10帝国cms关联外表连接sql语句
- 07-15帝国CMS实现会员每天登陆实现赠送积分