HTML使用栅格布局实现六种筛子样式的代码详解
2020-06-20 11:47
99 查看
先上效果图下面附上代码
<!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 栅格布局 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
相关文章推荐
- 利用div+css实现几种经典布局的详解,样式以及代码!
- android 使用代码实现 RelativeLayout布局
- php中使用parse_url()对网址进行解析的实现代码(parse_url详解)
- html中table使用详解+代码
- 使用HtmlAgilityPack XPath 表达式抓取博客园数据的实现代码
- os开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布局
- JS与HTML结合使用marquee标签实现无缝滚动效果代码
- 使用HTML+CSS实现如图布局,border-width:5px,格子大小是50px*50px,hover时 边框变成红色,需要考虑语义化。
- 使用JavaScript动态设置样式实现代码及演示动画
- 转载自@机智的新手:使用Auto Layout中的VFL(Visual format language)--代码实现自动布局
- iOS开发笔记--使用Auto Layout中的VFL(Visual format language)--代码实现自动布局
- iOS开发笔记--使用Auto Layout中的VFL(Visual format language)--代码实现自动布局
- ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布局
- IOS 使用代码创建约束,实现自动布局
- 前端html、CSS快速编写代码插件-Emmet使用方法技巧详解
- 手写代码自动实现自动布局,即Auto Layout的使用
- 【源码】实现Android闹钟功能使用HTML+JS,并附带Alarm代码分享
- ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布局
- ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布局
- iOS开发笔记--使用Auto Layout中的VFL(Visual format language)--代码实现自动布局