淘宝单商品页面

记忆523

已于 2023-03-18 10:08:00 修改

阅读量567

点赞数

分类专栏： web 文章标签： css html css3

于 2023-03-18 10:01:14 首次发布

本文链接：https://blog.csdn.net/bo1029/article/details/129632696

版权

web 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

题目要求

在这里插入图片描述
代码

<!DOCTYPE html>
<html>
	 <head>
		  <meta charset="utf-8">
		  <title></title>
		  <style>
			   .goods{
				width: 220px;
				height: 360px;
				border: 1px solid rgba(0, 0, 0, 0.1);
			   }
			   .goods:hover{
				   border: 1px solid #f40;
			   }
			   img{
				width: 220px;
			   }
			   
			   .price{
				margin-left: 5px;
				margin-right: 10px;
			   }
			   .price > span{
				line-height: 20px;
				vertical-align: middle;
			   }
			   .price > span:first-child{
				color: #f40;
				font-size: 20px;
				font-weight: bold;
			   }
			   .price > span:nth-child(2){
				font-size: 12px;
				background-color: #f40;
				color: white;
				padding-left:1px;
				padding-right:1px;
			   }
			   .price > span:last-child{
				float: right;
				font-size: 12px;
				color: #888;
			   }
			   #des{
				margin-left: 10px;
				margin-right: 5px;
			   }
			   #des>a{
				color: #444;
				font-size: 12px;
				text-decoration: none;
			   }
			   #des>a:hover{
				text-decoration: underline;
				color: #f40;
			   }
			   #des span{
				   color: #F40;
			   }
			   .ders{
					width: 13px;
					height: 12px;
					line-height: 22px;
					float: left;
					margin-left: 10px;
					
					margin-top: 1px;
			   }
			   .der{
				   width: 8px;
				   height: 2px;
				   background: #f40;
				   float: left;
				   margin-top: 2px;
			   }
			   .sping{
				   font-size: 10px;
				   float: left;
				   color: #888;
				   text-decoration: underline;
			   }
			   .sping:hover{
				   color: #f40;
			   }
			   .text{
				   float: right;
				   font-size: 10px;
				   color: #888;
			   }
			   .bgtup{
				   background-image: url("https://img.alicdn.com/tps/i3/TB1bh5IMpXXXXacaXXXrG06ZpXX-316-272.png");
			   }
			   .one{
				   width: 49px;
				   height: 16px;
				   float: left;
				   background-position: -5px -113px;
			   }
			   .two{
				   width: 16px;
				   height: 16px;
				   float: left;
				   background-position: -213px -199px;
				   margin-left: 3px;
			   }
			   .three{
				   width: 26px;
				   height: 16px;
				   background-image: url("https://img.alicdn.com/tps/i2/TB1Z4WGMpXXXXbyaXXX6sGuHVXX-458-458.png");
				   float: right;
				   background-position: -435px -86px;
				   margin-right: 5px;
			   }
			   #tupian{
				   position: relative;
/* 				   width: 220px;
				   height: 220px; */
			   }
			   .four{
				   height: 25px;
				   width: 220px;
				   position: absolute;
				   top: 194px;
				   display: none;
			   }
			   .four div{
				   height: 25px;
				   width: 109.5px;
				   background-color: rgba(255, 68, 0, 0.8);
				   color: white;
				   float: left;
			   }
			   .world{
					margin-left: 28px;
			   }
			   #tupian:hover .four{
				   display: block;
			   }
		  </style>
	 </head>
	 <body>
		  <div class="container">
			   <div class="goods">
				   <div id="tupian">
						<img src="https://g-search1.alicdn.com/img/bao/uploaded/i4/imgextra/i3/862580190/O1CN01W6ZZ0D1DH43NWPuY6_!!0-saturn_solar.jpg_580x580Q90.jpg_.webp" alt="加载失败">
						<div class="four">
							<div style="border-right: 0.5px solid white;">
								<span class="world">找同款</span>
							</div>
							<div style="">
								<span class="world">找相似</span>
							</div>
						</div>
				   </div>
				   <div>
					   	<div class="price">
							 <span>￥10.90</span>
							 <span>包邮</span>
							 <span>600+人付款</span>
						</div>
						<div id="des">
							<a href="#">汇腾台式香肠热狗肠香辣鸡肉肠猪肉肠泡面搭档即食<span>零食</span>火腿肠42g</a>
						</div>
						<div style="margin-top: 10px;">
							<div style="width: 205px; height: 22px;">
								<a href="https://baidu.com">
									<span class="ders">
										<span class="der"></span>
										<span class="der"></span>
										<span class="der"></span>
									</span>
									<span class="sping">朱大哥食品专营店</span>
								</a>
								<div class="text">
									湖南 岳阳
								</div>
							</div>
						</div>
						<div style="margin-left: 10px; margin-top: 10px;">
							<div class="bgtup one"></div>
							<div class="bgtup two"></div>
							<div class="three"></div>
						</div>
				   </div>
			   </div>
		  </div>
	 </body>
</html>