xx闪购-商品列表布局设计

1.页面结构：

<div class="seckill-goods"><ul><li></li><li></li><li></li><li></li></ul></div>

.seckill-goods li {width: 400px;height: 190px;background-color: #fff;
}

在浏览器中的显示效果！

1.1.

<div class="seckill-goods"><ul class="clearfix"><li></li><li></li><li></li><li></li></ul></div>

.seckill-goods ul {border: 1px solid black;
}
.seckill-goods li {float: left;width: 400px;height: 190px;background-color: #fff;
}
/*为了实现效果自己加的样式*/
.clearfix{overflow:auto;_height:1%
}

在浏览器中的显示效果！

1.2.显示空出来的间隙

.seckill-goods li {float: left;width: 400px;height: 190px;background-color: #fff;/*border: 1px solid black;*//*显示空出来的间隙,右 下 */margin-right: 13px;margin-bottom: 13px;
}.clearfix{overflow:auto;_height:1%
}

在浏览器中的显示效果！

1.2.1去边框：

.seckill-goods ul {margin-right: -13px;/*border: 1px solid black;*/
}
.seckill-goods li {float: left;width: 400px;height: 190px;background-color: #fff;/* border: 1px solid black;*//*显示空出来的间隙,右 下 */margin-right: 13px;margin-bottom: 13px;
}.clearfix{overflow:auto;_height:1%
}

在浏览器中的显示效果！

2.做文字提示：

<div class="seckill-goods"><ul class="clearfix"><li></li><li></li><li></li><li></li></ul></div><p>*小米闪购活动规则：小米闪购商品不享受该商品在小米商城其它优惠政策（包括但不限于优惠券、赠品、满减等）<br>温馨提示：因可能存在系统缓存、页面更新导致价格变动异常等不确定情况出现，如果您发现活动商品价格或促销商品有异常，请您立刻联系小米客服，以便我们及时补正。</p>

在浏览器中的显示效果！

2.1.调整距离：

<ul class="clearfix"><li></li><li></li><li></li><li></li></ul></div><p class="seckill-notice">*小米闪购活动规则：小米闪购商品不享受该商品在小米商城其它优惠政策（包括但不限于优惠券、赠品、满减等）<br>温馨提示：因可能存在系统缓存、页面更新导致价格变动异常等不确定情况出现，如果您发现活动商品价格或促销商品有异常，请您立刻联系小米客服，以便我们及时补正。</p>

.seckill-notice {font-size: 12px;color: #999;margin-top: 100px;/*距底边的距离*/padding-bottom: 35px;
}
.clearfix{overflow:auto;_height:1%}

在浏览器中的显示效果！

3.框的样式：

<div class="seckill-goods"><ul class="clearfix"><li><div class="bg"></div><div class="info"></div></li></ul></div>

.seckill-goods .bg {float: left;width: 190px;height: 190px;border: 1px solid red;
}
.seckill-notice {font-size: 12px;color: #999;margin-top: 100px;/*距底边的距离*/padding-bottom: 35px;
}

在浏览器中的显示效果！

3.1.

.seckill-goods .bg {float: left;width: 190px;height: 190px;border: 1px solid red;
}
.seckill-goods .info {margin-left: 210px;width: 190px;height: 190px;border: 1px solid black;
}

在浏览器中的显示效果！

xx闪购-商品列表布局设计相关推荐

xx闪购——商品信息
1.把图片放在 cc/img 的文件夹里:D:\cc\img 2.把图片显示出来: <ul class="clearfix"><li><div cla ...
item_search - 根据关键词获取义乌购商品列表
为了进行电商平台API开发,我们需要做下面几件事情. 1)开发者注册一个账号 2)然后在平台应用注册一个应用程序键(App Key) . 3)下载平台API的SDK并掌握基本的API基础知识和调用 4 ...
android天猫app首页布局,仿天猫App实现商品列表布局切换效果
昨天有朋友问了我这样一个需求,就是在天猫App中首页进入搜索界面,搜索出的商品页中,有一个按钮可以切换商品列表的布局.没有用过或者用的少天猫App的赶紧下载体验下(哈哈,给天猫打个广告~).如果你很懒 ...
做xx闪购网站准备工作
1. 创建文件夹cc -->cc中创建 css,img,js 文件夹与 index.html文件: 2.在 css 文件夹-->创建文本文档--> 重命名为 style.cs ...
Vue实战之 9.商品管理 -- 商品列表
1. 商品管理概述商品管理模块用于维护电商平台的商品信息,包括商品的类型.参数.详情等.通过商品管理模块可以实现商品的添加.修改.展示和删除等功能. 2. 商品列表实现商品列表布局效果调用后台接 ...
纯HTML编写仿淘宝粉丝福利购页面-优惠券、商品列表、图片悬浮等布局
简介最近温习一下HTML5+CSS3的一些特性,准备找个高仿的目标,最后选择了淘宝粉丝福利页面,因为这个页面包含的元素比较多.例如:头部品牌信息悬浮.商品属性.优惠券.商品类别等. 实现效果: 设计 ...
悬浮框_纯HTML实现某宝优惠券、商品列表和活动悬浮等布局（文末有源码）
简介最近温习一下HTML5+CSS3的一些特性,准备找个高仿的目标,最后选择了某宝粉丝福利页面,因为这个页面包含的元素比较多.例如:头部品牌信息悬浮.商品属性.优惠券.商品类别等. 实现效果实现效 ...
【愚公系列】2022年11月 uniapp专题-优购电商-商品列表
文章目录前言一.商品列表前言商品详情页是展示商品详细信息的一个页面,承载在网站的大部分流量和订单的入口.京东商城目前有通用版.全球购.闪购.易车.惠买车.服装.拼购.今日抄底等许多套模板.各套 ...
【易购管理系统】商品列表
我们来写一下商品管理界面在Goods.vue中 <template><div><div class="header& ...
微信小程序电商实战-商品列表流式布局
微信小程序电商实战-商品列表流式布局流式布局概念流式布局也叫百分比布局把元素的宽,高,margin,padding不再用固定数值,改用百分比, 这样元素的宽,高,margin,padding会根 ...

xx闪购-商品列表布局设计

xx闪购-商品列表布局设计相关推荐

最新文章

热门文章