列表页面的实现

一、头部，尾部：

引用头部、尾部：

<iframe id="iheard" src="header.html"></iframe>

<iframe id="ifooter" src="footer.html"></iframe>

二、列表页面：

一：块状标签新属性：display:inline-block;(行内块元素)

display: inline-block;

inline-block可以说是结合了inline和block的部分属性，最大的特点便是可以使元素在一行上显示 ，又能够改变元素的height，width的值. 使用padding，margin的top，left，bottom，right都能够撑开元素。

二：、完成项目内容商品列表：1、先使用div+ul li标签写出大致框架2、使用css美化页面

（1）、调整图片大小以及边距（2）、设置浮动（3）、设置字体颜色（4）、设置块状标签以及边框颜色、字体颜色（5）、添加收藏和购物车图标3、添加页头页脚四、问题收藏和购物车的小图标的添加问题（图标过大，图标坐标不准确等）。

三、解决方案1、先在“收藏”a标签里“收藏”文字前添加span标签

<li>
					<a><img src="img/cake1_s1.jpg"/></a>
					<p id="price">￥198.0</p>
					<p id="title">悦轩饼家蛋糕/提拉米苏(约2磅)</p>
					<p id="buy">
					   <a id="heart" href="#"><span></span>收藏</a>
					   <a id="cart" href="#"><span></span>加入购物车</a>
					</p>
				</li>