一 课程名称

课程名称：前端油画商城案例

课程章节：模块商品展示2 商品展示3

二 课程内容

完整标题，正文，价格，购车的左右间距 垂直间距 边框等

1. 首先处理的是边框

因为是从图片的左上角到购物车的右下角，按层级关系找到

.content .img-content ul li

然后添加上边距和高度

效果（还有边框没有加进来）

添加边框 box-shadow分别是 阴影的水平位置，垂直阴影的位置，模糊的距离，阴影的尺寸，阴影的颜色

效果

添加浏览器独有的box-shadow因为有些浏览器不支持box-shadow

顺便把背景颜色也添加上去

2. 修改标题 通过大于号来修改

重点（大于号是直接找它的下属层级关系，而空格键寻找后续所有层级）

3.修改文字段落 行间距 文字下边框

4.调整整体的左右边框距离 层级关系是info 所以找到info调整它

5.价格css调整

6.给整个body 添加背景颜色

效果

本章完！O(∩_∩)O

三 本章重点

   1. 了解box-shadow属性, 

   2. 知道>号寻找下级的关系，大于号是直接找它的下属层级关系，而空格键寻找后续所有层级