轮播图下面的灰色和黑色的那个不显示
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<link href="css.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_fancy.js" type="text/javascript"></script>
<link href="js/mf-pattern/mF_fancy.css" type="text/css" />
<script type="text/javascript">
myFocus.set({
id:'picBox'
})
</script>
</head>
<body>
<div class="header">
<div class="header_m">
<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><!--header结束-->
<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="text" />
</form>
</div>
</div><!--nav_mid结束-->
<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><!--wrap结束-->
</body>
</html>
*{
padding: 0;
margin: 0;
font-size: 12px;
}
body{
background: #F5F5F5;
}
.header{
width: 100%;
height: 27px;
background: url(images/top_bg.jpg) repeat-x;
}
.header_m ul{
width:1000px;
margin: 0 auto;
list-style: none;
}
.header_m li{
list-style-image: url(images/li_bg.gif);
float: right;
width:70px;
line-height: 27px;
}
.header_m a:link,.header_m a:visited{
color: #8E8E8E;
text-decoration: none;
}
.header_m li a:hover,.header_m li a:active{
color:red;
text-decoration: none;
}
.wrap{
width: 1000px;
margin: 0 auto;
}
.logo{
height: 80px;
background: #fff;
}
.logo_left{
width: 300px;
float: left;
}
.logo_right{
width:270px;
height:28px;
margin-top: 20px;
float: right;
color:#8E8E8E;
}
.logo_right img{
margin-right: 10px;
vertical-align: middle;
}
.tel{
color:#FF0000;
font-family: "微软雅黑";
font-size: 20px;
}
.nav{
height: 40px;
float: left;
}
.nav_left{
width: 10px;
background: url(images/nav_left.jpg) no-repeat;
float: left;
height: 40px;
}
.nav_mid{
width: 980px;
background: url(images/nav_bg.jpg) repeat-x;
float:left;
}
.nav_right{
width:10px;
background: url(images/nav_right.jpg) no-repeat;
float:left;
height: 40px;
}
.nav_mid_left{
width: 680px;
height: 40px;
float: left;
}
.nav_mid_right{
width: 300px;
height: 40px;
float: right;
}
.nav_mid_left li{
list-style: none;
float: left;
width: 100px;
line-height: 40px;
text-align: center;
}
.nav_mid_left a:link,.nav_mid_left a:visited{
color:#fff;
text-decoration: none;
}
.nav_mid_left a:hover,.nav_mid_left a:active{
color:yellow;
text-decoration: none;
}
.nav_mid_right .text{
width: 180px;
height: 25px;
margin-top: 6px;
background: url(images/search.jpg) no-repeat right center;
background-color: #fff;
padding-right: 25px;
border: 1px solid #fff;
}
.ad{
height: 310px;
/*height: 1000px;
margin: 0 auto;*/
clear: both;
overflow: hidden;
}
*{
padding: 0;
margin: 0;
font-size: 12px;
}
body{
background: #F5F5F5;
}
.header{
width: 100%;
height: 27px;
background: url(images/top_bg.jpg) repeat-x;
}
.header_m ul{
width:1000px;
margin: 0 auto;
list-style: none;
}
.header_m li{
list-style-image: url(images/li_bg.gif);
float: right;
width:70px;
line-height: 27px;
}
.header_m a:link,.header_m a:visited{
color: #8E8E8E;
text-decoration: none;
}
.header_m li a:hover,.header_m li a:active{
color:red;
text-decoration: none;
}
.wrap{
width: 1000px;
margin: 0 auto;
}
.logo{
height: 80px;
background: #fff;
}
.logo_left{
width: 300px;
float: left;
}
.logo_right{
width:270px;
height:28px;
margin-top: 20px;
float: right;
color:#8E8E8E;
}
.logo_right img{
margin-right: 10px;
vertical-align: middle;
}
.tel{
color:#FF0000;
font-family: "微软雅黑";
font-size: 20px;
}
.nav{
height: 40px;
float: left;
}
.nav_left{
width: 10px;
background: url(images/nav_left.jpg) no-repeat;
float: left;
height: 40px;
}
.nav_mid{
width: 980px;
background: url(images/nav_bg.jpg) repeat-x;
float:left;
}
.nav_right{
width:10px;
background: url(images/nav_right.jpg) no-repeat;
float:left;
height: 40px;
}
.nav_mid_left{
width: 680px;
height: 40px;
float: left;
}
.nav_mid_right{
width: 300px;
height: 40px;
float: right;
}
.nav_mid_left li{
list-style: none;
float: left;
width: 100px;
line-height: 40px;
text-align: center;
}
.nav_mid_left a:link,.nav_mid_left a:visited{
color:#fff;
text-decoration: none;
}
.nav_mid_left a:hover,.nav_mid_left a:active{
color:yellow;
text-decoration: none;
}
.nav_mid_right .text{
width: 180px;
height: 25px;
margin-top: 6px;
background: url(images/search.jpg) no-repeat right center;
background-color: #fff;
padding-right: 25px;
border: 1px solid #fff;
}
.ad{
height: 310px;
/*height: 1000px;
margin: 0 auto;*/
clear: both;
overflow: hidden;
}
个回答
-
- qq_竹心_2
- 2018-08-07 21:31:09
引入css的时候缺少rel