Web前端作业3

最新推荐文章于 2024-05-18 16:20:54 发布

池棠逍荷

最新推荐文章于 2024-05-18 16:20:54 发布

阅读量72

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_63162792/article/details/128154321

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <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="./TP/猫猫.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>10万+人已购买</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>
   </body>
</html>