笔记、作业

panshiyangmaye

已于 2023-11-25 15:32:01 修改

阅读量347

点赞数 6

文章标签：笔记

于 2023-11-25 15:31:42 首次发布

本文链接：https://blog.csdn.net/panshiyangmaye/article/details/134615370

版权

笔记：

1、弹性盒子：（由弹性容器和弹性子元素组成）（flex布局）
<style>
.box{
display: flex; （给最近的元素添加disply：flex）
flex-direction: row-reverse; （flex-direction设置主轴的方向）
flex-direction: column;
flex-direction: column-reverse;
flex-wrap: wrap; （允许弹性盒子的子项换行）
justify-content: center; （水平居中）
justify-content: flex-end;
justify-content: space-around; （把剩余的空间平均的分配给每个元素）
justify-content: space-between; （两边元素贴边，剩余平分）
align-items: center; （交叉轴上元素的对齐方式）
align-content: space-around; （控制侧轴上多行的对齐方式，和flex-warp：warp配合使用）
width: 400px;
height: 400px;
background-color: aqua;
}
.left{
width: 100px;
height: 100px;
background-color: brown;
}
.right{
width: 100px;
height: 100px;
background-color: black;
}
.three{
order: -1; （数值越小越向前）
flex-grow: 1; （占剩余空间的几份）
flex-shrink: 0;
flex-basis: 200px;
flex: 1;
align-self: flex-start; （只改变自己的对齐方式）
}
</style>

2、grid布局：
<style>
.box{
display: grid;
grid-template-columns: 100px 200px 300px;
grid-template-columns: 1fr 2fr 1fr;
grid-template-columns: repeat(3,1fr);
grid-template-rows: 100px 300px;
row-gap: 20px; （行之间的间隔）
column-gap: 20px; （列之间的间隔）
gap: 20px;
width: 800px;
height: 800px;
background-color: aliceblue;
}
.box1{
grid-row: 1/3; （跨两行）
grid-column: 1/3; （跨两列）
}
</style>

作业：

<!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;
        }
        .box{
            width: 1226px ;
            height: 460px;
            background-color: aliceblue;
        }
        .left{
            float: left;
            width: 234px;
            height: 460px;
            background-color:pink;
        }
        .right{
            float: right;
            width: 992px;
            height: 460px;
            background-color: rgb(1,1,1,0);
        }
        .left ul li{
            width: 234px;
            height: 46px;
            background-color:aliceblue;
            list-style: none;
            float: left;
        }
        .you{
            position: fixed;
            bottom: 180px;
            left: 0px;
            width: 41px;
            height: 69px;
            background-color: rgb(1,1,1,0.5);
        }
        .zuo{
            position: fixed;
            bottom: 180px;
            right: 0px;
            width: 41px;
            height: 69px;
            background-color: rgb(1,1,1,0.5);
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>Xiaoml手机</td>
            <td>Redmi手机</td>
            <td>电视</td>
            <td>笔记本</td>
            <td>平板</td>
            <td>家电</td>
            <td>路由器</td>
            <td>服务中心</td>
            <td>社区</td>
        </tr>    
    </table>
    <form action="#">
        <input type="text" placeholder="加湿器">
    </form>
    <div class="box">
        <img src="./99ddbf5291c84a2aff6cfd023249ce7b.jpg" alt="">
           <div class="left">
              <ul>
                  <li>手机</li>
                  <li>电视</li>
                  <li>家电</li>
                  <li>笔记本 平板</li>
                  <li>出行 穿戴</li>
                  <li>耳机 音箱</li>
                  <li>健康 儿童</li>
                  <li>生活 箱包</li>
                  <li>智能 路由器</li>
                  <li>电源 配件</li>
              </ul>
           </div>
           <div class="right">
            <div class="you">></div>
            <div class="zuo"><</div>
           </div>   
    </div>       
</body>
</html>

panshiyangmaye

关注

6
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
笔记、作业

（控制侧轴上多行的对齐方式，和flex-warp：warp配合使用）flex-direction: row-reverse;（flex-direction设置主轴的方向）justify-content: space-around;（给最近的元素添加disply：flex）align-self: flex-start;1、弹性盒子：（由弹性容器和弹性子元素组成）（flex布局）
复制链接

扫一扫