知乎导航栏实现

来源：互联网发布：cdr软件手机版编辑：程序博客网时间：2024/05/21 19:41

今天看知乎，发现有人评论要称为前端工程师，必须要能够复写知乎导航栏。好嘛，有那么难么，我试试。

导航栏，下拉时仍存在，故使用了固定布局（position:fixed;）。左右有一定空闲，故可以用自适应布局来实现。整个过程不是很难，只是在实现文本垂直居中时走进了误区。

先开始指定导航栏到合适的height，此值比文本字号大，实现文本的垂直居中时出现了问题。考虑到IE下无法实现vertical-align所以放弃此方法，而设置line-height的值与height的值相等在百分比模式下无法实现文本的垂直居中，我特意看了下源代码，发现原代码中指定了px，此时令line-height和height的值都为45px。

遂百度之：高度是百分比的容器如何实现内部的单行文本垂直居中？

看到伪类元素了，不过突然发现这个bug就是由于指定导航栏的高度大于文本高度导致的，所以不指定导航栏高度，同时指定padding来实现文本上下留白。

至此导航完毕。遂加上固定布居，突然出现了个bug，右边有一段空余，然后加上right=0（目前还没想清楚为什么）。所有代码如下：

<!doctype html><head><meta charset="utf-8"><title>֪知乎，你的知识库</title><style>html{height:100%;//注意这里，不然后面的百分比永远不对。}body{height:100%;margin:0px;padding:0px;}nav{position:fixed;top:0px;left:0px;right:0px;padding:1% 20%;text-align:center;background-color:green;}.profile{float:right;width:11.11%;height:100%;position:relative;top:10%;}.logo{float:left;width:10%;height:100%;line-height:100%;position:relative;top:10%;}#content{height:100%;overflow:hidden;}.cols1{float:left;width:15%;height:100%;padding:0% 5%;position:relative;top:10%;text-align:center;}a{text-decoration:none;}</style></head><body><nav><div class="profile">Tonyhzw</div><div class="profile">提问</div><div class="logo">知乎</div><input type="search" class="logo" style="top:0px;"><div id="content">   <div class="cols1"><a href="#">首页</a></div>   <div class="cols1"><a href="#">话题</a></div>   <div class="cols1"><a href="#">发现</a></div>   <div class="cols1"><a href="#">消息</a></div></div></nav></body><html>

0 0