前端学习第三天-CSDN博客

本文链接：https://blog.csdn.net/qq_41550419/article/details/129950376

今天第一课作业

画块

style

<style>
        .box{width: 2000px;background-color: gray;padding: 10px;}
        .clear{clear: both;}
        .fl{float: left;}
        .fr{float: right;}
        .class,.main_pic,.act_pic,.main_info{height: 600px;background-color: red;margin-left: 50px;}
        .class{width: 400px;}
        .main_pic{width: 700px;}
        .act_pic{width: 300px;}
        .main_info{width: 350px;}
        .class .item{width: 380px;height: 22px;background-color: yellow;margin-top: 10px;margin-left: 10px;}
        .class .item .info{width: 100px;height: 18px;background-color: green;margin: 2px;}
        .act_pic .item{width: 280px;height: 173px;background-color: yellow;margin-top: 20px;margin-left: 10px;}
        .per_info,.hot_info,.main_icon{width: 310px;background-color: yellow;margin: 10px;padding: 10px;}
        .per_info{height: 100px;}
        .hot_info{height: 110px;}
        .main_icon{height: 280px;}
        .per_info .part1,.per_info .part2{width: 310px;background-color: green;margin-bottom: 10px;}
        .per_info .part1{height: 50px;}
        .per_info .part2{height: 40px;}
        .per_info .part1 .pic,.per_info .part1 .info{height: 40px;background-color:purple;margin-left: 5px;margin-top: 5px;}
        .per_info .part1 .pic{width: 80px;}
        .per_info .part1 .info{width: 200px;}
        .per_info .part1 .info .welcome,.per_info .part1 .info .button{width: 190px;height: 15px;background-color: pink;margin-top: 3px;margin-left: 3px;}
        .login_button,.register_button{width: 50px;height: 10px;background-color: orange;margin-top: 3px;margin-left: 3px;}
        .room_button,.vip_button{width: 145px;height: 30px;background-color:purple;margin-top: 5px;margin-left: 5px}
        .hot_info .part1,.hot_info .part2{width: 310px;background-color:green;}
        .hot_info .part1{height: 30px;}
        .hot_info .part2{height: 65px;margin-top: 10px;padding-top: 5px;}
        .hot_title,.more{height: 20px;background-color:purple;margin-top: 5px;}
        .hot_title{width: 100px;margin-left: 5px}
        .more{width: 50px;margin-right: 5px}
        .hot_info .part2 .item{width: 300px;height: 11px;background-color:purple;margin-left: 5px;margin-bottom: 5px;}
        .hot_info .part2 .item .title,.hot_info .part2 .item .content{height: 7px;background-color: pink;margin: 2px;}
        .hot_info .part2 .item .title{width: 50px;}
        .hot_info .part2 .item .content{width: 200px;}
        .main_icon .part{width: 310px;height: 62px;background-color:green;margin-bottom: 10px;}
        .main_icon .part .item{width: 50px;height: 50px;background-color:purple;margin-top: 5px;margin-left: 40px;}
        .part .item .icon,.part .item .info{width: 46px;background-color:pink;margin-top: 2px;margin-left: 2px;}
        .part .item .icon{height: 34px;}
        .part .item .info{height: 10px;}
    </style>

body

