用H5制作仿淘宝商品列表教程

我们在浏览淘宝首页的时候，在页面的左边会看到一个商品列表项，包括标题文字，列表小图标等。下面就让我们一起来制作仿淘宝首页商品分类列表。

操作方法

  • 01

    首先我们在<body>里面定义一个大的<div>标签，取一个ID名，在大的<div>标签里面再定义一个<div>标签和<ul>标签，在<li>标签里面输入，如图

  • 02

    运行程序，结果如图

  • 03

    用内部样式为大的<div>标签设置高度和背景色，如图

  • 04

    运行程序，结果如图

  • 05

    为标题“全部商品分类”设置字体大小，颜色、行高、首行缩进、并插入一张背景图片

  • 06

    运行程序，结果如图

  • 07

    去掉UL列表项前面的小圆点

  • 08

    运行程序，结果如图

  • 09

    最后设置<li>标签的高度，行高、背景图片等

  • 10

    运行程序，结果如图

赞 (0)

相关推荐

  • 淘宝商品信息采集-URL列表采集：八爪鱼图文教程

    淘宝商品信息采集-URL列表采集:八爪鱼图文教程 操作方法 01 步骤1:创建采集任务 1)进入主界面,选择自定义模式 02 2)将上面网址的网址复制粘贴到网站输入框中,点击"保存网址&qu ...

  • 手机微信如何查询淘宝商品历史价格

    手机微信如何查询淘宝商品历史价格

    淘宝是现在十分常用的一款购物软件,有些用户想知道手机微信如何查询淘宝商品历史价格,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步根据下图箭头所指,找到并点击[手机淘宝]图标.2. ...

  • 有赞如何导入淘宝商品

    有赞平台专注打造优质的微信平台,微信商城有如何同步淘宝商品数据,便于我们商城管理和维护,如果您已开有淘宝店铺,可以通过导入淘宝功能快速导入商品,方便信息的统一.导入淘宝商品有两种方式:1.通过淘宝商品 ...

  • 八爪鱼采集器-淘宝商品采集

    八爪鱼采集器是一款很好用的采集器,这里教大家采集淘宝商品,适合淘宝客使用. 操作方法 01 首先打开八爪鱼采集器,然后选择高级模式点击开始采集.(如图) 02 然后输入任务名和备注以及选择任务组,然后 ...

  • 用ps绘制淘宝商品宣传图

    做淘宝的美工应该都会使用ps这个软件,在使用PS的时候,可以用魔棒工具进行抠图操作,然后进行一些处理,贴上价格标签等就可以使用了,下面教你简单的制作方法. ps制作淘宝商品图 01 进入ps界面,将需 ...

  • Mac苹果电脑中如何解决Safari打开的淘宝商品一直提示需要登录的问题

    Mac苹果电脑中如何解决Safari打开的淘宝商品一直提示需要登录的问题

    有的小伙伴字Mac苹果电脑上,用Safari软件打开淘宝商品,页面显示需要登录账号,但是却不想要登录,那么如何解决呢?小编就来为大家介绍一下吧.具体如下:1. 第一步,点击页面左侧的启动台选项,接着在 ...

  • 如何在快手小店添加淘宝商品？

    如何在快手小店添加淘宝商品？

    最近快手推出了快手小店功能,支持用户开通小店售卖商品,很多淘宝商家开通快手小店后,不知道如何添加淘宝商品,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步打开手机中的[快手]App ...

  • 如何在抖音添加淘宝商品

    如何在抖音添加淘宝商品

    抖音是目前最流行的短视频软件,近期推出了商品分享功能,有些用户不知道如何在抖音添加淘宝商品,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步打开手机中的[抖音短视频]App,进入软 ...

  • 如何在快手小店添加淘宝商品并通过直播售卖

    如何在快手小店添加淘宝商品并通过直播售卖

    快手是现在非常热门的一款短视频软件,有些用户想知道如何在快手小店添加淘宝商品并通过直播售卖,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步根据下图箭头所指,找到并点击[快手]图标 ...