在网站中实现信息提示框,其实非常简单的,无非就是用html,css来实现。把这个div通过css来放置在页面底部而已,具体效果您可
以查看我司响应式网站建设官网的具体效果:
看起来还可以吧,也能达到醒目的提示效果。下面我们给出具体的实现过程:
CSS代码如下:
<style>
@media screen and (max-width: 768px){
.footertip{display: none;}
}
@media screen and (min-width: 768px){
.footertip {
position: fixed;
z-index: 2000;
padding: 10px 0;
width: 100%;
background-color: #333;
background-color: rgba(0,0,0,0.75);
color: #FFF;
font-size: 18px;
text-align: center;
bottom: 0;
}
.btn-info {
color: #fff;
background-color: #2ed4b4;
border-color: #46b8da;
}
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.btn-info:hover {
color: #fff;
background-color: #31b0d5;
border-color: #269abc;
}
}
</style>
HTML显示层部分:
<div class="footertip hidden-xs"><span style="color: #fff;font-size: 17px;">祝广大客户2017鸡年大吉,阖家幸福!芊雅企服在新的一年一如既往为您竭诚服务,相关业务可直接咨询! </span><a class="btn btn-info" target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1409198410&site=qq&menu=yes" style="text-decoration: none;">点击联系</a></div>
看起来提高逼格不少,如果对您有用,您可以直接copy修改文本即可。芊雅企服在新的一年依旧竭诚为您服务!响应式网站建设中,
这类效果还是得代码实现!