问答详情
源自：3-9 企业网站制作之信息展示区制作

为什么我的颜色显示不对？还有上一节图片轮播一直没显示，我是按照视频来敲得啊

http://img.mukewang.com/598c15be0001b8ac10270690.jpg

<!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=gb2312" />

<title>无标题文档</title>

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

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

<script src="js/myfocus-2.0.1.min.js" type="text/javascript"></script>

<script src="js/mf-pattern/mF_YSlider.js" type="text/javascript"></script>

<link href="js/mf-pattern/mF_YSlider.css" rel="stylesheet" type="text/css"/>

<script type="text/javascript">

myFocus.set({

id:'picBox'}

)

</script>

</head>


<body>

<div class="top">

<div class="top_content">

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

</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">123-456-7890</span>

</div>

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

<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" class="search_text"/>

</form>

</div>

</div>

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

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

<div class="ad" id="picBox">

<div class="loading"><img src="images/loading.gif" alt="图片加载中"/></div>

<div class="pic">

<ul>

<li><img src="images/ad2.jpg"/></li>

<li><img src="images/ad3.jpg"/></li>

<li><img src="images/ad4.jpg"/></li>

</ul>

</div>

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

<div class="main">

<div class="news"></div><!--news结束-->

<div class="course"></div><!--course结束-->

<div class="sidebar"></div><!--sidebar结束-->

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

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

</body>

</html>



/* CSS Document */


*

{

margin:0;

padding:0;

font-size:12px;

}


body

{

background-color:#F5F5F5;

}


.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;

}


.logo

{

height:80px;

background-color:#FFF

}


.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;

}


.nav_left

{

width:10px;

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

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

background-repeat: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;

}


.nav_mid_left,.nav_mid_right

{

float:left;

}


.nav_mid_left

{

width:680px;

}


.nav_mid_right

{

width:300px;

}


.nav_mid_left li

{

float:left;

list-style-type:none;

width:100px;

text-align:center;

line-height:40px;

}


.nav_mid_left a:link,.nav_mid_left a:visited

{

text-decoration:none;

color:#FFF;

font-size:16px;

font-family:"微软雅黑";

}


.nav_mid_left a:hover,.nav_mid_left a:active

{

text-decoration:none;

color:#FF0;

font-size:16px;

font-family:"微软雅黑";

}


.search_text

{

width:190px;

height:25px;

margin-top:5px;

background:url(../images/search.jpg) no-repeat right center;

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

background-repeat:no-repeat;

background-position:right center;*/

background-color:#FFFFFF;

padding-right:25px;

border:1px solid #FFFFFF;

}


.ad

{

height:310px;

overflow:hidden;

}


.main

{

height:250px;

background-color:#FFF;

margin-top:5px;

}


.news

{

width:340px;

border:1px solid #E8E8E8;

}


.course

{

width:410px;

border:1px solid #E8E8E8;

background-color:#FF6;

margin:0 7px;

}


.sidebar

{

width:230px;

background-color:#09F;

}


.news,.course,.sidebar

{

height:250px;

float:left;

}


提问者：th5t4ft 2017-08-10 16:15

个回答

  • Gemma_Tong
    2017-08-21 17:25:59

    1.你的轮播图没显示是因为你的css代码有一部分注释无效引起。

    }<!--以上头部部分-->

.nav
{
height:40px;
}

    你的注释<!--以上头部部分-->后半部分无效了，结果导致.nav这个样式无效，然后导航栏就没有高度~

    解决办法就是 

    你的注释改成：<!--以上头部部分 -->

    （改动部分是“部分”后面加个空格）

    或者直接删掉这个注释。


    2.颜色显示不了是因为你的css代码news的没有背景色样式

    .news
{
width:340px;
border:1px solid #E8E8E8;
}

    只有宽度和边框，没背景色，所以当然就没显示背景，只显示了最外层main的背景色。

    0
  • 史努比向前进
    2017-08-11 15:38:53

    你可以下载一下老师的那个资源代码，对比一下

    0