如何在移动网站中实现底部标签栏

Question

LinkedIn中的底部导航栏

这背后的技术是什么。如何在网页中实现它？ 如果需要任何类似react或angular的框架，请提及它。

Answer 1

您实际上不需要任何框架。

使用CSS position: fixed

可以很容易地将HTML dom-nodes附加到页面上。

这会将HTML元素固定到其他元素上方的视图层。让我给你看一个例子：

#fixme {
  position: fixed;
  bottom: 0;
  z-index: 999;
  
  background: red;
  color: white;
  padding: 10px;
}

<div id="fixme">I’m fixed</div>
<p>Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the pageSome random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page Some random text to fill the page</p>

看看I’m fixed div是如何固定在其他所有东西之上的？

• position: fixed将元素固定到位
• bottom: 0 =将元素放置在页面底部
• z-index: 999将div放置在值为z-index的{​​{1}}上，只要它比其他任何数字都高，它就可以是任何东西。

您还需要使用media queries来区分是小屏幕还是大屏幕。

PS：建议您阅读一些有关Web开发的初学者教程。尤其是html + css。

欢迎来到网络开发社区：）

Answer 2

尝试这个东西

.nav {
  overflow: hidden;
  background-color: #333;  
  position: fixed;
  bottom: 0;
  width: 100%;
}

.nav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

a:hover{
  background-color: #4CAF50;
}

<div class="nav">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</div>

希望此帮助