苏宁易购商品页小练习

本练习是主要是练习浮动的相关应用。

浮动的特点：

（1）浮动元素脱离文档流之后，不会再占有文档流的位置，它下边的元素会立即向上移动

（2）元素浮动之后，元素会尽量的向页面的左上或右上浮动

（3）浮动元素默认会在父元素区域内活动，不会从父元素中移出

（4）浮动元素上面是一个没有浮动块元素，则浮动元素无法上移

（5）浮动元素不会超过它上边的兄弟，最多一边齐

（6）浮动可以让页面中元素水平排列，也可以做图文效果，目前以布局为主。（浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以可以利用浮动来设置文字环绕图片的效果。）

（7）脱离文档流之后，不会再区分块和行内元素。

当元素设置浮动以后，会脱离文档流，块，行内元素的特点也会发生改变。

块元素：不会独占一行；块元素的宽高被内容撑开

行内元素：可设宽高

index.html 部分：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>为你推荐</title><link rel="stylesheet" href="index.css">
</head><body><div class="tab-content"><ul><li><a class="tit" href="#" title="自营 小熊(Bear)养生壶1.5L迷你玻璃电水壶电热水壶 多功能煮茶壶 YSH-C15K1 119.00元"><img class="lazy-loading" src="./image/shuihu.jpg"><p class="title"><i class="zyIcon"><img src="./image/zy.png" alt="自营"></i>小熊(Bear)养生壶1.5L迷你玻璃电水壶电热水壶 多功能煮茶壶 YSH-C15K1</p><p class="cxIcon"></p><p class="price-box"><span class="price"><i>¥</i><em>119.00</em></span><span class="refprice"><del><i>¥</i><em>159.00</em></del></span><span></span></p></a></li><li><a class="tit" href="#" title="海尔(Haier)冰柜家用低温迷你小冰柜冷柜冷藏冷冻切换速冻零下小型电冰柜-40℃深冷制冻细胞级冷冻BC-100HET"><img class="lazy-loading" src="./image/bingxiang.jpg"><p class="title">海尔(Haier)冰柜家用低温迷你小冰柜冷柜冷藏冷冻切换速冻零下小型电冰柜-40℃深冷制冻细胞级冷冻BC-100HET</p><p class="cxIcon"><span>大聚惠</span><span>包邮</span></p><p class="price-box"><span class="price"><i>¥</i><em>1399.00</em></span><span></span></p></a></li><li><a class="tit" href="#" title="【赠耳机套】惠普 蓝牙耳机无线运动游戏入耳式适用华为苹果iPhone手机游戏运动降噪电脑专用入耳式耳麦男女高颜值"><img class="lazy-loading" src="./image/lanya.png" width="227" height="227"><p class="title">【赠耳机套】惠普 蓝牙耳机无线运动游戏入耳式适用华为苹果iPhone手机游戏运动降噪电脑专用入耳式耳麦男女高颜值</p><p class="cxIcon"><span>百亿补贴</span><span>包邮</span><span>领券49减5</span></p><p class="price-box"><span class="price"><i>¥</i><em>64.00</em></span><span class="refprice"><del><i>¥</i><em>249.00</em></del></span><span></span></p></a></li><li><a class="tit" href="#" title="自营 苏泊尔(SUPOR)绞肉机家用多功能大容量 碎菜机搅肉机食品级杯体 搅拌机不锈钢机头 料理机搅拌机JR05 129.00元"><img class="lazy-loading" src="./image/jiaorouji.jpg" width="227" height="227"><p class="title"><i class="zyIcon"><img src="./image/zy.png" alt="自营"></i>苏泊尔(SUPOR)绞肉机家用多功能大容量 碎菜机搅肉机食品级杯体 搅拌机不锈钢机头 料理机搅拌机JR05</p><p class="cxIcon"><span>领券129减20</span></p><p class="price-box"><span class="price"><i>¥</i><em>129.00</em></span><span class="refprice"><del><i>¥</i><em>143.90</em></del></span><span></span></p></a></li><li><a class="tit" href="#" title="海南金钻凤梨 5斤带箱 2-3个 新鲜水果 生鲜水果 陈小四水果 生鲜特产 35.80元"><img class="lazy-loading" src="./image/fengli.jpg"><p class="title">海南金钻凤梨 5斤带箱 2-3个 新鲜水果 生鲜水果 陈小四水果 生鲜特产</p><p class="cxIcon"></p><p class="price-box"><span class="price"><i>¥</i><em>35.8</em></span></p></a></li></ul></div>
</body></html>

index.css部分：

