6.14页面列表

一、主题：完成商品列表

二、完成页面所需要的知识点（重难点）

1、连接头部和尾部：

<iframe src="top.html" class="top"></iframe>

2、盒子模型：

作用：可以更方便的进行布局

定义：我们把所有的标签看做一个盒子（div是一个自定义盒子），css就是用来修饰盒子外观的。

margin重合问题：上面盒子的margin-bottom，和下面的盒子margin-top，会重合，不会累加。左右同理。

盒子高宽问题box-sizing：默认情况下：盒子高度=边框线+边距+height；如果设置为box-sizing：border-box;盒子高度=height;

共同规范，常用属性：

*{
padding:0;

margin:0;

box=sizing:border-box;

}

html{
font-family:"自定义字体颜色"；

font-size:16px;

background-color:#eeeee;

}

三、完成页面步骤

1、先设计一个div，

<div id="div1">
<a href="#"><img src="img/cake1.jpg" id="img1"/></a>
<p style="color: #FF730D;font-weight: bold;"><span>￥198.00</span></p>
<p style="color: #6C6D6E;"><span>悦轩饼家蛋糕/提拉米苏(约2磅)</span></p>

<p id="p3"> 
<a href="#"  id="p1">
<span style="margin-left: 30px;color: #6C6D6E;" id="s1">收藏</span>
</a>
<a href="#" id="p2">
<span style="margin-left: 30px;color: black;">加入购物车</span>
</a>
</p>

</div>
2、设计div的css样式

#img1{
width: 270px;
height: 300px;
}
/* 心形图片 */
#p1{
border: 1px solid #6C6D6E;
display: block;
width: 120px;
height: 20px;
background-repeat: no-repeat;
background-image: url("../img/ico_heart_d.png");
background-position: 2px 3px;
text-decoration: none;
float: left;
text-align: center;
}
#p2{
border: 1px solid #6C6D6E;
display: block;
width: 120px;
height: 20px;
background-repeat: no-repeat;
background-image: url("../img/ico_cart_d.png");
background-position: 0px 4px;
text-decoration: none;
margin-left: 120px;
}
span{
font-size: 12px;
}
 
#div2{
border: 0px solid red;
width: 1200px;
margin-left: 300px;
margin: auto;
}
#div1{
float: left;
}
3、直接复制第一个div，再把图片改改。

四、碰到的问题，怎么解决的？

图片不会浮动。

用float：left:向左浮动。