xx闪购——商品信息

1.把图片放在 cc/img 的文件夹里：D:\cc\img

2.把图片显示出来：

<ul class="clearfix"><li><div class="bg"><img src="img/1.png" alt=""></div><div class="info"></div></li></ul>

/*.clearfix{overflow:auto;_height:1%}*/

.clearfix{overflow:auto;_height:1%}

2.1.

.seckill-goods .bg img{height: 190px;
}
.seckill-goods .info {margin-left: 210px;width: 190px;height: 190px;border: 1px solid black;
}
.seckill-notice {font-size: 12px;color: #999;margin-top: 100px;/*距底边的距离*/padding-bottom: 35px;
}.clearfix{overflow:auto;_height:1%}

2.2.

<ul class="clearfix"><li><div class="bg"><img src="img/1.png" alt=""></div><div class="info"><a href="">Redmi充电宝 白色10000mAh大电量 </a><p>29.5元 59元</p><a href="">登录后抢购</a><p>已有10229人设置提醒</p></div></li></ul>

2.3.调整文字的样式：

.seckill-goods .info .name {font-size: 16px;color: #333;height: 16px;line-height: 16px;/*不换行,显示在一行*/display: block;/*去掉换行*/white-space: nowrap;
}.seckill-notice {font-size: 12px;color: #999;margin-top: 100px;/*距底边的距离*/padding-bottom: 35px;
}.clearfix{overflow:auto;_height:1%}

2.4.超出的部分隐藏，变点点：

.seckill-goods .info .name {font-size: 16px;color: #333;height: 16px;line-height: 16px;/*不换行,显示在一行*/display: block;/*去掉换行*/white-space: nowrap;/*超出的隐藏*/overflow: hidden;/*变成点点,加文字基本属性*/text-overflow: ellipsis;
}.seckill-notice {font-size: 12px;color: #999;margin-top: 100px;/*距底边的距离*/padding-bottom: 35px;
}
.clearfix{overflow:auto;_height:1%
}

2.5.大电量字体的样式：

<ul class="clearfix"><li><div class="bg"><img src="img/1.png" alt=""></div><div class="info"><a href="" class="name">Redmi充电宝 白色 10000mAh </a><p class="tips">10000mAh 大电量<p><p>29.5元 59元</p><a href="">登录后抢购</a><p>已有10229人设置提醒</p></div></li></ul>

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

2.7.价格字体的样式：

<ul class="clearfix"><li><div class="bg"><img src="img/1.png" alt=""></div><div class="info"><a href="" class="name">Redmi充电宝 白色 10000mAh </a><p class="tips">10000mAh 大电量<p><p class="price"> 29.5元 <del>59元</del></p><a href="">登录后抢购</a><p>已有10229人设置提醒</p></div></li></ul>

.seckill-goods .info .tips {font-size: 12px;line-height: 12px;color: #b0b0b0;margin-top: 10px;
}
.seckill-goods .info .price {font-size: 16px;line-height: 16px;color: #f1393a;margin-top: 14px;
}
.seckill-goods .info .price del {color: #999;font-size: 12px;line-height: 12px;margin-left: 10px;
}
.seckill-notice {font-size: 12px;color: #999;margin-top: 100px;/*距底边的距离*/padding-bottom: 35px;
}
.clearfix{overflow:auto;_height:1%
}

2.9.

<ul class="clearfix"><li><div class="bg"><img src="img/1.png" alt=""></div><div class="info"><a href="" class="name">Redmi充电宝 白色 10000mAh </a><p class="tips">10000mAh 大电量<p><p class="price"> 29.5元 <del>59元</del></p><a href="" class="btn">登录后抢购</a><p>已有10229人设置提醒</p></div></li></ul>

.seckill-goods .info {margin-left: 210px;width: 190px;height: 190px;/*border: 1px solid black;*//*通过调整内边距的大小*/padding-top: 30px;
}
.seckill-goods .info .name {font-size: 16px;color: #333;height: 16px;line-height: 16px;/*不换行,显示在一行*/display: block;/*去掉换行*/white-space: nowrap;/*超出的隐藏*/overflow: hidden;/*变成点点,加文字基本属性*/text-overflow: ellipsis;
}
.seckill-goods .info .tips {font-size: 12px;line-height: 12px;color: #b0b0b0;margin-top: 10px;
}
.seckill-goods .info .price {font-size: 16px;line-height: 16px;color: #f1393a;margin-top: 14px;
}
.seckill-goods .info .price del {color: #999;font-size: 12px;line-height: 12px;margin-left: 10px;
}
.seckill-goods .info .btn {display: inline-block;width: 118px;height: 28px;font-size: 14px;color: #fff;line-height: 28px;text-align: center;background-color: #f1393a;
}
.seckill-notice {font-size: 12px;color: #999;margin-top: 100px;/*距底边的距离*/padding-bottom: 35px;
}
.clearfix{overflow:auto;_height:1%
}

