abstract：<!DOCTYPE html /><html><head> <meta charset="utf-8" /> <title>仿IT之家導(dǎo)航欄</title> <style type="text/css"> *{ m
<!DOCTYPE html />
<html>
<head>
<meta charset="utf-8" />
<title>仿IT之家導(dǎo)航欄</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.header{
width:100%;
height:35px;
background-color:#D22222;
}
.header_content{
width:1100px;
height:35px;
margin:auto;
padding:0px;
line-height:35px;
}
.header_left{
width:300px;
height:35px;
float:left;
}
.header_right{
width:600px;
height:35px;
float:right;
}
.header_right a{float:right;}
.header_a{
display:inline-block;
margin:0px;
padding:0px 20px;
text-align:center;
color:#fff;
font-size:14px;
}
.header_a:hover{
background-color:#ffffff;
color:#B61616;
}
.header_a1{
display:inline-block;
margin:0px;
padding:0px 20px;
text-align:center;
color:#fff;
font-size:14px;
background-color:#B61616;
position:relative;
}
.header_a1:before{content:url(images/za.png);}
.header_a1:after{content:url(images/down.png);}
.header_a1:hover{
background-color:#fff;
color:#B61616;
}
.header_a1:hover:before{content:url(images/zb.png)}
.header_a1:hover:after{content:url(images/up.png);}
.header_a2{
display:inline-block;
margin:0px;
padding:0px 20px;
text-align:center;
color:#fff;
font-size:14px;
position:relative;
}
.header_a2:after{content:url(images/down.png);}
.header_a2:hover{
background-color:#ffffff;
color:#B61616;
}
.header_a2:hover:after{content:url(images/up.png);}
.header_a3{
display:inline-block;
margin:0px;
padding:0px 20px;
text-align:center;
color:#ffffff;
font-size:14px;
background-color:#136FB8;
position:relative;
}
.header_a3:after{content:url(images/down.png);}
.header_a3:hover{
}
.header_a3:hover:after{content:url(images/up2.png);}
.header_a1 table{
white-space: nowrap;
border:1px solid #ccc;
border-top-color:#fff;
font-size:14px;
background-color:#fff;
display:none;
}
.header_a1 td{
margin:0px;
padding:10px 20px;
}
.header_a1 td:hover{color:#B61616;}
.header_a1:hover table{display:block;position:absolute;left:0px;}
.header_a2 table{
white-space: nowrap;
border:1px solid #ccc;
border-top-color:#fff;
font-size:14px;
background-color:#fff;
display:none;
}
.header_a2 td{
margin:0px;
padding:10px 20px;
}
.header_a2 td:hover{color:#B61616;}
.header_a2:hover table{display:block;position:absolute;left:0px;}
.header_a2 ul{
white-space: nowrap;
border:1px solid #ccc;
border-top-color:#fff;
font-size:14px;
background-color:#fff;
text-align:left;
display:none;
list-style:none;
color:#000;
}
.header_a2 li{
margin:0px;
padding:0px 20px;
}
.header_a2 li:hover{color:#B61616;}
.header_a2:hover ul{display:block;position:absolute;left:0px;}
.header_a3 ul{
white-space: nowrap;
border:1px solid #ccc;
border-top-color:#fff;
font-size:14px;
background-color:#136FB8;
text-align:left;
display:none;
list-style:none;
color:#fff;
}
.header_a3 li{
margin:0px;
padding:0px 20px;
}
.header_a3 li:hover{background-color:#105E9D;}
.header_a3:hover ul{display:block;position:absolute;left:0px;}
</style>
</head>
<body>
<div class="header">
<div class="header_content">
<div class="header_left">
<a span class="header_a1">
<span>  IT之家   </span>
<table>
<tr>
<td style="color:#B61616;">資訊</td>
<td colspan="2">IT資訊</td>
</tr>
<tr>
<td style="color:#B61616;">極客</td>
<td>玩手機(jī)</td>
<td>安卓之家</td>
</tr>
<tr>
<td colspan="3" style="text-align:center;">全部分類>></td>
</tr>
</table>
</a>
<a class="header_a">辣品</a>
<a class="header_a2">
IT圈 
<table>
<tr>
<td>科技暢談</td>
<td>極客圈</td>
</tr>
<tr>
<td>安卓圈</td>
<td>ios圈</td>
</tr>
</table>
</a>
</div>
<div class="header_right">
<a style="margin-right:20px;padding:0px;color:#fff;">登錄</a>
<a style="margin-left:20px;padding:0px 5px;color:#fff;">注冊(cè)</a>
<a class="header_a3">
軟媒應(yīng)用 
<ul>
<li>軟媒APP應(yīng)用</li>
<li>旗魚(yú)瀏覽器</li>
<li>軟媒魔方</li>
<li>軟媒時(shí)間</li>
<li>酷點(diǎn)桌面</li>
</ul>
</a>
<a class="header_a2">
訂閱 
<ul>
<li>RSS訂閱</li>
<li>收藏IT之家</li>
</ul>
</a>
<a class="header_a">投稿</a>
</div>
</div>
</div>
</body>
</html>
Correcting teacher：查無(wú)此人Correction time：2019-02-21 09:03:59
Teacher's summary：完成的不錯(cuò)，下次把代碼縮進(jìn)，看著整齊些。繼續(xù)加油。