css中的弹性盒筛子的制作

最新推荐文章于 2024-03-01 16:16:38 发布

等待的L先生

最新推荐文章于 2024-03-01 16:16:38 发布

阅读量649

点赞数 2

分类专栏： # html+css 文章标签： flex css3 html 网页设计

本文链接：https://blog.csdn.net/weixin_42590083/article/details/110594526

版权

本文介绍如何利用CSS3的弹性盒模型创建一个网页设计中的筛子效果，详细阐述了相关HTML和CSS代码实现过程。

摘要由CSDN通过智能技术生成

css中的弹性盒的筛子的制作

运用简单的flex的基本属性，做成六个筛子的面；后面还有动态的筛子；
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css中的弹性盒筛子的制作</title>
    <style>
        *{
    margin: 0;padding: 0;}
        body,html{
    height: 100%;}
        body{
    
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-wrap: wrap;
        }
        div{
    
            width: 104px;
            height: 104px;
            background: #e7e7e7;
            box-shadow:0px 4px 0px 0px #ffffff inset,0px -4px 0px 0px #bbbbbb inset,4px 0px 0px 0px #d7d7d7 inset,-4px 0px 0px 0px #d7d7d7 inset ;
            border-radius: 15px;