<body>
    <div class="box">
        <div class="class fl">
            <div class="item"><div class="info fl"></div><div class="info fl"></div><div class="info fl"></div><div class="clear"></div></div>
            <div class="item"><div class="info fl"></div><div class="info fl"></div><div class="info fl"></div><div class="clear"></div></div>
            <div class="item"><div class="info fl"></div><div class="info fl"></div><div class="info fl"></div><div class="clear"></div></div>
            <div class="item"><div class="info fl"></div><div class="info fl"></div><div class="info fl"></div><div class="clear"></div></div>
            <div class="item"><div class="info fl"></div><div class="info fl"></div><div class="info fl"></div><div class="clear"></div></div>
            <div class="item"><div class="info fl"></div><div class="info fl"></div><div class="info fl"></div><div class="clear"></div></div>
            <div class="item"><div class="info fl"></div><div class="info fl"></div><div class="info fl"></div><div class="clear"></div></div>
            <div class="item"><div class="info fl"></div><div class="info fl"></div><div class="info fl"></div><div class="clear"></div></div>
            <div class="item"><div class="info fl"></div><div class="info fl"></div><div class="info fl"></div><div class="clear"></div></div>
            <div class="item"><div class="info fl"></div><div class="info fl"></div><div class="info fl"></div><div class="clear"></div></div>
            <div class="item"><div class="info fl"></div><div class="info fl"></div><div class="info fl"></div><div class="clear"></div></div>
            <div class="item"><div class="info fl"></div><div class="info fl"></div><div class="info fl"></div><div class="clear"></div></div>
            <div class="item"><div class="info fl"></div><div class="info fl"></div><div class="info fl"></div><div class="clear"></div></div>
            <div class="item"><div class="info fl"></div><div class="info fl"></div><div class="info fl"></div><div class="clear"></div></div>
            <div class="item"><div class="info fl"></div><div class="info fl"></div><div class="info fl"></div><div class="clear"></div></div>
            <div class="item"><div class="info fl"></div><div class="info fl"></div><div class="info fl"></div><div class="clear"></div></div>
            <div class="item"><div class="info fl"></div><div class="info fl"></div><div class="info fl"></div><div class="clear"></div></div>
            <div class="item"><div class="info fl"></div><div class="info fl"></div><div class="info fl"></div><div class="clear"></div></div>
        </div>
        <div class="main_pic fl"></div>
        <div class="act_pic fl">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="main_info fl">
            <div class="per_info">
                <div class="part1">
                    <div class="pic fl"></div>
                    <div class="info fl">
                        <div class="welcome"></div>
                        <div class="button">
                            <div class="login_button fl"></div>
                            <div class="register_button fl"></div>
                            <div class="clear"></div>
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="part2">
                    <div class="room_button fl"></div>
                    <div class="vip_button fl"></div>
                    <div class="clear"></div>
                </div>
            </div>
            <div class="hot_info">
                <div class="part1">
                    <div class="hot_title fl"></div>
                    <div class="more fr"></div>
                    <div class="clear"></div>
                </div>
                <div class="part2">
                    <div class="item"><div class="title fl"></div><div class="content fl"></div><div class="clear"></div></div>
                    <div class="item"><div class="title fl"></div><div class="content fl"></div><div class="clear"></div></div>
                    <div class="item"><div class="title fl"></div><div class="content fl"></div><div class="clear"></div></div>
                    <div class="item"><div class="title fl"></div><div class="content fl"></div><div class="clear"></div></div>
                </div>
            </div>
            <div class="main_icon">
                <div class="part"><div class="item fl"><div class="icon"></div><div class="info"></div></div><div class="item fl"><div class="icon"></div><div class="info"></div></div><div class="item fl"><div class="icon"></div><div class="info"></div></div><div class="clear"></div></div>
                <div class="part"><div class="item fl"><div class="icon"></div><div class="info"></div></div><div class="item fl"><div class="icon"></div><div class="info"></div></div><div class="item fl"><div class="icon"></div><div class="info"></div></div><div class="clear"></div></div>
                <div class="part"><div class="item fl"><div class="icon"></div><div class="info"></div></div><div class="item fl"><div class="icon"></div><div class="info"></div></div><div class="item fl"><div class="icon"></div><div class="info"></div></div><div class="clear"></div></div>
                <div class="part"><div class="item fl"><div class="icon"></div><div class="info"></div></div><div class="item fl"><div class="icon"></div><div class="info"></div></div><div class="item fl"><div class="icon"></div><div class="info"></div></div><div class="clear"></div></div>
                
            </div>
        </div>
        <div class="clear"></div>
    </div>
</body>

今日无问题！