CSSは下部のタップバー機能を実装します

現在多くの携帯電話には、下部のタブバーを切り替える機能があります。私も最近、同様の機能を見つけました。さっそく、コードを見ていきましょう。

まずは効果画像をご覧ください

タブバーの切り替え

CSS スタイル

*{
           マージン: 0;
           パディング: 0;
           テキスト装飾: なし;
           リストスタイル: なし;

       }
       。足 {
           幅: 100%;
           高さ: 68px;
           背景: #FFFFFF;
           位置: 固定;
           下部: 0;
           ディスプレイ: フレックス;
           コンテンツの両端揃え: スペースを空ける;
           zインデックス: 999;
           /*行の高さ: 20px;*/
       }

       .foot li {
           高さ: 100%;
       }

       .foot li a {
           表示: ブロック;
           幅: 100%;
           高さ: 100%;
           /* 色: #979797;*/
       }

       .foot li a img {
           /*表示: ブロック;*/
           幅: 26px;
           高さ: 26px;
           上マージン: 10px;
       }

       .foot li ap {
           フォントサイズ: 12px;
           幅: 100%;
           テキスト配置: 中央;
           /* 色: #979797;*/
           上マージン: 7px;
       }
       .botm-title{
           色: #979797;
       }

       .アクティブ{
           色: #5C91FA;
       }
       .xz-img{
           テキスト配置: 中央;
       }

ページコード

<%--下部タップバー--%>
   <ul class="foot">
       <li class="Imgbox" img="/images/tuiJianCus/index-wxz-icon.png" data-img="/images/tuiJianCus/index-xz-icon.png">
           <a href="/views/tuiJianCus/index.jsp">
               <div class="xz-img">
                   <img src="/images/tuiJianCus/index-wxz-icon.png" />
               </div>

               <p class="botm-title">ホームページのおすすめ</p>
           </a>
       </li>
       <li class="Imgbox" img="/images/tuiJianCus/tuijiang-wxz-icon.png" data-img="/images/tuiJianCus/tuijiang-xz-icon.png">
           <a href="/views/tuiJianCus/tuijian_speed.jsp">
               <div class="xz-img">
                   <img src="/images/tuiJianCus/tuijiang-xz-icon.png" />
               </div>

               <p class="botm-title actives ">私のおすすめ</p>
           </a>
       </li>
       <li class="Imgbox" img="/images/tuiJianCus/my-wxz-icon.png" data-img="/images/tuiJianCus/my-xz-icon.png">
           <a href="/views/tuiJianCus/usercenter.jsp">
               <div class="xz-img">
                   <img src="/images/tuiJianCus/my-wxz-icon.png" />
               </div>

               <p class="botm-title ">私の特典</p>
           </a>
       </li>
   </ul>

CSS で下部タップバーを実装する方法についての記事はこれで終わりです。CSS 下部タップバーに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: JavaScript の document.activeELement フォーカス要素の紹介

>>: 初心者のための入門チュートリアル⑤：ウェブサイト登録はとても簡単、簡単な登録のヒント