web第三天仿淘宝网页

最新推荐文章于 2023-01-03 14:43:47 发布

東霜鲟雪

最新推荐文章于 2023-01-03 14:43:47 发布

阅读量138

点赞数

文章标签：前端 css css3

本文链接：https://blog.csdn.net/m0_65858385/article/details/127900746

版权

           .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/O3.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/2.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/1.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="../pic/5.jpg" alt="">
                   <div class="find">
                       <div><a href="#">找同款</a></div>
                       <div><a href="#">找相似</a></div>
                   </div>
               </div>
               <div class="price">
                   <span>￥299.00</span>
                   <span>包邮</span>
                   <span>3万+人已购买</span>
               </div>
               <div class="des">
                   <a href="#">灰白中分假发</a>
               </div>
               <div class="shopinfo">
                   <a href="#">中分旗舰店</a>
                   <span>四川成都</span>
               </div>
               <div class="icon">
                   <span></span>
                   <span></span>
                   <span></span>
               </div>
           </div>
           <div class="good">
               <div class="pic">
                   <img src="../pic/6.jpg" alt="">
                   <div class="find">
                       <div><a href="#">找同款</a></div>
                       <div><a href="#">找相似</a></div>
                   </div>
               </div>
               <div class="price">
                   <span>￥298.00</span>
                   <span>包邮</span>
                   <span>3万+人已购买</span>
               </div>
               <div class="des">
                   <a href="#">荔枝</a>
               </div>
               <div class="shopinfo">
                   <a href="#">无核荔枝店</a>
                   <span>四川成都</span>
               </div>
               <div class="icon">
                   <span></span>
                   <span></span>
                   <span></span>
               </div>
           </div>
           <div class="good">
               <div class="pic">
                   <img src="../pic/7.jpg" alt="">
                   <div class="find">
                       <div><a href="#">找同款</a></div>
                       <div><a href="#">找相似</a></div>
                   </div>
               </div>
               <div class="price">
                   <span>￥388.00</span>
                   <span>包邮</span>
                   <span>3万+人已购买</span>
               </div>
               <div class="des">
                   <a href="#">美味香精煎鱼</a>
               </div>
               <div class="shopinfo">
                   <a href="#">香精煎鱼旗舰店</a>
                   <span>四川成都</span>
               </div>
               <div class="icon">
                   <span></span>
                   <span></span>
                   <span></span>
               </div>
           </div>
           <div class="good">
               <div class="pic">
                   <img src="../pic/8.jpg" alt="">
                   <div class="find">
                       <div><a href="#">找同款</a></div>
                       <div><a href="#">找相似</a></div>
                   </div>
               </div>
               <div class="price">
                   <span>￥5.00</span>
                   <span>不包邮</span>
                   <span>3万+人已购买</span>
               </div>
               <div class="des">
                   <a href="#">油饼食不食</a>
               </div>
               <div class="shopinfo">
                   <a href="#">油饼全国旗舰店</a>
                   <span>四川成都</span>
               </div>
               <div class="icon">
                   <span></span>
                   <span></span>
                   <span></span>
               </div>
           </div>
           <div class="good">
               <div class="pic">
                   <img src="../pic/9.jpg" alt="">
                   <div class="find">
                       <div><a href="#">找同款</a></div>
                       <div><a href="#">找相似</a></div>
                   </div>
               </div>
               <div class="price">
                   <span>￥999.00</span>
                   <span>包邮</span>
                   <span>3万+人已购买</span>
               </div>
               <div class="des">
                   <a href="#">树枝666</a>
               </div>
               <div class="shopinfo">
                   <a href="#">北冥有鲲旗舰店</a>
                   <span>四川成都</span>
               </div>
               <div class="icon">
                   <span></span>
                   <span></span>
                   <span></span>
               </div>
           </div>
           <div class="good">
               <div class="pic">
                   <img src="../pic/11.jpg" alt="">
                   <div class="find">
                       <div><a href="#">找同款</a></div>
                       <div><a href="#">找相似</a></div>
                   </div>
               </div>
               <div class="price">
                   <span>￥799.00</span>
                   <span>包邮</span>
                   <span>3万+人已购买</span>
               </div>
               <div class="des">
                   <a href="#">坤巴同款背带裤</a>
               </div>
               <div class="shopinfo">
                   <a href="#">坤巴旗舰店</a>
                   <span>四川成都</span>
               </div>
               <div class="icon">
                   <span></span>
                   <span></span>
                   <span></span>
               </div>
           </div>
           <div class="good">
               <div class="pic">
                   <img src="../pic/12.jpg" alt="">
                   <div class="find">
                       <div><a href="#">找同款</a></div>
                       <div><a href="#">找相似</a></div>
                   </div>
               </div>
               <div class="price">
                   <span>￥99.00</span>
                   <span>包邮</span>
                   <span>3万+人已购买</span>
               </div>
               <div class="des">
                   <a href="#">鸡哥同款卫衣</a>
               </div>
               <div class="shopinfo">
                   <a href="#">旗舰店</a>
                   <span>四川成都</span>
               </div>
               <div class="icon">
                   <span></span>
                   <span></span>
                   <span></span>
               </div>
           </div>
       </div>