Floating ads at the bottom of the website Computer mobile phone adaptive code Pure CSS New Start Blog

Floating ads at the bottom of the website Computer mobile phone adaptive code pure CSS; Cut the crap and go straight to dry goods:

HTML part:

 <div class="bottommob" id="bottommob"> <div class="bottom-con"> <div class="bottom-pic"> <img src="Picture address" width="60" height="60" alt=""/> </div> <div class="bottom text" id="bottomText">Description text</div> <div class="bottom btn">Click the button</div> </div> <a id="bottomLink" href=" http://www.henenseo.com "></a> </div>

CSS style section:

 <style> .margingT { margin-bottom: 80px; } .bottommob{ -webkit-box-sizing: border-box; height: 80px; position: fixed; bottom: 0; left: 0; z-index: 1000; padding: 0 10px; overflow: hidden; width: 100%; background: rgba(0, 0, 0, .8); } .bottom-pic { position: absolute; top: 10px; width: 60px; height: 60px; overflow: hidden; -webkit-border-radius: 10px; border-radius: 10px; } .bottom-pic img { width: 100%; height: 100%; } .bottom-text { margin-left: 70px; line-height: 80px; font-size: 32px; color: #fff; } .bottom-btn { position: absolute; top: 20px; right: 10px; height: 40px; line-height: 40px; color: #fff; background-color: #60b900; border-radius: 6px; text-align: center; font-size: 24px; padding: 0 5px; font-weight: bold; } .bottommob a { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } </style>