一.主要思路

1.写一个大盒子，将内部分为如图几个部分，分别写对应的内容

2.首先给整个盒子宽高，传进图片后调整图片宽高

3.重点在于“找同款”和“买家秀”的隐藏效果写法

4.需要考虑到图片与“找同款”“买家秀”的相对绝对位置关系，图片作为父级元素，“找同款”“买家秀”作为子元素

5.还需要注意的是底部活动图标的位置大小调整，需要先给小盒子合适的宽高，再根据盒子的宽高调整图片的大小，最后调整左右间距，达到理想效果即可

二.完整代码

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><title>仿制淘宝商品界面</title><style type="text/css">.all{width: 250px;height: 380px;float: left;margin: 50px;border: 1px solid rosybrown;}.imagehover,img{width: 250px;height: 250px;}.imagehover{position: relative;}.imagehoverchild{position: absolute;bottom: 0px;display: none;          }.imagehoverchild>div{width: 125px;float: left;background-color: orangered;text-align: center;color: white;}.imagehoverchild>div:first-child{width: 124px;border-right: 1px solid white;border-top-left-radius: 25%;}.imagehoverchild>div:last-child{border-top-right-radius: 25%;}.imagehover:hover>.imagehoverchild{display: block;                  }.message{height: 0px;}.message>span:first-child{font-size: 20px;font-weight: 200px;color: orange;}.message>span:nth-child(2){font-size: 14px;background-color: red;color: white;padding-left: 2px;padding-right: 2px;}.message>span:nth-child(3){font-size: 14px;float: right;color: #999;padding-right: 5px;padding-top: 4px;}.message>span:nth-child(4){font-size: 15px;color: black;}.store>a{font-size: 15px;padding-left: 3px;}.store>span{font-size: 14px;vertical-align: middle;float: right;color: #999;}.store{margin-right: 2px;}.activitiesimg>a:first-child{display: inline-block;width: 60px;height: 30px;background-size: 60px 30px;background-image: url("双十一1.png");}.activitiesimg>a:nth-child(2){display: inline-block;width: 30px;height: 30px;background-size: 30px 30px;background-image: url("天猫.png");}.activitiesimg>a:last-child{display: inline-block;width: 30px;height: 30px;background-size: 30px 30px;background-image: url("小精灵.png");float: right;}.activitiesimg{padding-top: 5px;}</style></head><body><div class="all"><div class="imagehover"><img src="狼.png" alt=""><div class="imagehoverchild"><div>找同款</div><div>买家秀</div></div><div class="message"><span>￥666.00&nbsp;&nbsp;</span>   <span>包邮&nbsp;</span>         <span>6万+人付款</span>         <span>xxxxxx加绒卫衣男冬款<span style="color: red;">衣服</span>情侣xx秋装上衣xx印花外套</span><div class="store"><a href="#">xxxxxxxx旗舰店</a><span>四川-成都</span></div><div class="activitiesimg"><a href="#"></a><a href="#"></a><a href="#"></a></div></div></div></div>    </body>
</html>

<!DOCTYPE html>
<html lang="zh">
   <head>
       <meta charset="UTF-8">
       <title>仿制淘宝商品界面</title>
       <style type="text/css">
           .all{
               width: 250px;
               height: 380px;
               float: left;
               margin: 50px;
               border: 1px solid rosybrown;
           }
           /*整体给个宽、高、边框*/
           .imagehover,img{
               width: 250px;
               height: 250px;
           }
           .imagehover{
               position: relative;
           }
           /*大图片部分*/
           .imagehoverchild{
               position: absolute;
               bottom: 0px;
               display: none;
           }
           .imagehoverchild>div{
               width: 125px;
               float: left;
               background-color: orangered;
               text-align: center;
               color: white;
           }
           .imagehoverchild>div:first-child{
               width: 124px;
               border-right: 1px solid white;
               border-top-left-radius: 25%;
           }
           .imagehoverchild>div:last-child{
               border-top-right-radius: 25%;
           }
           .imagehover:hover>.imagehoverchild{
               display: block;
           }
           /*找同款和买家秀部分*/
           .message{
               height: 0px;
           }
           .message>span:first-child{
               font-size: 20px;
               font-weight: 200px;
               color: orange;
           }
           .message>span:nth-child(2){
               font-size: 14px;
               background-color: red;
               color: white;
               padding-left: 2px;
               padding-right: 2px;
           }
           .message>span:nth-child(3){
               font-size: 14px;
               float: right;
               color: #999;
               padding-right: 5px;
               padding-top: 4px;
           }
           .message>span:nth-child(4){
               font-size: 15px;
               color: black;
           }
           /*价格、包邮、购买人数、商品信息部分*/
           .store>a{
               font-size: 15px;
               padding-left: 3px;
           }
           .store>span{
               font-size: 14px;
               vertical-align: middle;
               float: right;
               color: #999;
           }
           .store{
               margin-right: 2px;
           }
           /*店铺、地区部分*/
           .activitiesimg>a:first-child{
               display: inline-block;
               width: 60px;
               height: 30px;
               background-size: 60px 30px;
               background-image: url("双十一1.png");
           }
           .activitiesimg>a:nth-child(2){
               display: inline-block;
               width: 30px;
               height: 30px;
               background-size: 30px 30px;
               background-image: url("天猫.png");
           }
           .activitiesimg>a:last-child{
               display: inline-block;
               width: 30px;
               height: 30px;
               background-size: 30px 30px;
               background-image: url("小精灵.png");
               float: right;
           }
           .activitiesimg{
               padding-top: 5px;
           }
           /*底部三个活动图部分*/
       </style>
   </head>
   <body>
       <div class="all">
           <div class="imagehover">
               <img src="狼.png" alt="">
               <div class="imagehoverchild">
                   <div>找同款</div>
                   <div>买家秀</div>
               </div>
               <div class="message">
                   <span>￥666.00  </span>
                   <span>包邮 </span>
                   <span>6万+人付款</span>
                   <span>xxxxxx加绒卫衣男冬款<span style="color: red;">衣服</span>情侣xx秋装上衣xx印花外套</span>
                   <div class="store">
                       <a href="#">xxxxxxxx旗舰店</a>
                       <span>四川-成都</span>
                   </div>
                   <div class="activitiesimg">
                       <a href="#"></a>
                       <a href="#"></a>
                       <a href="#"></a>
                   </div>
               </div>
           </div>
       </div>
   </body>
</html>

三.最终效果

html+css简单仿制淘宝商品界面相关推荐

仿淘宝商品界面（html div+css)
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
HTML+CSS简单的淘宝首页框架布局小练(一）
开的前端的课程,练习淘宝的前台页面的框架,就简单根据理解写了下,(小傻猫)记录学习的经历简单首先分析下淘宝首页的布局框架(小傻猫),自己理解的首先需要注意的是该部分的布局,是将该部分分成量大块布局 ...
仿淘宝商品浏览界面，向上拉查看详情
最新项目中有展示类似淘宝商品详情的功能,主要实现向上拉查看详情,百度一搜,发现有大神已经实现这个效果了 http://blog.csdn.net/zhongkejingwang/article/d ...
简单易懂通过关键词获得淘宝商品API
API名称: item_search - 按关键字搜索淘宝商品按关键字搜索淘宝商品 API 返回值说明请求参数请求参数:q=女装&start_price=0&end_price= ...
python+scrapy简单爬取淘宝商品信息
python结合scrapy爬取淘宝商品信息一.功能说明: 已实现功能: 通过scrapy接入selenium获取淘宝关键字搜索内容下的商品信息. 待扩展功能: 爬取商品中的全部其他商品信息. 二. ...
[Python3网络爬虫开发实战] 7-动态渲染页面爬取-4-使用Selenium爬取淘宝商品
在前一章中,我们已经成功尝试分析Ajax来抓取相关数据,但是并不是所有页面都可以通过分析Ajax来完成抓取.比如,淘宝,它的整个页面数据确实也是通过Ajax获取的,但是这些Ajax接口参数比较复杂,可 ...
猪悟能淘宝商品下载专家v2.0 beta1.0版发布，欢迎测试！
图1 软件界面 v2.0 版的功能介绍: .下载方式灵活,可以按店铺地址,掌柜名,宝贝分类下载,也可以下载单个宝贝 .这个版本已经可以把数据库的商品导出为淘宝CSV.拍拍CSV.有啊CSV格式.这样 ...
python爬取并分析淘宝商品信息
python爬取并分析淘宝商品信息背景介绍一.模拟登陆二.爬取商品信息 1. 定义相关参数 2. 分析并定义正则 3. 数据爬取三.简单数据分析 1.导入库 2.中文显示 3.读取数据 4.分 ...
用Python打造一个智能搜索淘宝商品，生成操作日志的系统
/1 前言/ 随着网购的兴起,使得很多传统店铺转型做线上生意,电子商务的产生极大便利了我们的生活. /2 项目目标/ 通过Python程序一键搜索并直达目的地,爬取淘宝商品链接,商品名称,及商品的图片 ...

html+css简单仿制淘宝商品界面

一.主要思路

二.完整代码

三.最终效果

html+css简单仿制淘宝商品界面相关推荐

最新文章

热门文章