电商项目（中）

position: static | relative | absolute | fixed | sticky ;复制代码

如果position值不是static，可以使用z-index属性，

    
     居中
    
复制代码

z-index: auto;复制代码

// 先定义positionposition: absolute;z-index: 1;z-index: 2;z-index: 3;复制代码

裁剪 clip: rect(0 auto 35px 10px);复制代码

钟表：

            
                    			 
    
			 				 	 
     
			 	 
     
			 	 
     
			 	 
     
			 	 
     
			 	 
     
			 	 
     
			 	 
     
			 	 
     
			 	 
     
			 	 
     
			 
    
    复制代码

心动：

    
            
    
    
     
    
复制代码

            
            	            						
    
									  
     
				  
     
				  
     
				  
     
				  	  
      				  	  	  				  	  				  
     
				  
     
				  
     
				  	   
      				  	   	  				  	   				  
     
			
    
    复制代码

海浪：

            
                    		 
    
		 	 
     		 	 
     		 	 
     
		 
    
    复制代码

背景：

	
    			
    
	
    
复制代码

渐变色：

	
    			
    
复制代码

	
    			
    
复制代码

动画背景：

	
    			
    
复制代码

透明度：

	
    		
    
	
     
	
     
123
    
	复制代码

3D效果：

	
    			复制代码

过渡：

	
    			
    
			
    
复制代码

溢出隐藏：

	
    			
    
     		dsaegadfasdfasdfasdfasdafasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfsdfasdfasdfasdfasdfasdfsdfasdfasdfasdfasdfasdfdfs	
    
复制代码

布局：

	
    			
    
		
     
      1
     
		
     
      2
     
		
     
      3
     
	
    
复制代码

	
    			
    
		
     
      1
     
		
     
      2
     
		
     
      3
     
	
    
复制代码

	
    			
    
		
     
      1
     
		
     
      2
     
		
     
      3
     
	
    
复制代码

	
    			
    
		
     
      1
     
		
     
      2
     
		
     
      3
     
	
    
复制代码

动画：

	
    			
    
复制代码

结言

好了，欢迎在留言区留言，与大家分享你的经验和心得。

感谢你学习今天的内容，如果你觉得这篇文章对你有帮助的话，也欢迎把它分享给更多的朋友，感谢。

作者简介

达叔，理工男，简书作者&全栈工程师，感性理性兼备的写作者，个人独立开发者，我相信你也可以！阅读他的文章，会上瘾！，帮你成为更好的自己。长按下方二维码可关注，欢迎分享，置顶尤佳。