Floating ad adaptive JS code arrangement at the bottom of mobile terminal

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.

Related Article
Two methods of using CSS style to intercept the length of the title do not need to use functions

For example, when we make the website template, or choose to download to a good default, maybe due to the Read more

Method to solve the disorder of Chinese content in MySQL database submitted by PHP

Whether it is ASP or PHP programming language, or even other web languages, the basic application is nothing more than Read more

Two regular expression verification methods for PHP user registered mailbox

Generally, when we register or log in to an account on the web, we need to verify not only whether Read more

Three common methods of PHP connecting MySQL database

For PHP entry-level users, we only need to master the basic database write, read, edit, delete and other basic operations. Read more

Leave a Reply

Your email address will not be published. Required fields are marked *

*
To prove you're a person (not a spam script), type the security word shown in the picture.
Anti-spam image