前端学习第二天第二课-CSDN博客

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

第二课作业，这课作业比较繁琐。完成下图的代码画框

成果如下：

style：

<style>
        .box{width: 1000px;height: 450px;background-color: red;padding: 15px;}
        .head{width: 990px;height: 60px;background-color: blue;padding: 5px;}
        .title{width: 300px;height: 50px;background-color: pink;padding: 5px;float: left;}
        .title_list{width: 200px;height:50px;background-color: green;float: left;}
        .arrow{width: 80px;height:50px;background-color: green;float: right;}
        .clear{clear: both;}
        .nav{width: 500px;height:50px;background-color: pink;padding: 5px;float: right;}
        .item{width: 80px;height:50px;background-color: green;float: right;margin-left: 20px;}
        .product{width: 970px;height: 335px;background-color: blue;margin-top: 15px;padding: 15px;}
        .main_product{width: 285px;height: 305px;background-color: pink;float: left;padding-top: 30px;padding-left: 15px;}
        .pro_list{width: 650px;height: 335px;background-color: pink;float: right;}
        .main_pic{width: 270px;height:190px;background-color: green;}
        .info{width: 270px;height:30px;background-color: green;margin-top: 10px;}
        .main_price{width: 270px;height:30px;background-color: green;margin-top: 10px;}
        .pro_list_part{width: 610px;height:132px;background-color: green;margin: 10px;padding: 10px;}
        .part1{width: 280px;height:112px;background-color: purple;float: left;padding: 10px;}
        .part2{width: 280px;height:112px;background-color: purple;float: right;padding: 10px;}
        .part_pic{width: 120px;height:112px;background-color: gray;float: left;}
        .part_item{width: 150px;height:112px;background-color: gray;float: right;}
        .part_item_info{width: 130px;height:40px;background-color: yellow;margin-top: 10px;margin-left: 10px;}
        .part_item_price{width: 130px;height:30px;background-color: yellow;margin-top: 10px;margin-left: 10px;}

    </style>

body：

<body>
    <div class="box">
        <div class="head">
            <div class="title">
                <div class="title_list"></div>
                <div class="arrow"></div>
                <div class="clear"></div>
            </div>
            <div class="nav">
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="clear"></div>
            </div>
            <div class="clear"></div>
        </div>
        <div class="product">
            <div class="main_product">
                <div class="main_pic"></div>
                <div class="info"></div>
                <div class="main_price"></div>
            </div>
            <div class="pro_list">
                <div class="pro_list_part">
                    <div class="part1">
                        <div class="part_pic"></div>
                        <div class="part_item">
                            <div class="part_item_info"></div>
                            <div class="part_item_price"></div>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="part2">
                        <div class="part_pic"></div>
                        <div class="part_item">
                            <div class="part_item_info"></div>
                            <div class="part_item_price"></div>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="pro_list_part">
                    <div class="part1">
                        <div class="part_pic"></div>
                        <div class="part_item">
                            <div class="part_item_info"></div>
                            <div class="part_item_price"></div>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="part2">
                        <div class="part_pic"></div>
                        <div class="part_item">
                            <div class="part_item_info"></div>
                            <div class="part_item_price"></div>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
            <div class="clear"></div>
        </div>
</body>

这课作业遇到的问题：