仿购物页面(单个）

最新推荐文章于 2025-06-11 17:24:20 发布

小俞要努力鸭!!!

最新推荐文章于 2025-06-11 17:24:20 发布

阅读量59

点赞数

文章标签： css

本文链接：https://blog.youkuaiyun.com/YY3027225004/article/details/131092433

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
           * {
               padding: 0;
               margin: 0;
           }

           .goods {
               width: 250px;
               height: 390px;
               border: 1px solid red;
           }

           .goods>.l>img {
               display: block;
               width: 250px;
               height: 250px;
           }

           .text>div {
               margin: 5px;
           }

           .price>span {
               vertical-align: middle;
           }

           .price>span:first-child {
               color: #eb5628;
               font-weight: bold;
               font-size: 20px;
               line-height: 20px;
           }

           .price>span:nth-child(2) {
               background-color: #eb5628;
               color: white;
               font-size: 13px;
               line-height: 20px;
           }

           .price>span:last-child {
               float: right;
               font-size: 13px;
               color: #777;
           }

           .des>a>label {
               font-size: 13px;
           }

           .des>a>label:first-child {
               color: #eb5628;
           }

           .des>a:link {
               text-decoration: none;
               color: black;
           }

           .des>a:visited {
               color: black;
           }

           .des>a:hover {
               color: #eb5628;
               text-decoration: underline;
           }

           .shop_info>a:visited {
               color: #777;
           }

           .shop_info>a {
               font-size: 13px;
           }

           .shop_info>label {
               float: right;
               font-size: 13px;
               color: #777;
           }

           .icon_info>span:first-child {
               background: url('img/sprite.png');
               background-size: 610px 600px;
               display: inline-block;
               background-position: -375px -400px;
               width: 32px;
               height: 32px;
           }

           .icon_info>span:last-child {
               background: url('img/2222.png');
               background-size: 860px 852px;
               display: inline-block;
               background-position: -344px -646px;
               width: 32px;
               height: 32px;
               border: 1px solid red;
               float: right;
           }

           .li>span {
               display: inline-block;
               background-color: #eb5628;
               color: white;
               width: 125px;
               float: left;
               text-align: center;
           }

           .l {
               position: relative;
           }

           .l>.li>span:nth-child(1) {
               width: 124px;
               border-right: 1px solid white;
           }

           .l>.li {
               position: absolute;
               bottom: 0px;
               display: none;
           }

           .l:hover>.li {
               display: block;
           }
       </style>
   </head>
   <body>
       <div class="goods">
           <div class="l">
               <img src="./111.jpg" alt="">
               <div class="li">
                   <span>找同款</span>
                   <span>找相似</span>
               </div>
           </div>
           <div class="text">
               <div class="price">
                   <span>￥12.80</span>
                   <span>包邮</span>
                   <span>1万+人付款</span>
               </div>
               <div class="des">
                   <a href="#">
                       <label for="des">鸡你太美</label>
                       <label for="">手办摆件恶搞ikun小黑子蔡徐坤公仔小玩偶车摆件小玩具</label>
                   </a>
               </div>
               <div class="shop_info">
                   <a href="">信誉玩具专营店</a>
                   <label>浙江金华</label>
               </div>
               <div class="icon_info">
                   <span></span>
                   <span></span>
               </div>
           </div>
       </div>
       <div class="goods">
           <div class="l">
               <img src="./111.jpg" alt="">
           </div>
           <div class="text">
               <div class="price">
                   <span>￥12.80</span>
                   <span>包邮</span>
                   <span>1万+人付款</span>
               </div>
               <div class="des">
                   <a href="#">
                       <label for="des">鸡你太美</label>
                       <label for="">手办摆件恶搞ikun小黑子蔡徐坤公仔小玩偶车摆件小玩具</label>
                   </a>
               </div>
               <div class="shop_info">
                   <a href="">信誉玩具专营店</a>
                   <label>浙江金华</label>
               </div>
               <div class="icon_info">
                   <span></span>
                   <span></span>
               </div>
           </div>
       </div>

</body>
</html>