css制作响应式底部导航栏-css教程-PHP中文网

css制作响应式底部导航栏

P粉602998670

发布： 2025-11-16 13:31:02

原创

1028人浏览过

答案：使用HTML和CSS创建响应式底部导航栏，通过Flexbox实现横向布局，结合媒体查询适配移动端竖屏显示。导航项包含图标与文字，利用fixed定位固定于底部，支持多设备自适应，提升用户体验。

css制作响应式底部导航栏

制作一个响应式底部导航栏，关键是让导航在不同屏幕尺寸下都能良好显示，尤其在移动端从横向变为竖向排列，并固定在页面底部。下面是一个简洁实用的实现方式，使用 HTML 和 CSS（含 Flexbox 与媒体查询）来完成。

1. 基础HTML结构

创建一个简单的底部导航结构，包含几个导航链接：

2. 核心CSS样式

使用 Flexbox 布局让导航项均匀分布，并设置默认样式：

.bottom-nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #fff;
  border-top: 1px solid #eee;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
  z-index: 1000;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #777;
  text-decoration: none;
  font-size: 14px;
  padding: 8px 0;
  width: 25%;
}

.nav-item i {
  font-size: 20px;
  margin-bottom: 2px;
}

.nav-item.active {
  color: #007aff;
  font-weight: 600;
}

.nav-item:hover,
.nav-item.active:hover {
  background-color: #f5f5f5;
}

3. 响应式适配（移动端优化）

在小屏幕上确保图标和文字居中，字体大小合适。也可考虑横屏时调整布局：

立即学习“前端免费学习笔记（深入）”；

20款顶部固定响应式导航菜单栏

Bootstrap,顶部固定,导航栏,菜单栏,导航菜单,响应菜单栏,固定菜单,响应式导航菜单

128

查看详情

@media (min-width: 768px) {
  .bottom-nav {
    width: 100%;
    max-width: 480px;
    bottom: 0;
    left: 50%;;
    transform: translateX(-50%);
    border-radius: 16px 16px 0 0;
  }
  body {
    padding-bottom: 80px;
  }
}

这段媒体查询让导航在平板或桌面端更居中美观，同时避免拉伸过宽。