*{margin: 0;padding: 0;
}
img {border: none;/* 使图片清晰 */image-rendering: -webkit-optimize-contrast;
}
li{list-style: none;
}
a {text-decoration: none;
}
.tab-content{display: block;width: 100%;height: 100%;margin: 50px;background-color: #F2F2F2;
}li{display: inline-block;width: 230px;height: 350px;background-color: #FFF;border-radius: 10px;margin: 10px;
}
.tab-content li a:hover{color: #FF6600;
}
/* 设置外阴影 */
li:hover{box-shadow: 0 0 10px #fff;
}
/* 商品图片 */
.tit img{float: left;width: 230px;height: 230px;border-top-left-radius: 10px;border-top-right-radius: 10px; margin:0 0 10px;
}.tab-content li .tit {width: 202px;height: 40px;overflow: hidden;color: #333;font: 14px/20px 'Microsoft Yahei',tahoma,arial,'Hiragino Sans GB';
}
/* 自营 */
.zyIcon img{float: left;width: 35px;height: 18px;margin:2px 5px 0 0;background-size: 100%;/* vertical-align: middle; *//* line-height: 18px; */
}
/* 商品标题 */
.title{width: 202px;height: 40px;margin-bottom: 8px;margin-left: 14px;margin-top: 0;overflow: hidden;
}/* 优惠 */
.cxIcon{margin: 0 0 0 14px;width: 190px;height: 18px;
}
.cxIcon span{float: left;padding: 0 2px;height: 16px;color: #ff8000;font: 14px/16px 'Microsoft Yahei',tahoma,arial,'Hiragino Sans GB';background: #fff;border: 1px solid #ff8000;margin-right: 7px;border-radius: 3px;
}
/* 价格 */
.price-box{margin: 8px 14px ;/* border: 1px solid #ff8000; */
}
em,i{font-style: normal;
}.price{color: #FF3300;font-size: 20px;font-weight: 700;line-height: 28px;text-align: left;
}.refprice{color: #999;font-size: 13px;font-weight: 400;line-height: 18px;margin-left: 6px;text-align: left;
}

效果图：

苏宁易购商品页小练习相关推荐

爬虫项目十：Python苏宁易购商品数据、评论数据爬取
文章目录前言一.商品数据 1.分析url 2.解析数据 3.实现翻页二.评论数据前言利用Python对苏宁易购商品数据评价数据实现爬取提示:以下是本篇文章正文内容,下面案例可供参考一.商 ...
基于python苏宁易购商品信息爬取
本文思路来源崔庆才老师的淘宝商品爬取 -首先打开苏宁易购网站,找到搜索框以及搜索按钮接口,模拟人工操作,输入关键词,并进行点击搜索操作,进入到商品的详细页. from selenium import ...
获取苏宁易购商品的评论图片
苏宁易购评论图怎么保存?可以在电脑上操作吗?下图高手可以支持吗?小编的回答当然是可以的,下面一起来试试. 进入苏宁易购,输入关键词,挑选商品喜欢哪个商品进入页面,选中并复制上方的链接把复制好的链接 ...
苏宁易购商品详情API接口
API 名称: item_get - 获得suning商品详情 num_iid=0070134261/703410301 (num_iid:店铺ID/商品ID) 欢迎使用亚苏宁易购API接口 API测 ...
python 爬取苏宁易购商品信息和评论的详细流程
总体说明爬取苏宁易购的最大难点就在于他这个页面是很多js动态加载的内容,寻找和构造链接比较麻烦,如果不用JS逆向工程.采用selenium等爬取的效率相对会比较差一点,下面我会先放上我找的js动态加 ...
如何一键批量采集苏宁易购商品主图、详情图、及视频
一.所用采集工具(载图助手)百度上可以查找并下载安装. 1.在浏览器打开苏宁易购平台,找到您所要采集的商品类目,然后点击一个商品进入,如图: 2.启用软件的批量下载功能打开"自动粘贴网址&q ...
获取苏宁易购商品信息操作详情
一.注册在使用API之前,首先您需要注册一个属于自己的key,PI网站注册后最重要的个人数据是请求key值,每个不同的数据都有与之对应的请求key值,因此账号一定要妥善保存点击注册二.使用展示 ...
苏宁易购商品详情 API
onebound.suning.item_get 注册使用接口 api文档响应示例 "item": { "num_iid": "00 ...
分布式爬虫系统设计、实现与实战：爬取京东、苏宁易购全网手机商品数据+MySQL、HBase存储...
http://blog.51cto.com/xpleaf/2093952 1 概述在不用爬虫框架的情况,经过多方学习,尝试实现了一个分布式爬虫系统,并且可以将数据保存到不同地方,类似MySQL.HB ...

苏宁易购商品页小练习

苏宁易购商品页小练习相关推荐

最新文章

热门文章