仿小米商城窗口浮动

小鱼儿 2023-02-17 03:55 60阅读 0赞

#### 效果图： ####

![在这里插入图片描述][20200612130952254.gif]

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { 
    			padding: 0;
    			margin: 0;
    		}
    		.flow { 
    			width: 1226px;
    			height: 615px;
    			margin: 50px auto;
    			border: 1px solid #ccc;
    
    		}
    		.left { 
    			float: left;
    			width: 234px;
    			height: 615px;
    			background-color: pink;
    
    		}
    		.right { 
    			float: left;
    			width: 992px;
    			height: 615px;
    		}
    		.right ul li { 
    			float: left;
    			width: 234px;
    			height: 300px;
    			margin-left: 14px;
    			margin-bottom: 15px;
    			list-style: none;
    			background-color: red;
    		}
    		a { 
    			display:block;
    		}
    		a:hover { 
    			/*鼠标放置区域，显示阴影假动态效果*/
    			box-shadow: 0 15px 30px  rgba(0, 0, 0, .1);
    		}
    		img { 
    			/*图片自适应*/
    			width:100%;
    			height: 100%;
    		}
    	</style>
    </head>
    <body>
    	<div class="flow">
    			<div class="left">
    				<a href="#"> <img src="left.png" alt=" "></a>
    			
    			</div> 
    			<div class="right">
    				<ul>
    					<li><a href="#"><img src="1.png" alt=" "></a></li>
    					<li><a href="#"><img src="2.png" alt=" "></a></li>
    					<li><a href="#"><img src="3.png" alt=" "></a></li>
    					<li><a href="#"><img src="4.png" alt=" "></a></li>
    					<li><a href="#"><img src="5.png" alt=" "></a></li>
    					<li><a href="#"><img src="6.png" alt=" "></a></li>
    					<li><a href="#"><img src="7.png" alt=" "></a></li>
    					<li><a href="#"><img src="8.png" alt=" "></a></li>
    				</ul>
    			</div>
    	</div>
    </body>
    </html>

#### 素材（官网截图）： ####

![在这里插入图片描述][20200612130906349.png]  
![请添加图片描述][20200612130924662.png]![请添加图片描述][20200612130924692.png]![请添加图片描述][20200612130924697.png]![请添加图片描述][20200612130924683.png]![请添加图片描述][20200612130931676.png]![请添加图片描述][20200612130931673.png]![请添加图片描述][20200612130931676.png]![在这里插入图片描述][20200612130939919.png]

[20200612130952254.gif]: https://img-blog.csdnimg.cn/20200612130952254.gif
[20200612130906349.png]: https://img-blog.csdnimg.cn/20200612130906349.png
[20200612130924662.png]: https://img-blog.csdnimg.cn/20200612130924662.png
[20200612130924692.png]: https://img-blog.csdnimg.cn/20200612130924692.png
[20200612130924697.png]: https://img-blog.csdnimg.cn/20200612130924697.png
[20200612130924683.png]: https://img-blog.csdnimg.cn/20200612130924683.png
[20200612130931676.png]: https://img-blog.csdnimg.cn/20200612130931676.png
[20200612130931673.png]: https://img-blog.csdnimg.cn/20200612130931673.png
[20200612130939919.png]: https://img-blog.csdnimg.cn/20200612130939919.png