仿PHP中文网头部导航

abstract：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网</title> <link rel="stylesheet" href="2.css&quo

<!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="">技术文章&nbsp<i class="fa fa-sort-down fa-1g"></i></a></li>
			<li><a href="">编程词典&nbsp<i class="fa fa-sort-down fa-1g"></i></a></li>
			<li><a href="">工具下载&nbsp<i class="fa fa-sort-down fa-1g"></i></a></li>
			<li><a href="">特色课程&nbsp<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;}

=================================

效果图

=================================

QQ截图20190323182858.png

头部导航总结如下：

1、动手前先考虑网站布局。一般网站顶部都有logo区、导航条（较多分为左右两个区域，可分别用左右浮动实现）；

2、一般情况，导航条可以直接设置line-height,让文字垂直居中；

3、用：hover设置下边框，实现鼠标移到导航链接时底部出现一个小色条的效果；

4、最好将a链接设置为块

Correcting teacher：灭绝师太Correction time：2019-03-25 09:23:54
Teacher's summary：做的很漂亮!布局和css思路清晰,好习惯继续加油!

仿PHP中文网头部导航

Popular Entries