2.1.0.最终样式

<ul class="clearfix"><li><div class="bg"><img src="img/1.png" alt=""></div><div class="info"><a href="" class="name">Redmi充电宝 白色 10000mAh </a><p class="tips">10000mAh 大电量<p><p class="price"> 29.5元 <del>59元</del></p><a href="" class="btn">登录后抢购</a><p class="person" >已有10229人设置提醒</p></div></li></ul>

.seckill-goods .bg {float: left;width: 190px;height: 190px;/*border: 1px solid red;*/
}
.seckill-goods .bg img{height: 190px;
}
.seckill-goods .info {margin-left: 210px;width: 190px;height: 190px;/*border: 1px solid black;*//*通过调整内边距的大小*/padding-top: 30px;
}
.seckill-goods .info .name {font-size: 16px;color: #333;height: 16px;line-height: 16px;/*不换行,显示在一行*/display: block;/*去掉换行*/white-space: nowrap;/*超出的隐藏*/overflow: hidden;/*变成点点,加文字基本属性*/text-overflow: ellipsis;
}
.seckill-goods .info .tips {font-size: 12px;line-height: 12px;color: #b0b0b0;margin-top: 10px;
}
.seckill-goods .info .price {font-size: 16px;line-height: 16px;color: #f1393a;margin-top: 14px;margin-bottom: 0;
}
.seckill-goods .info .price del {color: #999;font-size: 12px;line-height: 12px;margin-left: 10px;
}
.seckill-goods .info .btn {display: inline-block;width: 118px;height: 28px;font-size: 14px;color: #fff;line-height: 28px;text-align: center;background-color: #f1393a;border: 1px solid #f1393a;margin-top: 19px;
}
.seckill-goods .info .person {font-size: 12px;line-height: 12px;color: #999;margin-top: 10px;
}
.seckill-notice {font-size: 12px;color: #999;margin-top: 100px;/*距底边的距离*/padding-bottom: 35px;
}
.clearfix{overflow:auto;_height:1%
}

xx闪购——商品信息相关推荐

基于python苏宁易购商品信息爬取
本文思路来源崔庆才老师的淘宝商品爬取 -首先打开苏宁易购网站,找到搜索框以及搜索按钮接口,模拟人工操作,输入关键词,并进行点击搜索操作,进入到商品的详细页. from selenium import ...
做xx闪购网站准备工作
1. 创建文件夹cc -->cc中创建 css,img,js 文件夹与 index.html文件: 2.在 css 文件夹-->创建文本文档--> 重命名为 style.cs ...
获取苏宁易购商品信息操作详情
一.注册在使用API之前,首先您需要注册一个属于自己的key,PI网站注册后最重要的个人数据是请求key值,每个不同的数据都有与之对应的请求key值,因此账号一定要妥善保存点击注册二.使用展示 ...
python 爬取苏宁易购商品信息和评论的详细流程
总体说明爬取苏宁易购的最大难点就在于他这个页面是很多js动态加载的内容,寻找和构造链接比较麻烦,如果不用JS逆向工程.采用selenium等爬取的效率相对会比较差一点,下面我会先放上我找的js动态加 ...
苏宁易购网址爬虫爬取商品信息及图片
利用scrapy来爬取苏宁官网上任何商品的信息,主要的信息有商品标题.商品现价.商品原价.商铺名称,以及用scrapy的ImagesPipeline来下载商品图片. 部分主函数代码如下: # -*- ...
Bifrost微前端框架及其在美团闪购中的实践
Bifrost(英 ['bi:frɔst])原意彩虹桥,北欧神话中是连通天地的一条通道.而在漫威电影<雷神>中,Bifrost是神域--阿斯加德(Asgard)的出入口,神域的人通过它自由 ...
“闪购”神话的牛皮吹出了泡沫
昨天创业家杂志一篇<神秘公司"闪购"估值百亿调查>亮瞎了众多人的"势利眼",很多电商公司对这家突然估值"百亿"的公司投去羡慕嫉妒 ...
美团闪购：闪电仓商户如狼似虎，传统商超便利店坐享其成？
近日,考研网红教师张雪峰一句"外卖员这个职业5-10年内可能会消失"再度登上热搜. 其实,他的这个推论,只是看到了目前外卖骑手的保有量,截至2021年,中国外卖骑手约1300万名. ...
python京东商品采集_利用Python正则表达式抓取京东网商品信息
京东(JD.com)是中国最大的自营式电商企业,2015年第一季度在中国自营式B2C电商市场的占有率为56.3%.如此庞大的一个电商网站,上面的商品信息是海量的,小编今天就带小伙伴利用正则表达式,并且 ...

xx闪购——商品信息

xx闪购——商品信息相关推荐

最新文章

热门文章