本篇文章给大家谈谈制作淘宝页面网站源码分享，以及淘宝网站制作教程对应的知识点，文章可能有点长，但是希望大家可以阅读完，增长自己的知识，最重要的是希望对各位有所帮助，可以解决了您的问题，不要忘了收藏本站喔。
简介
最近温习一下HTML5+CSS3的一些特性，准备找个高仿的目标，最后选择了某宝粉丝福利页面，因为这个页面包含的元素比较多。例如：头部品牌信息悬浮、商品属性、优惠券、商品类别等。
实现效果
实现效果
设计思路
如上图所示，页面共分为4个区域，分别为：1、商品图片区2、商品属性、优惠券区（包括：商品名称、价格、优惠情况等）3、推荐商品列表区4、浮动框备注：最后优化代码将商品图片区和商品属性、优惠券区合并为一个。
代码实现
第一步：整体css样式编写
index.css\n*{\npadding:0;\nmargin:0\n}\nbody{\nfont-size:14px;\nline-height:1.8;\nwidth:7.5rem;\nmargin:0auto;\nbackground-image:-webkit-gradient(linear,leftbottom,lefttop,color-stop(4%,d8d8d8));\nbackground-image:linear-gradient(0deg,d8d8d8100%)\n}\nimg{\nborder:0;\nwidth:auto\\9;\nheight:auto;\nmax-width:100%;\nvertical-align:top;\n-ms-interpolation-mode:bicubic\n}\na{\ntext-decoration:none\n}
第二步：商品区布局
HTML代码
<divclass=&34;>\n<divclass=&34;>\n<a>\n<divclass=&34;><imgclass=&34;\nsrc=&34;><span\nclass=&34;>tsc服饰海外专营店</span></div>\n<imgclass=&34;\nsrc=&34;>\n<divclass=&34;><pclass=&34;><spanclass=&34;></span>CHAMPION冠军男女同款美版经典草写印花LOGO\n休闲T恤短袖GT23H</p>\n<divclass=&34;><spanclass=&34;>用券后</span><span\nclass=&34;>￥</span><spanclass=&34;>59.00</span>\n<spanclass=&34;>现价￥89</span><spanclass=&34;>426笔成交</span></div>\n</div>\n</a>\n<divclass=&34;\nstyle=&34;>\n<divclass=&34;><spanclass=&34;>￥</span><span\nclass=&34;>30</span></div>\n<divclass=&34;>使用期限2020.05.09-2020.05.14</div>\n<divclass=&34;>立即领券</div>\n\t</div>\n</div>\n</div>
CSS代码
<styletype=&34;>\n.item-con{\nwidth:100%;\n-webkit-box-sizing:border-box;\nbox-sizing:border-box;\nposition:relative;\nz-index:9;\n}\n.item-con.postfee-icon{\ndisplay:inline-block;\nwidth:0.44rem;\nheight:0.24rem;\nbackground:url(images/baoyou-icon-66-36.png)no-repeat;\nbackground-size:cover;\nmargin-right:0.05rem;\n}\n.item-con.item-info-con{\nwidth:6.8rem;\nmargin:0.2remauto;\nborder-radius:0.32rem;\nbackground:4a4a4a;\n}\n.item-con.item-info{\npadding:0.15rem;\n}\n.item-con.item-info.title{\ncolor:fff;\nbackground:f44;\n-webkit-transform-origin:leftbottom;\ntransform-origin:leftbottom;\ndisplay:inline-block;\nmargin-left:-0.2rem;\nline-height:1;\n}\n.item-con.item-info.after-price-num{\nfont-size:0.36rem;\ncolor:9b9b9b;\nvertical-align:middle;\nline-height:1.2;\nmargin-top:0.02rem;\ndisplay:inline-block;\n}\n.item-con.item-info.sell-num{\nfloat:right;\ncolor:fff;\nfont-size:0.32rem;\nline-height:1.15rem;\ntext-align:center;\nheight:1.15rem;\nwidth:2.2rem;\n}\n.item-con.get-coupon-btn.coupon-icon{\nfont-size:0.3rem;\ncolor:fff;\nline-height:1;\nfont-weight:500;\n}\n.item-con.get-coupon-btn.coupon-date{\nline-height:1;\nfont-size:0.24rem;\ncolor:rgba(255,255,255,0.67);\n}\n.J_hasMJMZ.item-con.item-info-con{\nheight:10.62rem;\n}\n.J_hasMJMZ.item-con.get-coupon-btn{\nbottom:1.38rem;\n}\n@mediascreenand(max-width:330px){\n.item-con.get-coupon-btn.coupon-date{\n-webkit-transform:scale(0.9);\ntransform:scale(0.9);\n-webkit-transform-origin:lefttop;\ntransform-origin:lefttop;\n}\n.item-con.item-info{\npadding:0.1rem;\n}\n}\n.android.item-con.item-info.after-price-title{\nheight:0.4rem;\nline-height:0.4rem;\n-webkit-transform:scale(0.72);\ntransform:scale(0.72);\n-webkit-transform-origin:left40%;\ntransform-origin:left40%;\n}\n</style>\n<styletype=&34;>body{\nbackground:c6c6c6;\nwidth:2.425rem;\nheight:2.425rem;\noverflow:hidden;\n}\n.coupon-item.item-wrap.item-detail.item-content.titlespan{\nfont-size:0.25rem;\nline-height:0.35rem;\noverflow:hidden;\nheight:0.72rem;\ncolor:34;item-list-con&34;recommend-titleJ-recommend-title&34;recommend-title-line&34;recommend-item&34;recommend-coupon-icon&34;recommend-coupon-num-icon&34;recommend-coupon-num&34;img&34;true&34;recommend-item-imgJ-recommend-item-img&34;images/good_img.jpg_.webp&34;info-con&34;title&34;price-sell&34;price&34;sell-num&34;coupon-price-title&34;coupon-price-icon&34;coupon-price-num&34;coupon-btn&34;background-image:url(images/youhuiquan_bg_small_300x300.jpg_.webp);&34;coupon-btn-title&34;coupon-btn-num&34;coupon-btn-name&34;recommend-item&34;recommend-coupon-icon&34;recommend-coupon-num-icon&34;recommend-coupon-num&34;img&34;true&34;recommend-item-imgJ-recommend-item-img&34;images/good_img.jpg_.webp&34;info-con&34;title&34;price-sell&34;price&34;sell-num&34;coupon-price-title&34;coupon-price-icon&34;coupon-price-num&34;coupon-btn&34;background-image:url(images/youhuiquan_bg_small_300x300.jpg_.webp);&34;coupon-btn-title&34;coupon-btn-num&34;coupon-btn-name&34;text/css&333;\n}\n.item-list-con.recommend-title-line{\nheight:0.06rem;\nwidth:1.3rem;\nbackground:fff;\ndisplay:inline-block;\nmargin-left:0.22rem;\nmargin-top:0.22rem;\nborder-radius:0.2rem;\noverflow:hidden;\ncursor:pointer;\nposition:relative;\n}\n.item-list-con.recommend-item.recommend-coupon-icon{\nwidth:0.76rem;\nheight:0.77rem;\nbackground:url(images/youhuiquan_icon.png)no-repeat;\nbackground-size:cover;\nposition:absolute;\ntop:0;\nleft:0.2rem;\ntext-align:center;\npadding-top:0.16rem;\n-webkit-box-sizing:border-box;\nbox-sizing:border-box;\n}\n.item-list-con.recommend-item.recommend-coupon-num-icon{\nfont-size:0.24rem;\ncolor:fff;\n}\n.item-list-con.recommend-item.recommend-item-img{\nwidth:3.42rem;\nheight:3.42rem;\n}\n.item-list-con.recommend-item.info-con{\npadding:0.16rem;\n}\n.item-list-con.recommend-item.title{\nfont-size:0.26rem;\nline-height:0.36rem;\nheight:0.72rem;\noverflow:hidden;\ntext-overflow:ellipsis;\ndisplay:-webkit-box;\n-webkit-line-clamp:2;\n-webkit-box-orient:vertical;\n}\n.item-list-con.recommend-item.price-sell{\ncolor:4a4a4a;\n}\n.item-list-con.recommend-item.coupon-price-icon{\nfont-size:0.26rem;\ncolor:ff4f00;\nfont-size:0.32rem;\nfont-weight:500;\n}\n.item-list-con.recommend-item.coupon-btn{\nwidth:3rem;\nheight:0.48rem;\nbackground-size:3rem0.48rem;\nbackground-repeat:no-repeat;\nposition:relative;\ncolor:34;position:fixed;right:0px;bottom:100px;width:60px;height:60px;z-index:99&34;showDialog&34;J_sdasdnbhkbdas&34;width:100%;height:100%;cursor:pointer;&34;images/new-people-bg-120-120.png”>
源码地址
https://100boot.cn/public/coupon-web-demo-20200513.zip
制作淘宝页面网站源码分享的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于淘宝网站制作教程、制作淘宝页面网站源码分享的信息别忘了在本站进行查找哦。