333333

最新推荐文章于 2024-10-02 23:33:51 发布

Destiny_12134

最新推荐文章于 2024-10-02 23:33:51 发布

阅读量19

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/Destiny_12134/article/details/131147246

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0%;
				padding: 0%;
			}
			.goods{
				width: 250px;
				height: 390px;
				border: 1px solid red;
			}
			.goods-img > img{
				display: block;
				width: 250px;
				height: 250px;
				border: 1px solid rebeccapurple;
				
			}
			.text > div{
				margin: 5px;
			}
			.price > span{
				vertical-align: middle;
			}
			.price > span:first-child{
				color: #eb5628;
				font-weight: bold;
				font-size: 20px;
				line-height: 20px;
			}
			.price>span:nth-child(2){
				background-color:#eb5628;
				color: white;
				font-size: 13px;
				line-height: 20px;
			}
			.price>span:last-child{
				float: right;
				font-size: 13px;
				color: #777;
			}
			.des >a> label{
				font-size: 13px;
			} 
			.des >a> label:first-child{
				color: #eb5628;
			}
			.des>a:link{
				text-decoration: none;
				color: black;
			}
			.des>a:visited{
				color: black;
			}
			.des>a:hover{
				color: #eb5628;
				text-decoration: underline;
			}
			.shop_info>a:visited{
				color: #777;
			}
			.shop_info>a{
				font-size: 13px;
			}
			.shop_info>label{
				float: right;
				font-size: 13px;
				color: #777;
			}
			.icon_info > span:first-child{
				background: url('./img/李白.png');
				background-size:610px 600px;
				display: inline-block;
				background-position: -375px -400px;
				width: 32px;
				height: 32px;
			}
			.icon_info>span:last-child{
				background: url('./img/李白.png');
				background-size: 860px 852px;
				display: inline-block;
				background-position: -344px -646px;
				width: 32px;
				height: 32px;
				border:1px solid red;
				float: right;
			}
			.goods-img>div>div{
			    width: 124px;
				margin: 0%;
				float: left;
				background-color: #eb5628;
				color: white;
				display: inline-block;
				text-align: center;
				
			}
			.goods-img>div>div:last-child{
				border-left: 1px solid white;
			}
			.goods-img>div{
				position: relative;
				bottom: 0px;
				display: none;
			}
			.goods-img{
				position: relative;
				
			}
			.goods-img:hover>div{
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="goods">
			<div class="goods-img">
			<img src="img/微信图片_20230605203532.webp" alt="">
			<div>
				<div>找同款</div>
				<div>找相似</div>
			</div>
			</div>
			<div class="text">
				<div class="price">
					<span>￥12.80</span>
					<span>包邮</span>
					<span>1万+人付款</span>
				</div>
				<div class="des">
					<a href="#">
						<label for="des">鸡你太美</label>
						<label for="">手办摆件恶搞ikun小黑子蔡徐坤公仔小玩偶车摆件小玩具</label>
					</a>
				</div>
				<div class="shop_info">
					信誉玩具专营店
					<label>浙江 金华</label>
				</div>
				<div class="icon_info">
					<span></span>
					<span></span>
				</div>
			</div>
		</div>
		
					
		
	</body>
</html>