前言

本文主要介绍了淘宝产品详情的制作

一、示例图

二、制作步骤

1.HTML结构

代码如下（示例）：

  <!-- 外部容器 --><div class="wrap"><!-- 产品图片 --><div class="picture"><img src="./img/taobao.jpg" alt=""></div><!-- 产品介绍 --><div class="good-info"><div class="title"><p><a href="">外贸精品 纯亚麻浪漫 法式奢华 蕾丝花边单人枕套 头部天然空调</a></p></div><div class="tag-item"><span>送运费险</span></div></div><!-- 产品价格 --><div class="price"><a href="" class="money1">￥</a><a href="" class="money2">39.9</a></div></div>

2.CSS样式

代码如下（示例）：

 <style>.wrap {position: relative;width: 348px;height: 152px;padding: 11px;border-radius: 10px;margin-top: 100px;margin-left: 100px;background-color: rgb(247, 249, 250);border: 1px solid rgba(247, 249, 250, alpha);}.wrap:hover {border: 1px solid #FAB596;background-color: #fefefe;box-shadow: 0 5px 10px -5px #FAB596;}.wrap .picture img {position: absolute;float: left;width: 150px;height: 150px;border-radius: 10px;}.wrap .picture img:hover{opacity: .9;}.wrap .good-info {position: absolute;float: left;margin-left: 160px;margin-top: 7px;}.wrap .good-info .title {width: 186px;height: 46px;overflow: hidden;}.wrap .good-info .title a {color: #333333;font-size: 16px;font-family: tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;line-height: 23px;}.wrap .good-info .title:hover a {color: #fe5405f3;}.wrap .good-info .tag-item {width: 58px;height: 20px;padding: 0px 4px;}.wrap .good-info .tag-item span {color: #FF5000;background: #FFFFFF;height: 20px;line-height: 20px;display: block;font-size: 12px;font-family: tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;border: 1px solid #ff5000;border-color: #FAB596;border-radius: 3px;text-align: center;margin-top: 8px;margin-left: -4px;}.wrap .price {position: absolute;float: right;width: 279px;height: 24.33px;margin-left: 162px;margin-top: 116px;}.wrap .price .money1 {font: 14px "Microsoft Yahei";color: #ff5000;}.wrap .price .money2 {font-size: 22px;color: #ff5000;margin-left: -3px;font-family: tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;}</style>

总结

以上就是有关产品详情的制作，希望可以帮助到你吧~

CSS——淘宝-产品详情的制作相关推荐

golang采集淘宝产品详情信息解决禾匠小程序采集淘宝失效的问题
最新刚开始学习golang,又遇到客户用了禾匠的小程序,不过遇到了采集淘宝失效的问题,正好就拿go来练练手吧最近有非程序员加我,问我怎样用,懂代码的话拿去直接用,不懂代码的话可以联系我帮忙给集成到 ...
淘宝产品详情页布局怎么做？大神导航，一个神奇的网站，从此开启大神之路！
不看你一定会后悔! 大神导航,一个神奇的网站,从此开启大神之路! 轻松导航,不仅有最新资讯,还有最近使用记录.常用推荐,方便用户使用!图标精美,良心精美.简易搜索,功能齐全,免费高质量素材任意挑选! ...
淘宝商品SKU接口、DESC信息、淘宝产品详情API
以下是行业内了解到的一些情况,本帖只展示部分代码,需要更多API调试请移步注册API账号 http://console.open.onebound.cn/console/?i=Turbo {" ...
淘宝产品详情页上拉加载图片详情效果实现
希望有建议可以一起交流. 不累赘多余语言,看效果图: 代码如下 #import "ViewController.h" #import "UIView+Category.h ...
弘辽科技：如何制作高转化的淘宝宝贝详情页？只需三招！
原标题<弘辽科技:如何制作高转化的淘宝宝贝详情页?只需三招!> 商品详情页是影响店铺转化的重要的因素之一,很多商家都觉得宝贝详情页很难制作,其实制作宝贝详情页还是很简单的,首先我们就要找准 ...
优质淘宝产品描述页模板框架PSD分层模板，美工实用素材
大家应该都知道网购现在流行,但也很激烈. 如何才能够让购物者在第一时间购买你的产品呢? 想必作为淘宝卖家的都知道一个好的产品描述可以快速吸引顾客购买,但是没样的描述模板才会是最佳模板呢? 看看优秀P ...
淘宝美工详情页头条如何设计
本文由:"学设计上兔课网"原创,图片素材来自网络,仅供学习分享淘宝美工详情页头条如何设计?在电商设计工作中,详情页的设计是我们不得不面对的一大难题,和普通专题页不一样,详情页设计 ...
淘宝店铺装修详情页图片设计技巧及注意事项
淘宝网店装修详情页比起其他版块的装修要更为复杂一些,特别是在产品图片的优化设计之上如果不注意的那么整个页面的风格都会受到影响,反之则会提升整个淘宝网店装修的视觉效果.那么在淘宝网店装修的时候该如何处理 ...
iOS app url scheme跳转到淘宝商品详情页唤醒app
最近涉及的一个业务,在app内的一个广告,点击打开webView,加载的是一个淘宝商品详情页,效果是打开该webView自动跳转至淘宝对应的页面,同时在自己的app仍然加载页面,点击评论等也同样能跳转 ...
淘宝商品详情接口，淘宝详情页接口，宝贝详情页接口，商品属性接口,商品信息查询,商品详细信息接口,h5详情,淘宝APP详情
一.接口参数说明: 提取淘宝商品详情页各项数据,包含skuid.价格.收藏数.加购数.月销售量.主图.标题.详情页图片,点击获取请求key和secret 二.建议使用场景 1.商品销售情况分析,根据销 ...

CSS——淘宝-产品详情的制作

文章目录

前言

一、示例图

二、制作步骤

1.HTML结构

2.CSS样式

总结

CSS——淘宝-产品详情的制作相关推荐

最新文章

热门文章