实现代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>用户注册</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 > span:first-child{ font-size: 20px; font-weight: bold; color: orange; margin-left: 5px; } .price > span:nth-child(2){ font-size: 14px; background-color: red; color: white; padding-left: 2px; padding-right: 2px; } .price > span:nth-child(3){ font-size: 14px; float: right; color: #999; margin-right: 10px; } .price > span:nth-child(4){ font-size: 15px; float: left; color: black; margin-right: 10px; } .good > span:first-child{ font-size: 15px; float: left; color: #999; margin-right: 10px; } .good > span:nth-child(2){ font-size: 30px; background-color: red; color: white; padding-left: 3px; padding-right: 3px; background-image: linear-gradient(red,yellow,red); } .good > span:nth-child(3){ width: 32px; height: 32px; position:40px -170px } </style> </head> <body> <div class="root-div"> <div class="image-parent"> <img src="6.jpg" alt="衣服"> <div class="image-child"> <div>找同款</div> <div>找相似</div> </div> <div class="price"> <span>￥9.9</span> <span>包邮</span> <span>3万+人付款</span> <span>衣图雅卫衣女春秋宽松韩版学生秋冬装开衫外套女连帽上衣服 </span> </div> <div class="good"> <span style="word-spacing: 80px;">衣图雅旗舰店 浙江宁波</span> <span>双11</span> <span><img src="a.png"/></span> </div> </div> </div> </body> </html>
实现结果还存在一些问题：
下方精灵图的插入存在一些问题，日后修正
