html代码|网站底部横幅【跟随屏幕移动】

时间:7个月前   阅读:166
<link rel="stylesheet" href="//seo.zshao.vip/css/hengfu.css">
	 <div class="zhankr_slogin cl" style="bottom: 0px; opacity: 1;">
        <div class="wp">
          <div class="zhankr_slogin_info"></div>
          <div class="zhankr_slogin_btn">
            <a rel="nofollow" href="#" class="qqbutton" title="普通登录"style="color: #FFFFFF;">
              <i class="fa fa-wechat"></i>购买卡密</a>
          </div>
          <span class="zhankr_slogin_line"></span>
          <div class="zhankr_slogin_qq">
            <a rel="nofollow"href="http://www.hpjyfuzhu.cn/erji/wangpan.html" class="qqbutton" rel="nofollow"style="color: #FFFFFF;">
              <i class="fa fa-qq"></i>网盘地址</a>
          </div>
       
         
        </div>
      </div>

注意一下,CSS写了自适应,只有大屏幕或者PC端才会显示


<header class="zshaowl">   
<div class="zshao vip">    
<!-- 内容放下面 -->
<div class="zhankr_slogin_btn"> 
<a class="more fr" href="放网址">购卡地址</a></div><div class="zhankr_slogin_qq"> 
<a  href="放网址">进入货源站</a>
</div>
<!-- 内容放上面面 -->
</header>

<style type="text/css">.zshaowl {  position: fixed; bottom: 0; left: 0; right: 0; 
/* 决定了搜索框置顶 */  height: 70px; padding: 0 10px;/*  模块大小 */  background-color: #(0-255)000000 ;/* 模块底色 */ opacity: 0.8; /* 透明效果设置 */  z-index: 10;}
.zshao.vip {  height: 60px; padding: 7px 0;opacity: 9.8; /*  模块大小 */    
text-align: center;/*  居中 */} 
.zhankr_slogin_btn {    display: inline-block;    line-height: 40px;    height: 40px;    margin: 0 8px;color: #fff !important;}
.zhankr_slogin_btn a {    display: block;    background: #ec2546;    color: #fff;    padding: 0 30px;    border-radius: 3px;    font-size: 16px;    border-radius: 5px;} 
.zhankr_slogin_qq {    border-radius: 10%;    display:inline-block !important;    zoom:1;    display:inline;    line-height:40px;    height:40px;    margin:0 8px;    white-space: nowrap;color: #fff;    margin-right: 3px;}
.zhankr_slogin_qq a {    display: block;    color: #fff;    padding: 0 30px;    border-radius: 3px;    font-size: 16px;    background: #2581ff;    border-radius: 5px;}

</style><!--另外一个分割-->


上一篇:php代码|显示网站在线人数

下一篇:js代码|数字逐步增加到设置值

网友评论