第二课作业,这课作业比较繁琐。 完成下图的代码画框
成果如下:
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>
这课作业遇到的问题: