问答详情
源自：3-4 企业网站制作之导航部分制作（一）

导航栏的制作怎么这样了啊？

http://img.mukewang.com/5770cca60001f79401200120.jpg

.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结束-->


提问者：CZP橙橙 2016-06-27 14:53

个回答

  • 慕粉教授
    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
  • 夜丶灯火阑珊0
    2016-06-28 08:47:53

    看不到你的图片啊

    0