サマリー：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)</title> <link rel="stylesheet" href="2.css&quo
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)</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="">社區(qū)問答</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、動手前先考慮網(wǎng)站布局。一般網(wǎng)站頂部都有l(wèi)ogo區(qū)、導航條（較多分為左右兩個區(qū)域，可分別用左右浮動實現(xiàn)）；
2、一般情況，導航條可以直接設置line-height,讓文字垂直居中；
3、用：hover設置下邊框，實現(xiàn)鼠標移到導航鏈接時底部出現(xiàn)一個小色條的效果；
4、最好將a鏈接設置為塊
添削の先生：滅絕師太添削時間：2019-03-25 09:23:54
先生のまとめ：做的很漂亮!布局和css思路清晰,好習慣繼續(xù)加油!