悦轩饼家项目商品列表页面

1)主题(目标):

完成悦轩饼家项目商品列表页面

2)完成页面所需要的知识点(重难点)

需要用到ul li 标签来对图片进行排版

list-style: none;将图片前面的小黑点去除

display: inline-block;将inline元素变为inline和block共存的元素

vertical-align: middle;把此元素放置在父元素的中部。

p标签内的文本内容可以直接占用一行

3)完成页面的步骤

首先用ul li 来装图片并排版,再用float:left;使图片浮动,再在CSS内调整图片大小至适合页面,

用P标签装图片下面的文本内容,图片下面的收藏和购物车按钮是难点,字体前面要加上图片并调整至合适位置,图片要用背景图片。

如图:

4)写页面的过程中碰到的问题,怎么解决的?

调整收藏和购物车前面背景图片是难点,如何将图片和文字在格子内居中,怎么使图片大小刚好合适,通过查阅浏览器,听老师讲解,询问同学成功将问题解决。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值