<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <<<link rel="stylesheet" href="../img/pdd002.css"> </head> <body> <div class="div1"></div> <div class="div2"></div> <div class="box"> <div class="box1"> <img src="../img/777.png" > <div class="box2"> <div>微信扫码下载</div> <div>APP专享优惠</div> </div> </div> </div> </body> </html>
*{ padding: 0; margin: 0; } .div1{ height: 400px; background-color: #A9A9A9; } .div2{ height: 400px; background-color: #FF0000; } .box{ width: 162px; height: 210px; background-color: #FFFFFF; position: fixed;/*固定定位*/ bottom: 150px; left: -81px; } .box:hover{ left: 0; } .box .box1{ margin: 8px; border: 2px solid #FFEDF1; padding: 20px 15px 8px; } .box .box1 img{ width: 100%; height: 100%; display: block;/*爸行内元素变成块元素*/ } .box .box1 .box2{ color: #666666; margin-top: 10px; font-size: 14px; text-align: center;/*文字居中对齐*/ }
原文：https://www.cnblogs.com/LLL0617/p/15207966.html