web淘宝商品页

最新推荐文章于 2022-12-25 00:00:00 发布

Andrewhj

最新推荐文章于 2022-12-25 00:00:00 发布

阅读量577

点赞数 1

分类专栏：笔记文章标签： html 前端

本文链接：https://blog.csdn.net/Andrewhj/article/details/127816292

版权

笔记专栏收录该内容

21 篇文章 0 订阅

订阅专栏

代码：

<!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>仿淘宝</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;
           }
           p{
               clear:both;
           }
       </style>
   </head>
   <body>
       <div class="container">

           <div class="good">
               <div class="pic">
                   <img src="huawei.png" alt="">
                   <div class="find">
                       <div><a href="#">找同款</a></div>
                       <div><a href="#">找相似</a></div>
                   </div>
               </div>
               <div class="price">
                   <span>￥4490.00</span>
                   <span>包邮</span>
                   <span>5万+人已购买</span>
               </div>
               <div class="des">
                   <a href="#">【旗舰新品】HUAWEI/华为Mate 50E 直屏旗舰超光变XMAGE鸿蒙3.0影像续航拍照新款智能手机华为官方旗舰店官网
                   </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>