ITPub博客

首页 > 应用开发 > Html/css > wordpress网站怎么为手机端底部添加菜单和按钮?

wordpress网站怎么为手机端底部添加菜单和按钮?

Html/css 作者:paul_gu 时间:2020-07-26 11:04:45 0 删除 编辑

好了,废话不多说,把这段代码复制到 footer.php 即可。




<style type=”text/css”>

.nav{

display:none;

}

@media only screen and (max-width:450px){

.site-info{

padding:15px 0 58px 0;

}

#advert_widget, .php_text .widget-text, .widget .textwidget{

padding:0;

}

.nav{

position:fixed;

z-index:999;

bottom:0;

width:100%;

height:40px;

display:block;

right:0;

box-shadow:0px 0px 10px 3px rgba(232,232,232,1.0);

-webkit-box-shadow:0px 0px 10px 3px rgba(232,232,232,1.0);

-mox-box-shadow:0px 0px 10px 3px rgba(232,232,232,1.0);

-o-box-shadow:0px 0px 10px 3px rgba(232,232,232,1.0);

-ms-box-shadow:0px 0px 10px 3px rgba(232,232,232,1.0);

}

.nav{

padding-left:0;

margin-bottom:0;

list-style:none;

}

.nav span{

width:50px !important;

height:50px !important;

}

.font-text {

margin: 0 0 0 5px;

color: #FFFFFF;

}

.nav > ul{

position:relative;

z-index:1;

height:40px;

background: rgba(102,102,102,.85);

list-style-type:none;

margin:0px;

padding:0px!important;

}

.nav ul li{

position:relative;

float:left;

width:20%;

text-align:center;

margin:0px;

padding:0px

list-style-type:none;

top:5px;

}

.nav ul li a{

display:block;

margin-right:auto;

margin-left:auto;

}

}

</style>

<div class=”nav”>

<ul>

<li><a href=””><span class=”font-text”><i class=”fa-home fa”></i>计算机培训机构</span></a></li>

<li> <a href=”/hulianwangchuangye”><span class=”font-text”><i class=”fa fa-music”></i>互联网创业</span></a></li>

<li> <a href=”/zimeitiyunying″><span class=”font-text”><i class=”fa-twitch fa”></i>新媒体运营</span></a></li>

<li> <a href=”h/kecheng”><span class=”font-text”><i class=”fa fa-pencil”></i>课程</span></a></li>

<li> <a href=””><span class=”font-text”><i class=”fa fa-at”></i>回首页</span></a></li>


</ul>

</div>


来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/69966683/viewspace-2706976/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2020-03-16

  • 博文量
    9
  • 访问量
    2806