纯HTML编写仿淘宝粉丝福利购页面-优惠券、商品列表、图片悬浮等布局

简介

最近温习一下HTML5+CSS3的一些特性，准备找个高仿的目标，最后选择了淘宝粉丝福利页面，因为这个页面包含的元素比较多。例如：头部品牌信息悬浮、商品属性、优惠券、商品类别等。

实现效果：

设计

如上图所示，页面共分为4个区域，分别为：
1、商品图片区
2、商品属性、优惠券区（包括：商品名称、价格、优惠情况等）
3、推荐商品列表区
4、浮动框
备注：最后优化代码将商品图片区和商品属性、优惠券区合并为一个。

代码实现

第一步：整体css样式编写

index.css

* {
    padding: 0;
    margin: 0
}
body {
    font-size: 14px;
    line-height: 1.8;
    width: 7.5rem;
    margin: 0 auto;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(4%, #f2f2f2), to(#d8d8d8));
    background-image: linear-gradient(0deg, #f2f2f2 4%, #d8d8d8 100%)
}
img {
    border: 0;
    width: auto \9;
    height: auto;
    max-width: 100%;
    vertical-align: top;
    -ms-interpolation-mode: bicubic
}
a {
    text-decoration: none
}

第二步：商品区布局
HTML代码

                

                    
                        
tsc服饰海外专营店
                        
                        
CHAMPION冠军男女同款美版经典草写印花LOGO
                            休闲T恤短袖 GT23H
                            
用券后¥59.00
                                现价¥89426笔成交
                        
                    
                    

                        
¥30
                        
使用期限 2020.05.09-2020.05.14
                        
立即领券
                    
                
            

CSS代码

推荐商品列表区

HTML代码

            

                
更多优惠推荐
                    

                
                

                    
¥30
                    
                    
CHAMPION冠军男女同款美版经典草写印花LOGO
                        休闲T恤短袖 GT23H
                        
89.00447笔成交
                        
用券后¥59.00
                        

                            优惠券30领取
                    
                
                

                    
¥20
                    
                    
CHAMPION冠军男女同款美版经典草写印花LOGO
                        休闲T恤短袖 GT23H
                        
39.90177笔成交
                        
用券后¥19.90
                        

                            优惠券¥30领取
                    
                
            

CSS代码

浮动框布局

HTML代码

####关注我们
如果需要源码可以关注“IT实战联盟”公众号并留言（101，会收到源码下载地址），也可以加入交流群和作者互撩哦~~~