为什么HTML页面在手机浏览器中底部菜单栏都正常显示，可是放在手机APP中就不能直接显示

html-css012

为什么HTML页面在手机浏览器中底部菜单栏都正常显示，可是放在手机APP中就不能直接显示,第1张

应该是插件不匹配了，你卸载重新安装一下试试。或者直接换其他的手机浏览器再安装APP插件，看看是否可以。现在越来越多的人在使用手机qq浏览器。我也是比较喜欢这个浏览器，操作简单，功能强大。

看视频很顺畅。上网也是很省流量。而像uc等其他手机浏览器，安装包比较大，上网速度不快，用起来不方便。

希望您采纳！

HTML5怎么把导航固定在底部的步骤如下：

css的定位样式属性来实现；会用到css中的position：fixed属性，结合来实现。

<style>.foot-menu{width:100%height:60pxbackground:#000position:fixedbottom:0/**距离底部为0*/left:0z-index:1}</style><div class="foot-menu">

<!---导航具体内容-->

</div>

拓展资料

css3网页底部固定导航是一款纯css3实现的网页底部固定导航菜单。特性介绍：

1、边框特性

CSS3对网页中的边框进行了一些改进，主要包括支持圆角边框、多层边框、边框色彩与图片等。在CSS3中最常用的一个改进就是圆角边框，通过CSS3的属性可以快速实现圆角定义，同时还可以根据实际情况针对特定角进行圆角定义 。

2、多背景图

CSS3允许使用多个属性(比如background-image、background-repeat、background-size、background-position、background-origin和background-clip等)在一个元素上添加多层背景图片。

是这样的效果吧？！

这是具体的代码，用纯CSS写的，希望能帮助到你！

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>底部菜单上弹且固定</title>

<style>

*{ margin:0padding:0}

body{ margin:0padding:0background:#f3f3f3}

#slcd{ width:100%height:60pxbackground:#09Cposition:fixedbottom:0px}

#slcd ul,#slcd ul li{ height:60px}

#slcd ul li{ width:24.9%float:leftlist-style-type:noneline-height:60pxtext-align:centeroverflow:hidden}

#slcd ul li:hover{ background:#09Foverflow:visible}

#zcd ul,#zcd ul li{ width:100%height:60pxbackground:#09C}

.zcd1{ margin-top:-240pxwidth:100%}/*每个子菜单的上边距需要手动调整*/

.zcd2{ margin-top:-300pxwidth:100%}

.zcd3{ margin-top:-300pxwidth:100%}

.zcd4{ margin-top:-120pxwidth:100%}

</style>

</head>

<body>

<div id="slcd">

  <ul>

      <li>菜单1

      <div id="zcd" class="zcd1">

          <ul>

                  <li><a href="#">菜单1子菜单1</a></li>

                  <li><a href="#">菜单1子菜单2</a></li>

                  <li><a href="#">菜单1子菜单3</a></li>

              </ul>

          </div>

      </li>

      <li style="border-left:2px solid #CCCborder-right:2px solid #CCC">菜单2

      <div id="zcd" class="zcd2">

          <ul>

                  <li><a href="#">菜单2子菜单1</a></li>

                  <li><a href="#">菜单2子菜单2</a></li>

                  <li><a href="#">菜单2子菜单3</a></li>

                  <li><a href="#">菜单2子菜单4</a></li>

              </ul>

          </div>

      </li>

      <li style="border-right:2px solid #CCC">菜单3

      <div id="zcd" class="zcd3">

          <ul>

                  <li><a href="#">菜单3子菜单1</a></li>

                  <li><a href="#">菜单3子菜单2</a></li>

                  <li><a href="#">菜单3子菜单3</a></li>

                  <li><a href="#">菜单3子菜单4</a></li>

              </ul>

          </div>

      </li>

      <li>菜单4

      <div id="zcd" class="zcd4">

          <ul>

                  <li><a href="#">菜单4子菜单1</a></li>

              </ul>

          </div>

      </li>

  </ul>

</div>

<div style="width:1080pxheight:2000pxbackground:#c1c1c1margin:0 autofont-size:200px"><p>希望能帮助到你</p></div>

</body>

</html>