[代码实例][HTML][Bootstrap]开发电商网站特效

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Bootstrap Demo 19</title>

	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

	<script type="text/javascript" src="Js/jquery-3.5.1.min.js"></script>

	<%-- css:Bootstrap --%>
	<link rel="stylesheet" href="Lib/bootstrap-4.5.2/css/bootstrap.min.css" />

	<style type="text/css">
		.product-grid {
			text-align: center;
			overflow: hidden;
			position: relative;
			transition: all 0.5s ease 0s;
		}

			.product-grid .product-image {
				overflow: hidden;
			}

				.product-grid .product-image img {
					width: 100%;
					/*height: auto;*/
					transition: all 0.5s ease 0s;
				}

			.product-grid:hover .product-image img {
				transform: scale(0.5);
			}

			.product-grid .product-content {
				padding: 12px 12px 15px 12px;
				transition: all 0.5s ease 0s;
			}

			.product-grid:hover .product-content {
				opacity: 0;
			}

			.product-grid .title {
				font-size: 20px;
				font-weight: 600;
				margin: 0 0 10px;
			}

				.product-grid .title a {
					color: #000;
				}

					.product-grid .title a:hover {
						color: #2e86de;
					}

			.product-grid .price {
				font-size: 18px;
				font-weight: 600;
				color: #2e86de;
			}

				.product-grid .price span {
					color: #999;
					font-size: 15px;
					font-weight: 400;
					text-decoration: line-through;
					margin-left: 7px;
					display: inline-block;
				}

			.product-grid .social {
				background-color: #fff;
				width: 100%;
				padding: 0;
				margin: 0;
				list-style: none;
				opacity: 0;
				position: absolute;
				bottom: -50%;
				transition: all 0.5s ease 0s;
			}

			.product-grid:hover .social {
				opacity: 1;
				bottom: 20px;
			}

			.product-grid .social li {
				display: inline-block;
			}

				.product-grid .social li a {
					color: #909090;
					font-size: 16px;
					line-height: 45px;
					text-align: center;
					height: 45px;
					width: 45px;
					margin: 0 7px;
					border: 1px solid #909090;
					border-radius: 50px;
					display: block;
					position: relative;
					transition: all 0.3s ease-in-out;
				}

					.product-grid .social li a:hover {
						color: #fff;
						background-color: #2e86de;
					}
	</style>
</head>
<body class="container">

	<div class="row">
		<div class="col-md-3 col-sm-6 product-grid">
			<%-- 产品图片 --%>
			<div class="product-image">
				<a href="#">
					<img class="pic-1" src="Image/pic006.jpg" />
				</a>
			</div>

			<%-- 产品说明及价格 --%>
			<div class="product-content">
				<h3 class="title"><a href="#">女士连衣裙</a></h3>
				<div class="price">￥29.00<span>￥14.00</span></div>
			</div>

			<%-- 功能按钮 --%>
			<ul class="social">
				<li><a href=""><i class="fa fa-search"></i></a></li>
				<li><a href=""><i class="fa fa-shopping-bag"></i></a></li>
				<li><a href=""><i class="fa fa-shopping-cart"></i></a></li>
			</ul>
		</div>

		<div class="col-md-3 col-sm-6 product-grid">
			<%-- 产品图片 --%>
			<div class="product-image">
				<a href="#">
					<img class="pic-1" src="Image/pic007.jpg" />
				</a>
			</div>

			<%-- 产品说明及价格 --%>
			<div class="product-content">
				<h3 class="title"><a href="#">女士上衣</a></h3>
				<div class="price">￥99.00<span>￥83.00</span></div>
			</div>

			<%-- 功能按钮 --%>
			<ul class="social">
				<li><a href=""><i class="fa fa-search"></i></a></li>
				<li><a href=""><i class="fa fa-shopping-bag"></i></a></li>
				<li><a href=""><i class="fa fa-shopping-cart"></i></a></li>
			</ul>
		</div>

		<div class="col-md-3 col-sm-6 product-grid">
			<%-- 产品图片 --%>
			<div class="product-image">
				<a href="#">
					<img class="pic-1" src="Image/pic008.jpg" />
				</a>
			</div>

			<%-- 产品说明及价格 --%>
			<div class="product-content">
				<h3 class="title"><a href="#">男士西装</a></h3>
				<div class="price">￥150.00<span>￥135.00</span></div>
			</div>

			<%-- 功能按钮 --%>
			<ul class="social">
				<li><a href=""><i class="fa fa-search"></i></a></li>
				<li><a href=""><i class="fa fa-shopping-bag"></i></a></li>
				<li><a href=""><i class="fa fa-shopping-cart"></i></a></li>
			</ul>
		</div>

		<div class="col-md-3 col-sm-6 product-grid">
			<%-- 产品图片 --%>
			<div class="product-image">
				<a href="#">
					<img class="pic-1" src="Image/pic009.jpg" />
				</a>
			</div>

			<%-- 产品说明及价格 --%>
			<div class="product-content">
				<h3 class="title"><a href="#">女士连衣裙</a></h3>
				<div class="price">￥200.00<span>￥170.00</span></div>
			</div>

			<%-- 功能按钮 --%>
			<ul class="social">
				<li><a href=""><i class="fa fa-search"></i></a></li>
				<li><a href=""><i class="fa fa-shopping-bag"></i></a></li>
				<li><a href=""><i class="fa fa-shopping-cart"></i></a></li>
			</ul>
		</div>
	</div>

	<%-- js:Bootstrap --%>
	<script type="text/javascript" src="Js/popper.min.js"></script>
	<script type="text/javascript" src="Lib/bootstrap-4.5.2/js/bootstrap.min.js"></script>

	<%-- js:Font Awesome --%>
	<script src="https://kit.fontawesome.com/3ac73bb067.js" crossorigin="anonymous"></script>

</body>
</html>