11.23

最新推荐文章于 2023-11-30 09:29:04 发布

scd0208

最新推荐文章于 2023-11-30 09:29:04 发布

阅读量320

点赞数 11

文章标签：前端 html css

本文链接：https://blog.csdn.net/scd0208/article/details/134697348

版权

1.弹性盒子

display=flex

方向：从主轴开始到结束

flex-wrap=warp（自动换行）

flex-direction=row-reverse （右到左）

flex-direction=column-reverse，column 主轴变纵向

justity-content：（主轴的排列方式）

space-between	两边贴边，中间空间平分
space-around、	环绕
flex-start（end）	丛左往右

align-items=center （交叉轴的对其方式）

order：x（x越小要靠前）默认是0

flex-shrink=0 不被压缩

2.grid

grid-template-rows / grid-auto-columns：指定行的尺寸（高度），以及列的自动尺寸。（fr）一份

gap间隔

column-gap 设置网格布局中列之间的间隙大小

grid-row-start：x

grid-row-end：y

y-x-1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .xo{
            background-color: rgb(53, 49, 49);
        }
        .oo{
            text-align: center;
            width: 1224px;
            height: 40px;
        }
        a{
            font-size: small;
            color:white;
            text-decoration: none;
        }
        li{
            list-style: none;
            display: inline-block;
            width: 60px;
            height: 40px;
        }
        .d1{
            width: 78px;

        }
        .cx{
            width: 82px;
        }
        .fo{
            background-color: aqua;
            
        }
        .op{
            display: inline-block;
        }
        .box{
           
            text-align: left;
        }
        .box{
            float: left;
        }
      
        
        .fang2{
            position: relative;
          
            height: 100px;
            background-color: seagreen
        }
        .img{
            position: absolute;
            width: 56px;
            height: 56px;
            top:10px;
            left: 20px;
        }
        .nwo{
            display: inline-block;
            position: absolute;
            top: 10px;
            right: 300px;
        }
        .w3{
            background-color: rgb(110, 96, 96);
        }
        .en{
            width: 234px;
            height: 460px;
            text-align: center;
        }
       .q{
         display: inline-block;
         width: 200px;
         background-color: bisque;
    
        }
        .q1{
        position: relative;
        }
        .p2{
        position: absolute;
        bottom: 20px;
        right: 10px;
        } 
        .p3{
            position: absolute;
            left: 0;
            bottom: 45%;
        }
        .p4{
            position: absolute;
            right: 0;
            bottom: 45%;
        }
    </style>
</head>
<body>
    <div class="xo">
        <div class="box">
            <ul class="oo">
                <li><a href="#">小米官网</a></li>
                <li><a href="#">小米商店</a></li>
                <li><a href="#">小米澎湃os</a></li>
                <li><a href="#">loT</a></li>
                <li><a href="#">云服务</a></li>
                <li><a href="#">天星数科</a></li>
                <li><a href="#">有品</a></li>
                <li class="d1"><a href="#">小爱开发平台</a></li>
                <li><a href="#">资质证照</a></li>
                <li><a href="#">协议规则</a></li>
                <li><a href="#">下载app</a></li>
                <li class="cx"><a href="#" >select location</a></li>
            </ul>
        </div >  
        <div class="bo">
            <ul >
                <li><a href="#">登录</a></li>
                <li><a href="#">注册</a></li>
                <li><a href="#">消息通知</a></li>
                <li><a href="#">购物车</a></li>
         </div> 
       
    </div>
    <div class="fang2">
        <div class="img">
            <img src="../images/Snipaste_2023-11-25_12-04-56.png" >
        </div>
        <div class="nwo">
            <ul class="oo2">
                <li><a href="#">xiaomi手机</a></li>
                <li><a href="#">redmi手机</a></li>
                <li><a href="#">电视</a></li>
                <li><a href="#">笔记本</a></li>
                <li><a href="#">平板</a></li>
                <li><a href="#">家电</a></li>
                <li><a href="#">路由器</a></li>
                <li><a href="#">服务中心</a></li>
                <li><a href="#">社区</a></li>
                <li> <input type="text" class="dw"></li>

            </ul>
          
           

        </div>
    </div>
    <div class="lsat">
        <div class="en">
            <ul class="w3">
                <li style="display: block;">手机</li>
                <li style="display: block;">电视</li>
                <li style="display: block;">家电</li>
                <li style="display: block;">笔记本 平板</li>
                <li style="display: block;">出行穿戴</li>
                <li style="display: block;">耳机 音响</li>
                <li style="display: block;">健康 儿童</li>
                <li style="display: block;">生活 箱包</li>
                <li style="display: block;">智能 路由器</li>
                <li style="display: block;">电源 配件</li>
            </ul>
        </div>
        <div class="q">
            <div class="q1">
                <img src="../images/4962de27885a8eb6b437a2ec63e0e9ec.jpg">
            </div >
            <div class="q2">
                <img src="../images/Snipaste_2023-11-25_13-08-36.png">

            </div>
            <div class="q3">
                <img src="../images/Snipaste_2023-11-25_13-08-51.png">
            </div>
            <div class="q4">
                <img src="../images/Snipaste_2023-11-25_13-08-56.png">
            </div>
        </div>


    </div>
</body>
</html>

scd0208

关注

11
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
11.23

flex-direction=column-reverse，column 主轴变纵向。align-items=center （交叉轴的对其方式）flex-direction=row-reverse （右到左）指定行的尺寸（高度），以及列的自动尺寸。column-gap 设置网格布局中列之间的间隙大小。justity-content：（主轴的排列方式）flex-wrap=warp（自动换行）order：x（x越小要靠前）默认是0。flex-shrink=0 不被压缩。方向：从主轴开始到结束。
复制链接

扫一扫