|
|
@@ -0,0 +1,351 @@
|
|
|
+<!doctype html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
|
+ <title>Document</title>
|
|
|
+ <!-- Bootstrap 的 CSS 文件 -->
|
|
|
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
|
|
|
+ <link rel="stylesheet" href="./css/common.css">
|
|
|
+ <link rel="stylesheet" href="./css/normalize.css">
|
|
|
+ <style>
|
|
|
+
|
|
|
+
|
|
|
+ .product-title-box {
|
|
|
+ display: flex;
|
|
|
+ border-top: 1px solid #999999;
|
|
|
+ border-bottom: 1px solid #999999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .product-title-box img {
|
|
|
+ width: 50%;
|
|
|
+ border-right: 1px solid #999999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .product-title-box .info-box {
|
|
|
+ width: 50%;
|
|
|
+ padding: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .product-title-box .info-box .title-box {
|
|
|
+ }
|
|
|
+
|
|
|
+ .product-title-box .info-box .title-box .title-box {
|
|
|
+ font-size: 50px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .product-title-box .info-box .title-box .feedback-box {
|
|
|
+ display: flex;
|
|
|
+ padding-bottom: 30px;
|
|
|
+ border-bottom: 1px solid #999999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .product-title-box .info-box .title-box .feedback-box .star-box {
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .product-title-box .info-box .title-box .attr-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding-bottom: 30px;
|
|
|
+ border-bottom: 1px solid #999999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .product-title-box .info-box .title-box .attr-box .price {
|
|
|
+ width: 200px;
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .product-title-box .info-box .title-box .desc-box {
|
|
|
+ color: #999999;
|
|
|
+ padding-right: 30px;
|
|
|
+ padding-bottom: 30px;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ font-size: 20px;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .product-title-box .info-box .title-box .desc-box:before {
|
|
|
+ position: absolute;
|
|
|
+ content: "";
|
|
|
+ width: 100px;
|
|
|
+ height: 1px;
|
|
|
+ background-color: #999999;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .similar-product-box {
|
|
|
+ border-bottom: 1px solid #999999;
|
|
|
+ padding-bottom: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .similar-product-box .title {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 45px;
|
|
|
+ padding-bottom: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .similar-product-box .product-box {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .similar-product-box .product-box .product {
|
|
|
+ width: 50%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ text-underline: none;
|
|
|
+ text-decoration: none;
|
|
|
+ color: #333;
|
|
|
+ display: flex;
|
|
|
+ padding-left: 20px;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .similar-product-box .product-box .product img {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ border: 1px solid #999999;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .similar-product-box .product-box .product .info {
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .reviews-box {
|
|
|
+ padding: 30px;
|
|
|
+ border-bottom: 1px solid #999;
|
|
|
+ }
|
|
|
+ .reviews-box .title{
|
|
|
+ font-size: 45px;
|
|
|
+ }
|
|
|
+ .reviews-box .reviews-list{
|
|
|
+ }
|
|
|
+ .reviews-box .reviews-list .review {
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .reviews-box .reviews-list .review .avatar-box{
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ width: 300px;
|
|
|
+ border-top: 1px solid #999999;
|
|
|
+ padding-top: 20px;
|
|
|
+ }
|
|
|
+ .reviews-box .reviews-list .review:first-child .avatar-box{
|
|
|
+ border-top: none;
|
|
|
+ }
|
|
|
+ .reviews-box .reviews-list .review .avatar-box img{
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 1px solid #999999;
|
|
|
+ display: block;
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+ .reviews-box .reviews-list .review .avatar-box .user-box{}
|
|
|
+ .reviews-box .reviews-list .review .avatar-box .user-box .name{}
|
|
|
+ .reviews-box .reviews-list .review .avatar-box .user-box .time{}
|
|
|
+ .reviews-box .reviews-list .review .desc-box{
|
|
|
+ padding-top: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+<!-- 导航栏 -->
|
|
|
+<nav class="nav-box">
|
|
|
+ <div class="logo">
|
|
|
+ <img src="img/logo.png" alt="">
|
|
|
+ </div>
|
|
|
+ <ul>
|
|
|
+ <li>Home</li>
|
|
|
+ <li>About</li>
|
|
|
+ <li>Shop</li>
|
|
|
+ <li>Help</li>
|
|
|
+ <li>Your Cart</li>
|
|
|
+ </ul>
|
|
|
+</nav>
|
|
|
+<div class="product-title-box">
|
|
|
+ <img src="img/logo.png" alt="">
|
|
|
+ <div class="info-box">
|
|
|
+ <div class="title-box">
|
|
|
+ <div class="title-box">Product title</div>
|
|
|
+ <br>
|
|
|
+ <div class="feedback-box">
|
|
|
+ <div class="star-box">
|
|
|
+ <span class="icon"></span>
|
|
|
+ <span class="icon"></span>
|
|
|
+ <span class="icon no-star"></span>
|
|
|
+ <span class="icon no-star"></span>
|
|
|
+ <span class="icon no-star"></span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ 5 reviews
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <br>
|
|
|
+ <div class="attr-box">
|
|
|
+ <div class="price">$ 1231</div>
|
|
|
+ <select class="form-control">
|
|
|
+ <option>Select Model</option>
|
|
|
+ <option>1</option>
|
|
|
+ <option>2</option>
|
|
|
+ <option>3</option>
|
|
|
+ <option>4</option>
|
|
|
+ <option>5</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ <br>
|
|
|
+ <p class="desc-box">
|
|
|
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, seddo eiusmod tempor incididunt ut labore et dolore magnaaliqua. Ut enim ad minim veniam, quis nostrud exercitation
|
|
|
+ </p>
|
|
|
+ <button type="submit" class="btn btn-primary mb-2">Add To Cart</button>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+<br>
|
|
|
+<div class="similar-product-box">
|
|
|
+ <div class="title">Similar Product</div>
|
|
|
+ <div class="product-box">
|
|
|
+ <!-- 1 -->
|
|
|
+ <a class="product" href="https://www.google.com">
|
|
|
+ <img src="img/logo.png" alt="">
|
|
|
+ <div class="info">
|
|
|
+ <div class="name">PRODUCT NAME</div>
|
|
|
+ <div class="start-box">
|
|
|
+ <span class="icon"></span>
|
|
|
+ <span class="icon"></span>
|
|
|
+ <span class="icon"></span>
|
|
|
+ <span class="icon no-star"></span>
|
|
|
+ <span class="icon no-star"></span>
|
|
|
+ </div>
|
|
|
+ <div class="price">
|
|
|
+ $300
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ <!-- 2 -->
|
|
|
+ <a class="product" href="https://www.google.com">
|
|
|
+ <img src="img/logo.png" alt="">
|
|
|
+ <div class="info">
|
|
|
+ <div class="name">PRODUCT NAME</div>
|
|
|
+ <div class="start-box">
|
|
|
+ <span class="icon"></span>
|
|
|
+ <span class="icon"></span>
|
|
|
+ <span class="icon"></span>
|
|
|
+ <span class="icon no-star"></span>
|
|
|
+ <span class="icon no-star"></span>
|
|
|
+ </div>
|
|
|
+ <div class="price">
|
|
|
+ $300
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ <!-- 3 -->
|
|
|
+ <a class="product" href="https://www.google.com">
|
|
|
+ <img src="img/logo.png" alt="">
|
|
|
+ <div class="info">
|
|
|
+ <div class="name">PRODUCT NAME</div>
|
|
|
+ <div class="start-box">
|
|
|
+ <span class="icon"></span>
|
|
|
+ <span class="icon"></span>
|
|
|
+ <span class="icon"></span>
|
|
|
+ <span class="icon no-star"></span>
|
|
|
+ <span class="icon no-star"></span>
|
|
|
+ </div>
|
|
|
+ <div class="price">
|
|
|
+ $300
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</div>
|
|
|
+<br>
|
|
|
+<div class="reviews-box">
|
|
|
+ <div class="title">Reviews</div>
|
|
|
+ <br>
|
|
|
+ <div class="reviews-list">
|
|
|
+ <!-- 1 -->
|
|
|
+ <div class="review">
|
|
|
+ <div class="avatar-box">
|
|
|
+ <img src="img/logo.png" alt="">
|
|
|
+ <div class="user-box">
|
|
|
+ <div class="name">JOHN DOE</div>
|
|
|
+ <div class="time">august 14,2018</div>
|
|
|
+ <div class="star-box">
|
|
|
+ <span class="icon"></span>
|
|
|
+ <span class="icon"></span>
|
|
|
+ <span class="icon no-star"></span>
|
|
|
+ <span class="icon no-star"></span>
|
|
|
+ <span class="icon no-star"></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="desc-box">Lorem ipsum dolor sit amet, consectetur adipiscing elit, seddo eiusmod tempor incididunt ut labore et dolore magnaaliqua. Ut enim ad minim veniam, quis nostrud exercitation
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 2 -->
|
|
|
+ <div class="review">
|
|
|
+ <div class="avatar-box">
|
|
|
+ <img src="img/logo.png" alt="">
|
|
|
+ <div class="user-box">
|
|
|
+ <div class="name">JOHN DOE</div>
|
|
|
+ <div class="time">august 14,2018</div>
|
|
|
+ <div class="star-box">
|
|
|
+ <span class="icon"></span>
|
|
|
+ <span class="icon"></span>
|
|
|
+ <span class="icon no-star"></span>
|
|
|
+ <span class="icon no-star"></span>
|
|
|
+ <span class="icon no-star"></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="desc-box">Lorem ipsum dolor sit amet, consectetur adipiscing elit, seddo eiusmod tempor incididunt ut labore et dolore magnaaliqua. Ut enim ad minim veniam, quis nostrud exercitation
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 3 -->
|
|
|
+ <div class="review">
|
|
|
+ <div class="avatar-box">
|
|
|
+ <img src="img/logo.png" alt="">
|
|
|
+ <div class="user-box">
|
|
|
+ <div class="name">JOHN DOE</div>
|
|
|
+ <div class="time">august 14,2018</div>
|
|
|
+ <div class="star-box">
|
|
|
+ <span class="icon"></span>
|
|
|
+ <span class="icon"></span>
|
|
|
+ <span class="icon no-star"></span>
|
|
|
+ <span class="icon no-star"></span>
|
|
|
+ <span class="icon no-star"></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="desc-box">Lorem ipsum dolor sit amet, consectetur adipiscing elit, seddo eiusmod tempor incididunt ut labore et dolore magnaaliqua. Ut enim ad minim veniam, quis nostrud exercitation
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+<br>
|
|
|
+<div class="footer-box">
|
|
|
+ <div class="nav">
|
|
|
+ <div class="item">Home</div>
|
|
|
+ <div class="item">About</div>
|
|
|
+ <div class="item">Shop</div>
|
|
|
+ <div class="item">Help</div>
|
|
|
+ </div>
|
|
|
+ <div class="info">
|
|
|
+ <img src="img/logo.png" alt="">
|
|
|
+ You Company Name
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+
|
|
|
+<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
|
|
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-7ymO4nGrkm372HoSbq1OY2DP4pEZnMiA+E0F3zPr+JQQtQ82gQ1HPY3QIVtztVua" crossorigin="anonymous"></script>
|
|
|
+</body>
|
|
|
+</html>
|
john