选项卡

最新推荐文章于 2024-01-09 19:17:54 发布

雕琢时光纸戆

最新推荐文章于 2024-01-09 19:17:54 发布

阅读量188

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/TISRNW/article/details/102531143

版权

html 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

查看

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>小米选项卡</title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}
			
			html,
			body {
				height: 100%;
				width: 100%;
				background-color: gainsboro;
				/*display: flex;*/
			}
			
			ul {
				height: 100%;
				width: 100%;
				list-style: none;
				display: flex;
				justify-content: space-around;
				align-content: center;
				flex-wrap: wrap;
			}
			
			li {
				height: 350px;
				width: 20%;
				background-color: white;
				overflow: hidden;
				box-shadow:0px 10px 10px rgba(0,0,0,.2);
			}
			li:hover{
				transform: translateY(-8px);
				box-shadow: rgba(0,0,0,7);
			}
			li:hover .display{
				transform: translateY(-70px);
			}
			.red{
				height:30px ;
				width:80px ;
				background-color: red;
				margin: 0px auto;
				color: white;
				line-height: 30px;
				text-align: center;
				font-size: 14px;
			}
			.redphoto{
				height: 200px;
				width: 100%;
				
			}
			.redtext{
				height: 116px;
				width: 100%;
				/*background-color: red;*/
			}
			#span1{
				display: block;
				height:25px;
				width: 100%;
				line-height: 25px;
			    text-align: center;
			    font-size: 18px;
			}
			.p1{
				font-size: 12px;
				color: rgba(0,0,0,.5);
				text-align: center;
			}
			#span2{
				display: block;
				margin-top: 20px;
				text-align: center;
				color: red;
				height: 15px;
				width: 100%;
				
			}
			del{
				color: rgba(0,0,0,.5);
			}
			.display{
				height: 80px;
				width: 100%;
				color: aquamarine;
				background-color: lemonchiffon;
				
				transition: .5s linear;
			}
		</style>
	</head>

	<body>
		<ul>
			<li>
				<div class="red">
					享9.5折
				</div>
				<img class="redphoto" src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/6f2493e6c6fe8e2485c407e5d75e3651.jpg?thumb=1&w=240&h=240&f=webp&q=90"/>
			    <div class="redtext">
			    	<span id="span1">
			    		Redmi Note 8 Pro
			    	</span>
			    	<p class="p1">
			    		600万全场景四射
			    	</p>
			    	<span id="span2">
			    		8888 <del>9999</del>
			    	</span>
			    </div>
			    <div class="display">
			    	陈年旧事复合物
			    </div>
			</li>
			<li>
				<div class="">
					
				</div>
				
			</li>
			<li>
				
			</li>
			<li>
				
			</li>
		</ul>
	</body>

</html>```