Day37综合案例--左侧隐藏 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>左侧隐藏</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        .box{
            display: flex;
        }
        .left{
            width: 300px;
            height: 500px;
            background-color: pink;
        }
        .main{
            flex: 1;
            height: 500px;
            background-color: skyblue;
        }
        @media(max-width:768px){
            .left{
                display: none;
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">left</div>
        <div class="main">
            晨雾尚未散尽，春日的微光便穿透云层，在郊外的原野上洒下细碎的金辉。沾着露水的荠菜顶着白绒绒的花，在田埂边铺展开浅绿的绒毯，风一吹，便带着湿润的草木气息漫过来。不远处的溪流解冻了，溪水撞在青灰色的卵石上，溅起细碎的水花，叮咚声混着早起麻雀的啾鸣，织成轻柔的晨曲。岸边的垂柳抽了新枝，嫩黄的柳芽裹着薄绒，垂在水面上轻轻摇曳，将溪水染得微微发绿。偶有白鹭展开洁白的翅膀，从溪面上低低掠过，尾尖扫过水面，留下一圈圈涟漪，转瞬便被流水带走。阳光渐渐升高，雾霭慢慢消散，远处的山峦褪去朦胧的轻纱，露出青黛色的轮廓，与天边的朝霞相映成趣，整个天地都浸在温暖而清新的气息里。
        </div>
    </div>
</body>
</html>

image
image

posted @ 2025-12-22 22:24  冰涿  阅读(0)  评论(0)    收藏  举报