没有轮播效果，请问是哪里错了
来源：3-8 企业网站制作之焦点图制作
hangerror
2016-12-13 20:04
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>企业网站实践</title>
<link rel="stylesheet" type="text/css" href="css/mukewangcss.css">
<script type="text/javascript" scr="js/setHomeSetFav.js"></script>
<script type="text/javascript" scr="js/myfocus-2.0.1.min.js"></script>
<script type="text/javascript" scr="js/mf-pattern/mF_YSlider.js"></script>
<link rel="stylesheet" type="text/css" href="js/mf-pattern/mF_YSlider.css">
<script type="text/javascript">
myFocus.set({
id:'adBox'
});
</script>
</head>
<body>
<div id="top">
<div id="top_content">
<ul>
<li><a href="javascript:;">联系我们</a></li>
<li><a href="javascript:;" onclick="AddFavorite(window.location, document.title)">加入收藏</a></li>
<li><a href="javascript:;" onclick="SetHome(window.location)">设为首页</a></li>
</ul>
</div>
</div><!--#top结束-->
<div id="wrap">
<div id="logo">
<div id="logo_left">
<img src="images/logo.jpg" alt="慕课网">
</div>
<div id="logo_right">
<img src="images/tel.jpg" alt="服务热线">24小时服务热线：<span>123-456-7890</span>
</div>
</div><!--#logo结束-->
<div id="nav">
<div id="nav_left">
<ul>
<li><a href="javascript:;">首页</a></li>
<li><a href="javascript:;">关于慕课</a></li>
<li><a href="javascript:;">新闻动态</a></li>
<li><a href="javascript:;">课程中心</a></li>
<li><a href="javascript:;">在线课程</a></li>
<li><a href="javascript:;">人才招聘</a></li>
</ul>
</div><!--#nav_left结束-->
<div id="nav_right">
<form method="POST" action="">
<input type="text"/>
<button><img src="images/search.jpg"></button>
</form>
</div><!--#nav_right结束-->
</div><!--#nav结束-->
<div id="adBox">
<div>
<ul>
<li><img src="images/add2.jpg"></li>
<li><img src="images/add3.jpg"></li>
<li><img src="images/add4.jpg"></li>
</ul>
</div>
</div>
</div><!--#wrap结束-->
</body>
</html>@charset"UTF-8";
*{
margin: 0;
padding: 0;
}
body{
background-color: #f5f5f5;
font-size: 12px;
}
#top{
height: 27px;
background-image:url(../images/top_bg.jpg) repeat-x;
}
#top_content{
width: 1000px;
height: 27px;
line-height: 27px;
margin: 0 auto;
}
#top_content li{
list-style-image:url(../images/li_bg.gif);
margin-right: 20px;
float: right;
}
#top_content a:link,
#top_content a:visited{
color: #8e8e8e;
text-decoration: none;
}
#top_content a:hover,
#top_content a:active{
color: #900;
}
#wrap{
width: 1000px;
margin: 0 auto;
}
#logo{
height: 80px;
background-color: #fff;
}
#logo_left{
width: 200px;
float: left;
}
#logo_right{
width: 300px;
height: 30px;
float: right;
margin-top: 28px;
color: #8e8e8e;
}
#logo_right img{
vertical-align: middle;
margin-right: 10px;
}
#logo_right span{
font-family: "微软雅黑";
font-size:16px;
color: #c00;
}
#nav{
height: 40px;
background: #786E64;
border-radius: 10px;
position: relative;
}
#nav_left{
position: absolute;
left: 10px;
width: 680px;
height: 40px;
}
#nav_right{
position: absolute;
right: 10px;
width: 300px;
}
#nav_left li{
float: left;
list-style: none;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
}
#nav_left a:link,
#nav_left a:visited{
text-decoration: none;
color: #fff;
font-family: "微软雅黑";
font-size: 16px;
}
#nav_left a:hover,
#nav_left a:active{
color: #ff0;
}
#nav_right .search{
display: inline-block;
background: #fff;
margin-top: 7px;
}
#nav_right .search_text{
width: 165px;
height: 25px;
line-height: 25px;
outline: none;
border: none;
float: left;
}
#nav_right .search_button{
width: 25px;
height: 21px;
border: none;
float: left;
}
#adBox{
height: 310px;
width: 1000px;
overflow: hidden;
}
写回答
关注
2回答
-
- 牛奶小王子
- 2016-12-13 23:00:28
问题出在代码56-63行中，
1、焦点图初始化的ID与图片列表最外层的ID要一致。
2、图片列表外面包裹着class为pic的div，class名必须为pic。class名必须为pic。class名必须为pic
详细情况请会看视频！！
-
- 问道_imooc
- 2016-12-21 19:59:18
该课程中，慕课网首页案例，把html4改为html5（就是文档声明修改了），为什么修改后布局就出错呢？
企业网站综合布局实战
本课程重点介绍HTML/CSS实现常见企业网站布局的方法
157038 学习 · 2134 问题
相似问题