手机界面的底部标签栏用css怎么写?

html-css015

手机界面的底部标签栏用css怎么写?,第1张

<div class="mybot">

     <div>

        <img src="">

        <p>聊天</p>

     </div>

     <div>

        <img src="">

        <p>聊天</p>

     </div>

     <div>

                <img src="">

                <p>聊天</p>

          </div>

          <div>

                <img src="">

                <p>聊天</p>

          </div>

</div> .mybot{     position: fixed

    bottom: 0

    width: 100%

    float: left

 }

还有一些图片和样式自己加。mybot下的div你自己变成百分之25他们自己对齐了。里面的img 和 p添加一个text-align: center

首先，最简单的办法是把宽和高设为相同的固定值。但是如果是采用自适应布局的，比如正方形的宽是屏幕宽度的50%，则要这样：

<div style="width:50% height:50vw background-color:#f00"></div>

唯一要注意的就是可能存在浏览器兼容问题，不过我在手机微信内置浏览器以及电脑的Chrome上测试都没问题