html第二次作业

骨架

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./小米.css">
</head>
<body>
    <div class="father">
        <div class="left"></div>

        <div class="right">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>

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

css

html 复制代码
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}


.father{
    width: 1240px;
    height: 628px;
    background-color: blue;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-flow:row;
}

.left{
    width: 247px;
    height: 614px;
    background-color: pink;
}

.right{
    width: 978px;
    height: 628px;
    background-color: aqua;
    border: 0px;
    display: flex;

}

.ul{
    width: 992px;
    height: 614px;
    padding-left: 14px;
    display: flex;
    justify-content: space-between;

}

li {
    list-style: none;
}
.father li {
    width: 234px;
    height: 300px;
    background-color:red ;
    margin: 0px 9px 9px 0px;
    display: inline-block;
}

.father li:nth-child(4n){
    margin-right: 0;
}

效果

相关推荐
北京_宏哥几秒前
🔥Jmeter(二十五) - 从入门到精通 - JMeter函数 - 下篇(详解教程)
前端·jmeter·面试
天生我材必有用_吴用2 分钟前
鸿蒙开发入门到进阶:从布局基础到组件实战
前端·harmonyos·arkts
zhangxiao3 分钟前
自定义指令 - 去除所有空格和换行
前端
前端太佬4 分钟前
微信公众号网页登录:前端视角下的技术实现精要
前端·javascript·微信
Ryan今天学习了吗5 分钟前
如何在浏览器中渲染100万个元素,并且保证页面不卡顿?超详细底层原理图文分享
前端
前端太佬6 分钟前
微信小程序支付全流程实战指南(Node.js后端篇)
前端·javascript·微信小程序
_十六6 分钟前
面试官最爱问的 TypeScript 装饰器:核心原理与实战技巧全解析.md
前端·typescript
代码搬运媛6 分钟前
mitt 事件发布-订阅库在 react 中的使用
前端
小桥风满袖7 分钟前
Three.js-硬要自学系列17 (拉伸、扫描、多边形轮廓简介、轮廓圆弧、多边形内孔)
前端·css·three.js