悦轩饼家项目商品详情

（1）主题（目标）：

完成悦轩饼家项目商品详情页面

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

 <div class="a211" style="margin-bottom : -10px;">
                            <span class="color">售价</span>
                            <span class="prices">￥198</span>
                            <span class="shic">市场价<span class="prices2">￥338</span></span>
                            <span class="yis">已售<span style="color: #FF774F;">6264</span>件</span>
  </div>

售价一栏中的多个单个元素需要调整字体大小和颜色，需要用到多个span标签和p标签来区分，在CSS中调整样式，需要对各个标签之间的灵活运用，并且要非常仔细才能完成页面中各个元素的对应排版位置

float:left这个是该页面布局的重要方法

（3）完成页面的步骤

首先用一个div把要实现的内容给括起来，再将div内部的页面分为左右两个部分，左边是一张大的图片和四个小的图片用div给括起来并且向左浮动，右边的内容因为浮动也会相应的位移到右边，右边的内容也用一个div个括起来，再根据给出的样本将内部的字体按钮等元素用a标签、p标签和span标签给括起来并在css中调整样式和位置，直到和样本中的内容做到基本一致

（4）写页面的过程中碰到的问题，怎么解决的？

这个页面中的字体颜色及大小是难点

解决方法：用多个span标签和p标签来分类，并在CSS中对应样本调整样式

页面中的市场价格要画上横线

解决方法：text-decoration: line-through;可以给字体画上横线

整个页面中多个地方用到边框圆角的设置

解决方法：border-radius: 5px;可以调整元素边框圆角，并且最大值是25