移动端商品列表

用户7695850185112
354 阅读1分钟

移动端商品列表

最终效果图

image.png

基础知识点

多行溢出... 自行百度

高级知识点

图片长边裁切 object-fit: cover;

① 外层是个列表 用list 里层 用item 里面有 图片 图片需要用div 包裹 名字为img 然后下面一个标题 命名 name 一个摘要 abstract

image.png

效果

image.png

开始写样式

首先图片的div 宽高 44vw img 设置 100%

图片地址 www.runoob.com/wp-content/…

image.png

图片挤压变形了 。使用 图片长边裁切

image.png

image.png

② 设置 底部颜色 字体颜色 设置 item 的宽度 。和挤压底部

image.png

效果

image.png

百度搜索

image.png

直接链接 blog.csdn.net/weixin_4296…

image.png

将这两段 样式 放入全局的 。方便以后使用

image.png

在div上 直接使用 一个class 中 可以放入多个样式 需要空格分开

image.png

效果

image.png

然后复制3分

image.png

image.png

需要两端对齐

image.png

image.png

需要 弹性布局之 强制换行

image.png

image.png

需要每个item 上下有些空隙

向内挤压用 padding 向外挤压 用margin

image.png

image.png

完成

知识点 多行溢出... 向内挤压用padding 向外挤压用margin
图片 根据长边裁切 object-fit: cover;

class 命名 规则 列表 用 list 列表里的每一个 用item 列表的意思是 内有多个重复的内容排列

avatar
文章
阅读
粉丝