仿PHP中文网头部导航
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网</title> <link rel="stylesheet" href="2.css"> <link rel="stylesheet" href="font-awesome.min.css"> <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"> </head> <body> <div class="top"> <div class="logo"><a href="index"><img src="images/logo.png" alt=""></a></div> <ul class="nav_left"> <li style="width: 68px;background:rgba(255,255,255,0.2);"><a href="">首页</a></li> <li><a href="">视频教程</a></li> <li><a href="">社区问答</a></li> <li><a href="">技术文章 <i class="fa fa-sort-down fa-1g"></i></a></li> <li><a href="">编程词典 <i class="fa fa-sort-down fa-1g"></i></a></li> <li><a href="">工具下载 <i class="fa fa-sort-down fa-1g"></i></a></li> <li><a href="">特色课程 <i class="fa fa-circle circle" style="color:red; font-size:11px;" ></i></a></li> <li><a href="">菜鸟学堂</a></li> </ul> <div class="userbox"> <a href=""><img src="images/avatar.jpg" alt=""></a> </div> <div class="notice"><a href=""><i class="fa fa-volume-up"></i><i class="fa fa-circle circle" style="color:red; font-size:11px;" ></i></a></div> </div> </body> </html>
*{margin: 0;padding: 0}
.top{width: 100%;height: 60px;background: black;}
.logo{width: 140px;float: left;margin-right: 20px;}
.logo img{width: 140px;height: 60px;}
a{text-decoration:none; color:#D3D3D3;display: block;}
li{list-style: none;}
.nav_left{float: left;}
.nav_left li{float: left;width: 96px;
margin:0 10px 0 10px;line-height: 55px;
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
text-align: center;border-bottom: 5px solid black;}
.nav_left li:hover{
border-bottom: 5px solid #CDCDB4;
}
.circle{position: absolute;top: 15px;}
.notice,.userbox{float:right;height: 60px;color:#D3D3D3;width: 60px;}
.userbox{margin-right: 10px;}
.userbox img{display:block;width: 28px;height: 28px;margin:16px 16px;border-radius:50%;}
.notice{font-size: 20px;line-height: 60px;text-align: center;}=================================
效果图
=================================
头部导航总结如下：
1、动手前先考虑网站布局。一般网站顶部都有logo区、导航条（较多分为左右两个区域，可分别用左右浮动实现）；
2、一般情况，导航条可以直接设置line-height,让文字垂直居中；
3、用：hover设置下边框，实现鼠标移到导航链接时底部出现一个小色条的效果；
4、最好将a链接设置为块