Flex弹性容器基础页面布局

<!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>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .navs{
            width: 100%;
            display: flex;
            justify-content: space-between;
            line-height: 40px;
            height: 40px;
            background-color: lightblue;
            font-size: 20px;
        }
        .navs ol{
            display: flex;
            list-style: none;
        }
        .navs ol li{
            width: 60px;
            text-align: center;
        }
        .navs ol li a{
            text-decoration: none;
            color: white;
        }
        .navs ol li a:hover, .navs ol li.active a{
            color: lightcoral;
        }

        .body{
            width: 1100px;
            background-color: lightgray;
            display: flex;
        }

        .body .main{
            width: 70%;
            padding: 10px 20px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .body .aside{
            width: 30%;
        }

        .body .main .item{
            display: flex;
            align-items: center;
            padding: 10px 20px;
            border: 1px solid lightcoral;
            margin-bottom: 10px;
            border-radius: 15px;
            width: 40%;
        }

        .body .main .item .left{
            width: 40%;
            margin-right: 20px;
        }
        .body .main .item .left img{
            width: 100%;
            border-radius: 50%;
        }

        .body .main .item .right .head{
            font-size: 20px;
            text-align: center;
            font-weight: 700;
        }

        .body .main .item .right .content{
            text-indent: 2em;
        }



        .body .aside ol{
            list-style: none;
        }

        .body .aside ol li{
            height: 40px;
            line-height: 40px;
            margin: 5px 0;
            font-size: 30px;
        }

        .body .aside ol li a{
            text-align: center;
            color: white;
            text-decoration: none;
        }

        .body .aside ol li a:hover{
            color: lightcoral;
        }

    </style>
</head>
<body>
    <div class="navs">
        <ol>
            <li class="active"><a href="">首页</a></li>
            <li><a href="">我的</a></li>
            <li><a href="">文档</a></li>
        </ol>
        <ol>
            <li><a href="">登录</a></li>
            <li><a href="">注册</a></li>
        </ol>
    </div>

    <div class="body">
        <div class="main">
            
            <div class="item">
                <div class="left">
                    <img src="./img/head.webp" alt="">
                </div>
                <div class="right">
                    <div class="head">我是一个前端工程师</div>
                    <div class="content">我的工作内容是编写页面,把设计人员设计好的布局,使用html,css 100%还原我的工作内容是编写页面,把设计人员设计好的布局,使用html,css 100%还原</div>
                </div>
            </div>
            <div class="item">
                <div class="left">
                    <img src="./img/head.webp" alt="">
                </div>
                <div class="right">
                    <div class="head">我是一个前端工程师</div>
                    <div class="content">我的工作内容是编写页面,把设计人员设计好的布局,使用html,css 100%还原我的工作内容是编写页面,把设计人员设计好的布局,使用html,css 100%还原</div>
                </div>
            </div>
            <div class="item">
                <div class="left">
                    <img src="./img/head.webp" alt="">
                </div>
                <div class="right">
                    <div class="head">我是一个前端工程师</div>
                    <div class="content">我的工作内容是编写页面,把设计人员设计好的布局,使用html,css 100%还原我的工作内容是编写页面,把设计人员设计好的布局,使用html,css 100%还原</div>
                </div>
            </div>
            <div class="item">
                <div class="left">
                    <img src="./img/head.webp" alt="">
                </div>
                <div class="right">
                    <div class="head">我是一个前端工程师</div>
                    <div class="content">我的工作内容是编写页面,把设计人员设计好的布局,使用html,css 100%还原我的工作内容是编写页面,把设计人员设计好的布局,使用html,css 100%还原</div>
                </div>
            </div>
            <div class="item">
                <div class="left">
                    <img src="./img/head.webp" alt="">
                </div>
                <div class="right">
                    <div class="head">我是一个前端工程师</div>
                    <div class="content">我的工作内容是编写页面,把设计人员设计好的布局,使用html,css 100%还原我的工作内容是编写页面,把设计人员设计好的布局,使用html,css 100%还原</div>
                </div>
            </div>
            <div class="item">
                <div class="left">
                    <img src="./img/head.webp" alt="">
                </div>
                <div class="right">
                    <div class="head">我是一个前端工程师</div>
                    <div class="content">我的工作内容是编写页面,把设计人员设计好的布局,使用html,css 100%还原我的工作内容是编写页面,把设计人员设计好的布局,使用html,css 100%还原</div>
                </div>
            </div>
            <div class="item">
                <div class="left">
                    <img src="./img/head.webp" alt="">
                </div>
                <div class="right">
                    <div class="head">我是一个前端工程师</div>
                    <div class="content">我的工作内容是编写页面,把设计人员设计好的布局,使用html,css 100%还原我的工作内容是编写页面,把设计人员设计好的布局,使用html,css 100%还原</div>
                </div>
            </div>
            <div class="item">
                <div class="left">
                    <img src="./img/head.webp" alt="">
                </div>
                <div class="right">
                    <div class="head">我是一个前端工程师</div>
                    <div class="content">我的工作内容是编写页面,把设计人员设计好的布局,使用html,css 100%还原我的工作内容是编写页面,把设计人员设计好的布局,使用html,css 100%还原</div>
                </div>
            </div>
            
        </div>
        <div class="aside">
            <ol>
                <li><a href="">点我发现更多1</a></li>
                <li><a href="">点我发现更多2</a></li>
                <li><a href="">点我发现更多3</a></li>
                <li><a href="">点我发现更多4</a></li>
                <li><a href="">点我发现更多5</a></li>
                <li><a href="">点我发现更多6</a></li>
                <li><a href="">点我发现更多7</a></li>
                <li><a href="">点我发现更多8</a></li>
                <li><a href="">点我发现更多9</a></li>
                <li><a href="">点我发现更多10</a></li>
            </ol>
        </div>
    </div>
</body>
</html>

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值