问答详情
源自:3-4 企业网站制作之导航部分制作(一)

设置了Nav的CSS属性但是浏览器网站内容没变化?

http://img.mukewang.com/59127fea000176a013620305.jpg

代码如下:

.nav

{

height:40px;

}


.nav_left

{

width:10px;

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

  /*background-image:url(../images/nav_left.jpg);

background-repeat:no-repeat;*/

float:left;

}


.nav_mid

{

width:980px;

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

float:left;

}


.nav_right

{

width:10px;

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

float:left;

}


提问者:秋名山的豆腐 2017-05-10 10:50

个回答

  • 画心poison
    2017-05-10 11:13:36
    已采纳

    你把html代码贴出来看看,可能是没有引用类

  • 秋名山的豆腐
    2017-05-10 13:52:09

    检查了一中午的代码,终于知道错误在哪里了,写错了一个英语字母,多么痛的领悟!要平铺的图片,nav_bg.jpg写成nav_bd.jpg了......

    .nav_mid

    {

    width:980px;

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

    float:left;

    }


  • 秋名山的豆腐
    2017-05-10 12:52:42

    你好,这是HTML文件代码:

    <!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">

    <head>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

    <title>no title text</title>

    <link href="css/main.css" rel="stylesheet" type="text/css" />

    <script src="js/setHomeSetFav.js" type="text/javascript charset="gb2312"></script>

    </head>


    <body>

    <div class="top">

    <div class="top_content"</div>

    <ul>

    <li><a href="#")">联系我们</a></li>

    <li><a href="#" onclick="AddFavorite(window.location,document.title)">加入收藏</a></li>

    <li><a href="#" onclick="SetHome(window.location)">设为首页</a></li>

    </ul>

    </div><!--top结束-->

    <div class="wrap">

    <div class="logo">

    <div class="logo_left"><img src="images/logo.jpg" alt="慕课网"/></div>

    <div class="logo_right"><img src="images/tel.jpg" alt="服务热线"/>24小时服务热线:<span class="tel">5201314</span></div>

    </div><!--logo结束-->

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

    <div class="nav_right"></div>

    </div><!--nav结束-->

    </div><!--wrap结束-->

    </body>

    </html>


    这是CSS文件代码:

    @charset "utf-8";

    /* CSS Document */


    *

    {

    margin: 0;

    padding: 0;

    font-size: 12px;

    }


    body

    {

    background-color: #F5F5F5;

    }


    /*.wrap

    {

    width: 1000px;

    margin: 0 auto;

    }*/


    .top

    {

    width: 100%;

    height: 27px;

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

    }


    .top_content

    {

    width: 1000px;

    margin: 0 auto;

    }


    .top_content li{

    list-style-image: url(../images/li_bg.gif);

    float: right;

    width: 70px;

    line-height: 27px;

    }


    .top_content a:link,.top_content a:visited{

    color: #8E8E8E;

    text-decoration: none;

    }


    .top_content a: hover,.top_content a:active{

    color: #900;

    text-decoration: none;

    }


    .wrap

    {

    width: 1000px;

    margin: 0 auto;

    clear: both;

    }


    .logo

    {

    height: 80px;

        background-color: #FFF;

    overflow: hidden;

    }


    .logo_left

    {

    width: 200px;

    float: left;

    }


    .logo_right

    {

    width: 300px;

    float: right;

    height: 28px;

    margin-top: 30px;

    color: #8E8E8E;

    }



    .logo_right img

    {

    vertical-align: middle;

    margin-right: 10px;

    }


    .tel

    {

    font-family: "微软雅黑";

    font-size: 16px;

    color: #C00;

    }


    .nav

    {

    height: 40px;

    clear: both;

    }


    .nav_left

    {

    width: 10px;

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

    float:left;

    }


    .nav_mid

    {

    width: 980px;

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

    float:left;

    }


    .nav_right

    {

    width: 10px;

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

    float:left;

    }