web三次作业

最新推荐文章于 2025-12-02 21:41:05 发布

原创最新推荐文章于 2025-12-02 21:41:05 发布 · 113 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #css #css3

这段HTML代码创建了一个类似淘宝的商品展示模块，包括商品图片、下拉选项（找同款、找相似）、价格、描述、店铺信息以及图标。商品图片具有悬停显示下拉菜单的效果。代码中使用了CSS进行样式设计，实现了响应式布局。

仿淘宝

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style>
			.good {
				border: 1px solid red;
				width: 220px;
				height: 360px;
			}

			.pic {
				width: 220px;
				height: 220px;
				position: relative;
			}

			.pic>img {
				width: 220px;
				height: 220px;
			}

			.find>div {
				width: 110px;
				background-color: #f40;
				color: white;
				text-align: center;
				float: left;
			}

			.find>div:first-child {
				width: 109px;
				border-right: 1px solid white;
			}

			.find {
				position: absolute;
				bottom: 0px;
				display: none;
			}

			.good:hover .find {
				display: block;
			}

			.find a {
				color: white;
				text-decoration: none;
			}

			.price,
			.des,
			.shopinfo,
			.icon {
				margin-top: 5px;
				margin-right: 5px;
				margin-left: 5px;
			}

			.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) {
				background-color: #f40;
				color: white;
				font-size: 14px;
			}

			.price>span:last-child {
				color: #777;
				font-size: 14px;
				float: right;
			}

			.des>a {
				color: #333;
				font-size: 14px;
				text-decoration: none;
			}

			.des>a:hover {
				color: #f40;
				text-decoration: underline;
			}

			.shopinfo>a:first-child,
			.shopinfo>span {
				color: #333;
				font-size: 14px;
			}

			.shopinfo>span {
				float: right;
			}

			.icon>span:first-child {
				background-image: url("https://img.alicdn.com/imgextra/i1/O1CN01QuhUWL1xJKJw0hnvG_!!6000000006422-2-tps-62-32.png");
				width: 31px;
				height: 16px;
				background-size: cover;
				display: inline-block;
			}

			.icon>span:nth-child(2) {
				display: inline-block;
				width: 49px;
				height: 16px;
				border: 1px solid rebeccapurple;
				background-size: 308px 298px;
				background-position: -5px -113px;
				background-image: url("https://img.alicdn.com/tps/i3/TB1h9GMMpXXXXcSXVXXRJo3QFXX-616-596.png");
			}

			.icon>span:last-child {
				display: inline-block;
				float:right;
				background-size: 430px 426px;
				background-position: -172px -323px;
				width: 16px;
				height: 16px;
				background-image: url("https://img.alicdn.com/tps/i1/TB1D4e7MpXXXXbpXpXX8jvl4XXX-860-852.png");
			}
			.good{
				float:left;
				margin-left:10px;
				margin-top:10px;
			}
		</style>
	</head>
	<body>
		<div class="container">

			<div class="good">
				<div class="pic">
					<img src="C:\Users\gchoud\Pictures\web\1.png" alt="">
					<div class="find">
						<div><a href="#">找同款</a></div>
						<div><a href="#">找相似</a></div>
					</div>
				</div>
				<div class="price">
					<span>￥219.00</span>
					<span>包邮</span>
					<span>3万+人已购买</span>
				</div>
				<div class="des">
					<a href="#">我家哥哥同款卫衣穿衣上以后唱跳rap篮球都有加成</a>
				</div>
				<div class="shopinfo">
					<a href="#">北冥有鲲旗舰店</a>
					<span>四川 成都</span>
				</div>
				<div class="icon">
					<span></span>
					<span></span>
					<span></span>
				</div>
			</div>
		</div>
	</body>
</html>