JS小米商城首页的简单实现

仅有小米商城首页的一部分,不能跳转到其他页面,没有加动画效果,只是个模板.

主要用到了弹性盒子布局,浮动布局,相对定位,绝对定位,固定定位,子绝父相,点击事件,定时器,块元素转化为内联块级元素等.

效果图:

JS小米商城首页的简单实现_第1张图片

 JS小米商城首页的简单实现_第2张图片

 JS小米商城首页的简单实现_第3张图片

 轮播图效果没有加动画,可以点击左右箭头切换图片,每隔2秒会自动换图片.

代码:



    
        
        
        
    
    
        


            

            

                
            

            

                
                
                    
                

            

        

        

            

                

                        

  •                         手机>
                            

                                小米手机

                                红米手机

                            

                            
                        

  •                     

  •                         电视>
                        

  •                     

  •                         家电>
                        

  •                     

  •                         笔记本 平板>
                            

                                小米手机

                                红米手机

                            

                        

  •                     

  •                         出行 穿戴>
                        

  •                     

  •                         耳机 音箱>
                        

  •                     

  •                         健康 儿童>
                        

  •                     

  •                         生活 箱包>
                        

  •                     

  •                         智能 路由器>
                        

  •                     

  •                         电源 配件>
                        

  •                 

            

            

                

                
                
                
                
                

                
<

                
>

                

                    

                    

                    

                    

                

            

            
        

        

            
            
            
            
        

        

            

                
                    
                

            

            
            

                手机
                查看更多
                
                

            

            

                

                    
                

                

                    

                        
                        

Redmi K70 Pro


                        

第三代骁龙8 年度旗舰平台


                        

3299元起


                    

                    

                        
                        

Redmi K70


                        

第二代骁龙8 旗舰芯


                        

2499元起


                    

                    

                        
                        

Redmi K70E


                        

新一代旗舰焊门员


                        

1999元起


                    

                    

                        
                        

Xiaomi 14 Pro


                        

徕卡Summilux可变光圈镜头|小米澎...


                        

4999元起


                    

                    

                        
                        

Xiaomi 14


                        

第三代骁龙8 年度旗舰平台


                        

3999元起


                    

                    

                        
                        

Redmi Note 13 Pro


                        

小金刚品牌


                        

1399元起


                    

                    

                        
                        

Redmi Note 13 Pro+


                        

天机 7200-Ultra


                        

1699元起


                    

                    

                        
                        

Redmi Note 13 5G


                        

1亿像素 更快更清晰


                        

999元起


                    

                

            

            
            
            

                

                    智能穿戴
                

                

                    耳机
                    穿戴
                

            

            
            

                

                    
                

                

                    

                        
                    
                    

                    

                        
                        
                    

                    

                        
                        
                    

                    

                        
                        
                    

                    

                        
                        
                    

                    

                        
                        
                    

                    

                        
                        
                    

                    

                        
                        

                            
                        

                        

                            
                        

                        
                    

                

            

            
            
        

        
        
        
        

            返回顶部
        

    
    
    
    
    
    
    
    

你可能感兴趣的:(前端)