在网页设计中,导航栏是非常关键的一个组成部分。而在其中,导航图标的排版则直接影响网页的整体美观度和用户体验。这里介绍一种常见的导航图标分三栏排版的方法。首先,在HTML代码中创建一个标签,作为整个导航
<nav> <ul> <li><a href="#"><i class="icon1"></i>Page 1</a></li> <li><a href="#"><i class="icon2"></i>Page 2</a></li> <li><a href="#"><i class="icon3"></i>Page 3</a></li> <li><a href="#"><i class="icon4"></i>Page 4</a></li> <li><a href="#"><i class="icon5"></i>Page 5</a></li> <li><a href="#"><i class="icon6"></i>Page 6</a></li> </ul> </nav>
nav { display: flex; justify-content: space-between; height: 50px; background: #333; }
li a { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 5px 10px; color: #fff; text-decoration: none; } li a i { font-size: 24px; margin-bottom: 5px; } li a:hover { background: #666; } li a:hover i { color: #ff0; }
@media (max-width: 768px) { nav { flex-direction: column; } }
文章说明:
本文原创发布于探乎站长论坛,未经许可,禁止转载。
题图来自Unsplash,基于CC0协议。
该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。
发帖
与我相关
我的任务
分享
暂无管理员
评论: css中导航图标怎么分三栏排版
粉丝
0
关注
收藏