Yesterday, a netizen asked if it is possible to move the advertisement code at the bottom of the mobile terminal, and then fix the JS code of image style at the bottom. Here, the available methods are sorted out directly, which can be used after testing. I also record it here. If necessary, I can use it directly in the future.
First, CSS style
<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>
Second, div code
<div class=”bottommob” id=”bottommob”>
<div class=”bottom-con”>
<div class=”bottom-pic”>
≪ img SRC = “picture address” width = “60” height = “60” ALT = / >< br > 0</div>
≪ div class = “bottom text” id = “bottom text” >captions < br > 0≪ div class = “bottom BTN” >click the button <& div >< br > to</div>
≪ a id = “bottomlink” A ><& A >< br > A</div>
JS code is not used here, but div floating style is directly used here, so the effect will be better, because some browsers intercept JS. Users who need it can use it.