为了账号安全,请及时绑定邮箱和手机立即绑定

【学习打卡】第7天banner区css前端 模块2 商品展示3

一 课程名称


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


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


二 课程内容


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


  1. 首先处理的是边框

    https://img1.sycdn.imooc.com//62f656cb0001af3c05190613.jpg



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

.content .img-content ul li

然后添加上边距和高度

https://img1.sycdn.imooc.com//62f659200001674410690288.jpg

效果(还有边框没有加进来)

https://img1.sycdn.imooc.com//62f6595300019e5813420558.jpg


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

https://img1.sycdn.imooc.com//62f659b60001711c07090265.jpg

效果

https://img1.sycdn.imooc.com//62f65b6c0001387305000529.jpg

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

https://img1.sycdn.imooc.com//62f65f6e00016e4507830492.jpg

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


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

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

https://img1.sycdn.imooc.com//62f6615400018e2705890223.jpg


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

https://img1.sycdn.imooc.com//62f663150001429505240173.jpg


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

https://img1.sycdn.imooc.com//62f663bb0001d81b06390167.jpg

5.价格css调整

https://img1.sycdn.imooc.com//62f664390001491206790188.jpg


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

https://img1.sycdn.imooc.com//62f664d300018a0b07980248.jpg


效果

https://img1.sycdn.imooc.com//62f664f100011d5713640774.jpg


本章完!O(∩_∩)O


三 本章重点

   1. 了解box-shadow属性, 

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


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消