首页 > 编程知识 正文

用bootstrap做电商页面,bootstrap电商网站模板

时间:2023-05-03 10:38:31 阅读:253759 作者:4359

<!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" rel="external nofollow" 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 rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="#"><img class="pic-1" src="Image/pic006.jpg" /></a></div><%-- 产品说明及价格 --%><div class="product-content"><h3 class="title"><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="#">女士连衣裙</a></h3><div class="price">¥29.00<span>¥14.00</span></div></div><%-- 功能按钮 --%><ul class="social"><li><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href=""><i class="fa fa-search"></i></a></li><li><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href=""><i class="fa fa-shopping-bag"></i></a></li><li><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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 rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="#"><img class="pic-1" src="Image/pic007.jpg" /></a></div><%-- 产品说明及价格 --%><div class="product-content"><h3 class="title"><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="#">女士上衣</a></h3><div class="price">¥99.00<span>¥83.00</span></div></div><%-- 功能按钮 --%><ul class="social"><li><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href=""><i class="fa fa-search"></i></a></li><li><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href=""><i class="fa fa-shopping-bag"></i></a></li><li><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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 rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="#"><img class="pic-1" src="Image/pic008.jpg" /></a></div><%-- 产品说明及价格 --%><div class="product-content"><h3 class="title"><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="#">男士西装</a></h3><div class="price">¥150.00<span>¥135.00</span></div></div><%-- 功能按钮 --%><ul class="social"><li><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href=""><i class="fa fa-search"></i></a></li><li><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href=""><i class="fa fa-shopping-bag"></i></a></li><li><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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 rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="#"><img class="pic-1" src="Image/pic009.jpg" /></a></div><%-- 产品说明及价格 --%><div class="product-content"><h3 class="title"><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="#">女士连衣裙</a></h3><div class="price">¥200.00<span>¥170.00</span></div></div><%-- 功能按钮 --%><ul class="social"><li><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href=""><i class="fa fa-search"></i></a></li><li><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href=""><i class="fa fa-shopping-bag"></i></a></li><li><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 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>

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。