一模一样的代码,我的效果也太诡异了……

来源:3-4 企业网站制作之导航部分制作(一)

ToBeCTO

2014-12-05 14:03

54814a490001509305000107.jpg

始终想不明白哪里出错了……

为什么nav_right会出现在上面???而不是跟他们水平

float属性里面不是已经设置了么……

新手求教啊!!!!

css文件中代码:

.nav_left {

width: 10px;

background: url(../images/nav_left.jpg) no-repeat;

}

.nav_mid{

width:980px;

background:url(../images/nav_bg.jpg) repeat-x;

}

.nav_right{

width:10px;

background:url(../images/nav_right.jpg) no-repeat;

}

.nav_left,.nav_mid,.nav_right{

float:left;

height:40px;

}

index.html中的:

 <div class="nav">

     <div class="nav_left"></div>

     <div class="nav_mid">

       <div class="nav_mid_left"></div>

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


写回答 关注

6回答

  • ThinkSummer
    2015-04-10 08:24:11

    老师为什么不用标准的html5教学?

  • 我不是羊
    2014-12-24 19:41:57

    在头上加上这个就OK<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">


    reup

    加上这一段代码,nav_left的确会和nav_mid,nav_right在一条水平线上,但是左侧一边会多出6个小黑点,这是怎么回事啊?

    2015-01-24 14:14:54

    共 2 条回复 >

  • baibm001
    2014-12-24 17:10:45

    同学你看看你的html 中 连doctype声明都没有,让浏览器如何解析

    ToBeCT...

    我暂时先只是复制了 中间部分的代码,头部分并没有复制过来

    2015-03-29 17:57:48

    共 1 条回复 >

  • 予尔心安
    2014-12-10 11:40:41

    应该是你宽度的问题,不是nav_left出现在上面,而是空间不够了,nav_mid和nav_right跑到下面来了

    ToBeCT...

    真的是什么方法都试过了,就是找不到原因……

    2014-12-10 20:37:14

    共 2 条回复 >

  • ToBeCTO
    2014-12-05 18:22:29

    li暂时不管它的样式,我想问的是 为什么 nav_left 会出现在上面,实在是费解啊!

    ToBeCT... 回复Soully

    我用的IE、360、还有eclipse都用完了…………都是这样的效果,实在是鬼上身的感觉……

    2014-12-10 20:44:25

    共 2 条回复 >

  • Soully
    2014-12-05 17:54:29

    连li的样式的没有了,还说一模一样。你加上li{float:left;}就水平了

    ToBeCT...

    我还没有开始写li的样式,是这样的……我的那个nav_left的那个背景图片只要出现,就会跑到上面去了,不知道是怎么回事,照例说应该是和nav_mid以及nav_right是一个水平的啊

    2014-12-05 18:09:46

    共 1 条回复 >

企业网站综合布局实战

本课程重点介绍HTML/CSS实现常见企业网站布局的方法

157042 学习 · 1984 问题

查看课程

相似问题