简单底部导航栏如何构建（自用笔记）

原创已于 2025-09-07 15:43:10 修改 · 290 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2025-09-07 15:39:33 首次发布

底部 - 布局

一般分成横向三大块

布局首先要分大块，再分小块，要有盒子套盒子的意识，步骤要清晰

第一大块：服务页面

这里面会出现图片和文字在一个小盒子里面，并且，文字和图片在一个水平线居中

对于这种情况，一般会有四个小盒子，都是图片和文字的结构。

实现水平方向等分空间

第一步，我们会使用ul li 结构

第二步，我们给ul添加flex布局

第三部，调整主轴对齐当时，对ul进行处理，justiy-content:space-evenly

到达第三步，我们就整理好包含图片和文字大盒子的布局

第四步，我们调整图片边距，文字大小，我们要实现文字图片水平居中，将文字行高设置与图片的高相同

第二大块：帮助中心

第一步:

如上图所示，帮助中心区域，需要分成一左一右，左边文字，右边图片

分成这两大块如下操作

主轴对齐方式 justify- content :space-between

第二步；

设置好内边距，布局美观


.help{
display:flex;
justify-content : space - between;
height:300px;
background-color:pink;
}

第三步

左边文字区域我们使用表格代码来写

<div class="help">
<div class = "left">
<dl>
<dt>购物指南</dt>
<dd><a href = "#">购物指南</a></dd>
<dd><a href = "#">购物指南</a></dd>
<dd><a href = "#">购物指南</a></dd>
</dl><dl>
<dt>购物指南</dt>
<dd><a href = "#">购物指南</a></dd>
<dd><a href = "#">购物指南</a></dd>
<dd><a href = "#">购物指南</a></dd>
</dl>
<dl>
<dt>购物指南</dt>
<dd><a href = "#">购物指南</a></dd>
<dd><a href = "#">购物指南</a></dd>
<dd><a href = "#">购物指南</a></dd>
</dl>
<dl>
<dt>购物指南</dt>
<dd><a href = "#">购物指南<span class = "iconfont 接着写图标的代码" ></span></a></dd>
<dd><a href = "#">购物指南</a></dd>
<dd><a href = "#">购物指南</a></dd>

</dl>
<dl>
<dt>购物指南</dt>
<dd><a href = "#">在线客服</a></dd>
<dd><a href = "#">购物指南</a></dd>
<dd><a href = "#">购物指南</a></dd>
</dl>
</div>
<div class = "right">
<ul>
<li class ="pic"><img src ="图片路径"></li>
<p>文字。。。。。</p>
<li  class ="pic"><img src ="图片路径"></li>
<p>文字。。。。。</p>
</ul>
</div>
</div>

.help{
display:flex;
justify-content : space - between;
height:300px;
}
.help .left{
display:flex;
}
.help .left dl{
margin-right:84px;
}
.help .left dl:last-child{
margin-right:0;
}

.help.left dt{
margin-bottom:30px;
font-size:18px;
}
.help.left dd{
margin-bottom:10px;
}
.help .left a {
color:gray;
]
.help .right ul{
display:flex;
}
.help .right li:first-child{
margin-right: 55px
}
.help .right .pic{
margin-bottom:10px
width:120px
height:120px
}
.help .right .p{
color:
text-align:cneter
}

第三大块：版权信息

第一行用标签里面a标签

第二行用p直接粘贴文字就行

a标签上下0 左右10

<div class = 'copyright'>
<p>
<a href=''>关于我们</a>|
<a href=''>关于我们</a>|
<a href=''>关于我们</a>|
<a href=''>关于我们</a>|
<a href=''>关于我们</a>|
<a href=''>关于我们</a>|
<a href=''>关于我们</a>
</p>
<p> copyright @ 小兔鲜 </p>
</div>

.copyright{
text-align；center
}
.copyright p {
 margin-bottom:10px
color
}

.copyright p a{
color
margin 0 10px
}