响应式手机手机底部悬浮代码

价格:免费

响应式手机手机底部悬浮代码


QQ截图20200111215139.jpg

首页我们在要HTML头部声明移动优先:

	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />


写CSS样式

*{padding: 0; margin:0;}    这一行在实际应用中要删除。不然可能和你原来的网站相冲突
.footer-fixed {position:fixed;bottom:0px;z-index:40;width:100%;background:#fff;border-top:1px solid #d6d6d6;}    
.footwap {width:100%;padding-top:10px;height:60px;color:#000}    
.col-xs-400 {width:25%;float:left;text-align:center;}    
.col-xs-400 a{color:#666; text-decoration: none;}    
.col-xs-400 p{padding: 0; margin: 0;}


写HTML代码:

   <div style="height: 50px;">这一行的目的是让悬浮的底部不要挡住了网页原来底部的内容</div>  

	<div class="footer-fixed">
    		<div class="footwap">
    			<div class="col-xs-400">
    				<a href="/">
	    				<span><img src="menu1.png"></span>
	    				<p  class="footmenucolor">首页</p>
    				</a>
    			</div>
				
				
    			<div class="col-xs-400">
    				<a href="{pboot:sort scode=5}[sort:link]{/pboot:sort}">
	    				<span><img src="menu2.png"></span>
	    				<p class="footmenucolor">产品中心</p>
    				</a>
    			</div>
    			<div class="col-xs-400">
    				<a href="tel:{pboot:companyphone}">
	    				<span><img src="menu3.png"></span>
	    				<p class="footmenucolor">电话咨询</p>
    				</a>
    			</div>
    			<div class="col-xs-400">
    				<a href="tel:{pboot:companymobile}"  >
	    				<span><img src="menu4.png"></span>
	    				<p class="footmenucolor">手机咨询</p>
    				</a>
    			</div>

    			
    		</div>
    	</div>
   	



本文关键词:
相关文章
侧边客服效果上一篇文章
下一篇文章没有了!
COPYRIGHT (©) 2019 企业极速建站-高端风格模板建站-高端网站定制设计-黑马建站专业网站建设公司.
粤ICP备16086975号-1