商品图片代码

最新推荐文章于 2024-07-19 15:32:49 发布

骑猪下河源

最新推荐文章于 2024-07-19 15:32:49 发布

阅读量45

点赞数

文章标签： html

本文链接：https://blog.csdn.net/2301_77196129/article/details/129728629

版权

DOCTYPE html>
<html lang="zw">
   <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>
           .root-div{
               width: 250px;
               height: 400px;
               float: left;
               margin-left: 20px;
               margin-top: 20px;
               /* border: 1px solid red; */
           }
           .image-parent,img{
               width: 250px;
               height: 250px;
           }
           .image-parent{
               position: relative;
           }
           .image-child{
               width:100%;
               position: absolute;
               bottom: 0px;
               display: none;
           }
           .image-child > div{
               width: 125px;
               float: left;
               background-color: orange;
               text-align: center;
               color: white;
           }
           .image-child > div:first-child{
               width: 124px;
               border-right:1px solid white;
           }

           .image-parent:hover > .image-child{
               display: block;
           }
           .price{
               margin-top: 8px;
           }
           .price > span:first-child{
               color: orange;
               font-size: 20px;
               font-weight:bold;
           }
           .price > span:nth-child(2){
               background-color: orange;
               color: white;
               padding: 0% 2px;
           }
           .price > span:last-child{
               font-size: 15px;
               color: gray;
               float: right;
               margin-right: 10px;
               margin-top: 3px;
           }
           .brief{
               margin-top: 8px;
           }
           .brief > span{
               /* border: 2px solid red; */
               font-size: 15px;
           }
           .shop{
               margin-top: 8px;
           }
           .shop > span{
               color: gray;
               font-size: 15px;
           }
           .shop > span:last-child{
               float: right;
               margin-right: 10px;
           }
           .logo{
               margin-top: 5px;
           }
           .logo > span{
               /* border: 2px solid blue; */
           }
           .logo > span > img{
               width: 30px;
               height: 30px;
           }
           .logo > span:last-child{
               /* border: 2px solid red; */
               float: right;
               margin-right: 10px;
           }
       </style>
   </head>
   <body>
       <div class="root-div">
           <div class="image-parent">
               <img src="你要放图片" alt="">
               <div class="image-child">
                   <div>找同款</div>
                   <div>找相似</div>
               </div>
           </div>
           <div class="price">
               <span>￥输入你要的价格</span>
               <span>包邮</span>
               <span>10万+人付款</span>
           </div>
           <div class="brief">
               <span>日系加绒卫衣男冬款衣服<font style="color: orange;">衣服</font>情侣</span>
           </div>
           <div class="shop">
               <span>某某旗舰店</span>
               <span>
                   <span>广东</span>
                   <span>深圳</span>
               </span>
           </div>
           <div class="logo">
               <span><img src="../img/双11.webp" alt=""></span>
               <span><img src="../img/淘宝.webp" alt=""></span>
               <span id="bo"><img src="../img/淘宝.webp" alt=""></span>
           </div>
       </div>
   </body>
</html