導航欄的制作怎么這樣了??？
.nav{
height:40px;
}
.nav_left{
width:10px;
background:url("images/nav_left.jpg") no-repeat;
height:40px;
float:left;
}
.nav_mid{
width:980px;
background:url("images/nav_bg.jpg") repeat-x;
float:left;
height:40px;
}
.nav_right{
width:10px;
? ? ?background:url("images/nav_right.jpg") no-repeat;
float:left;
? ? height:40px;
}
<div class="nav">
<div class="nav_left"></div>
<div class="nav_mid">
<div class="nav_mid_left">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="list.html">關(guān)于慕課</a></li>
<li><a href="list.html">新聞動態(tài)</a></li>
<li><a href="list.html">課程中心</a></li>
<li><a href="list.html">在線課程</a></li>
<li><a href="list.html">人才招聘</a></li>
</ul>
</div>
<div class="nav_mid_right">
<form action="#" method="post">
<input type="text" />
</form>
</div>
</div> <!--nav_mid結(jié)束-->
<div class="nav_right"></div>
</div><!--nav結(jié)束-->
</div> <!--wrap結(jié)束-->
2016-06-28
<header role="banner">
? <nav role="navigation">
??? <ul>
???? <li id="logo"><img src="http://img1.sycdn.imooc.com//53edadad0001efe202000070.jpg"></li>
??????????????? <li>首頁</li>
??????????????? <li>產(chǎn)品特色</li>
??????????????? <li>解決方案</li>
??????????????? <li>產(chǎn)品價格</li>
??????????????? <li>幫助中心</li>
??????????????? <li>關(guān)于我們</li>
??????????? </ul>
??? </ul>
? </nav>
? <section>
? <div class="welcome">
? </div>
? </section>
</header>
css樣式
??? header{
?? ??? ?width:1000px;
?? ??? ?height:400px;
?? ??? ?margin:0px;
?? ??? ?}
?? ??? ?header nav{
?? ??? ??? ?height:80px;
?? ??? ??? ?padding:0px;
?? ??? ??? ?margin:0px;
?? ??? ??? ?}
?? ??? ??? ?nav ul{
?? ??? ??? ??? ?height:70px;
?? ??? ??? ??? ?padding:0px;
?? ??? ??? ??? ?margin:0px;
?? ??? ??? ??? ?}
?? ??? ??? ?nav ul li{
?? ??? ??? ??? ?width:100px;
?? ??? ??? ??? ?height:60px;
?? ??? ??? ??? ?line-height:60px;
?? ??? ??? ??? ?background:white;
?? ??? ??? ??? ?list-style-type:none;
?? ??? ??? ??? ?margin:0px;
?? ??? ??? ??? ?padding:5px;
?? ??? ??? ??? ?text-align:center;
?? ??? ??? ??? ?float:left;
?? ??? ??? ??? ?}
?? ??? ??? ??? ?ul #logo{
?? ??? ??? ??? ?width:200px;
?? ??? ??? ??? ?height:70px;
?? ??? ??? ??? ?background:none;?? ?
?? ??? ??? ??? ?}
?? ??? ??? ??? ?li:hover{
?? ??? ??? ??? ?background:#C03;?? ?
?? ??? ??? ??? ??? ?}
?? ??? ?.welcome{
?? ??? ??? ? width:100%;
?? ??? ??? ?height:320px;
?? ?????? background:url(http://img1.sycdn.imooc.com//53edad1600019ae910000310.jpg) no-repeat;
?? ??? ??? ?}???
2016-06-28
看不到你的圖片啊