导航栏的制作怎么这样了啊？
CZP橙橙
2016-06-27 14:53
.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">关于慕课</a></li>
<li><a href="list.html">新闻动态</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结束-->
<div class="nav_right"></div>
</div><!--nav结束-->
</div> <!--wrap结束-->
2回答
-
- 慕粉教授
- 2016-06-28 16:16:49
<header role="banner">
<nav role="navigation">
<ul>
<li id="logo"><img src="http://img.mukewang.com/53edadad0001efe202000070.jpg"></li>
<li>首页</li>
<li>产品特色</li>
<li>解决方案</li>
<li>产品价格</li>
<li>帮助中心</li>
<li>关于我们</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://img.mukewang.com/53edad1600019ae910000310.jpg) no-repeat;
} -
- 夜丶灯火阑珊0
- 2016-06-28 08:47:53
看不到你的图片啊
企业网站综合布局实战
157042 学习 · 1984 问题
相似问题