编辑1种便于在手机上使用的导航栏

原创于 2020-03-14 23:05:09 发布 · 488 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#web #html

Web 同时被 2 个专栏收录

12 篇文章

订阅专栏

HTML

4 篇文章

订阅专栏

本文介绍了如何设计一个类似支付宝的宫格式导航栏，适用于手机用户。通过完成的截图展示效果，并提供了主要的CSS和HTML源代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思路

我的思路是，制作一个类似支付宝这个“宫格式导航栏”

完成截图

主要源代码

css部分

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航栏测试</title>
    <meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">
    <style>
        .categoryLiIcon{
            overflow:hidden;
            background:#d2d2d2;
            margin:.15rem 0;
            padding-bottom:.5rem;
        }
        .categoryLiIcon li{
            float:left;
            width:25%;overflow:hidden;
            margin-top:.25rem;
        }
        .categoryLiIcon li a{
            text-decoration:none;
            display:block;
            text-align:center;
        }
        .categoryLiIcon li a img{
            width:2rem;
            height:2rem;
            border-radius:100%;
            margin:.2rem 0;
        }
        .categoryLiIcon li a em{
            display:block;
            font-style: normal;
            font-size: small;
            color:#666;
        }
    </style>
</head>
<body>

<ul class="categoryLiIcon" >
    <li>
        <a href = "#">
            <img src="source/upload/menu_bg_01.png" />
            <em>蔬菜水果</em>
        </a>
    </li>
    <li>
        <a href = "#">
            <img src="source/upload/menu_bg_03.png" />
            <em>米面粮油</em>
        </a>
    </li>
    <li>
        <a href = "#">
            <img src="source/upload/menu_bg_06.png" />
            <em>禽蛋肉类</em>
        </a>
    </li>
    <li>
        <a href = "#">
            <img src="source/upload/menu_bg_07.png" />
            <em>调料干货</em>
        </a>
    </li>
    <li>
        <a href = "#">
            <img src="source/upload/menu_bg_10.png" />
            <em>水产火锅</em>
        </a>
    </li>
    <li>
        <a href = "#">
            <img src="source/upload/menu_bg_11.png" />
            <em>餐厨用品</em>
        </a>
    </li>
    <li>
        <a href = "#">
            <img src="source/upload/menu_bg_14.png" />
            <em>熟食豆制</em>
        </a>
    </li>
    <li>
        <a href = "#">
            <img src="source/upload/menu_bg_15.png" />
            <em>常购品</em>
        </a>
    </li>
</ul>

</body>
</html>