我正在研究如何制作静态导航栏并设法做到这一点
https://jsfiddle.net/dm310tau/
.bottom-bar
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
position: fixed;
z-index: 100;
bottom: 10px;
left: 0;
width: 100%;
height: 35px;
color: #999999;
background-color: #101010;
}
.bottom-bar li
{
float: left;
}
.bottom-bar a
{
display: block;
color: #999999;
text-align: center;
font-size: medium;
padding: 6px 16px;
text-decoration: none;
border: 1px solid transparent;
}
.bottom-bar a:hover:not(.active)
{
color: #EFEFEF;
border: 1px solid #AAAAAA;
}
.bottom-bar .active
{
color: #FEFEFE;
background-color: #303030;
padding: 3px 16px 8px 16px;
border: 1px solid #EEEEEE;
}
.bottom-bar .active:after
{
}<ul class = "bottom-bar">
<li class = "bottom-link">
<a class = "active"
href = "/one">
One
</a>
</li>
<li class = "bottom-link">
<a href = "/two">
Two
</a>
</li>
<li class = "bottom-link">
<a href = "/three">
Three
</a>
</li>
</ul>作为下一步，我试图使事件条最终像这样高一点，
但是，我不确定首先在哪里寻找这样的东西。我探索了使用的选项
.bottom-bar .active:after，但是，不幸的是，因为该栏应该是静态的，所以我无法像我看到的那样使用边框使该部分弹出得更高一点在其他网站上完成。
我知道我可以使用 Bootstrap 完成其中的一些，但这不是我的意图。我想学习 CSS 而不是只使用现有的东西而不了解幕后发生的事情。
最佳答案
这至少在 Chrome 中有效。评论解释了正在发生的事情。
<!DOCTYPE HTML>
<html>
<head>
<style>
#footer {
width: 100%;
height: 35px;
background-color: black;
position: fixed;
left: 0;
bottom: 0;
padding: 5px 0 0 20px; //top right bottom left
}
.link {
color: gray;
margin-right: 10px;
padding: 5px;
float: left;
position: relative;
}
.active {
color: white;
height: 50px;
border-bottom: none;
border-radius: 5px 5px 0 0;
}
.active:after { /*or :before*/
content: ""; /*allows shape to display*/
display: block;
width: 100%; /*cover element*/
top: -20px; /*position as you would like, just to show the difference*/
left: 0;
position: absolute;
height: 60px;
border: 1px solid white;
border-radius: 5px;
background-color: black;
z-index: -1; /*place behind element*/
}
</style>
</head>
<body>
<div id="footer">
<div id="links">
<div class="link active">Contact</div>
<div class="link">About</div>
<div class="link">Support me!</div>
</div>
</div>
</body>
</html>关于html - 静态导航栏的更高事件选项卡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48240135/