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:向左浮动。