Question

我正在研究如何制作静态导航栏并设法达到这个目标

＆＃13;

.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
{
}

＆＃13;

<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>

＆＃13;

下一步我试图让它成为活跃的酒吧，如此高一点，
但是，我不知道第一个找到这样的东西的地方。我已经探讨了使用的选择 .bottom-bar .active:after但是，不幸的是，因为该栏应该是静态的，所以我不能通过使用像我在其他网站上看到的那样使用边框来使弹出更高的部分。

我知道我可以使用Bootstrap做一些这些，但这不是我的意图。我想学习CSS，而不是只使用那里的内容，而不是了解幕后发生的事情。

Answer 1

这至少适用于Chrome。评论解释了正在发生的事情。

＆＃13;

<!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>

＆＃13;

高级活动选项卡，用于静态导航栏

1 个答案: