思路
我的思路是,制作一个类似支付宝这个“宫格式导航栏”
![](https://i-blog.csdnimg.cn/blog_migrate/25914450f004fcc245ab9a84b136edb2.jpeg)
完成截图
![](https://i-blog.csdnimg.cn/blog_migrate/7a5c1a17e70deaa0ad34face9c13ce23.jpeg)
主要源代码
css部分
html部分
![](https://i-blog.csdnimg.cn/blog_migrate/c1c6c4bc30447cff1f9eeff541bd6e01.png)
<!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%;