loading图竟然跑到了头顶还有图片都显示不出来了
qq_Justcomplete_04021004
2017-08-21 10:12
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>website-top</title>
<script src="http://localhost:63342/untitled/myfocus-2.0.1.min.js" type="text/javascript"></script>
<script src="http://localhost:63342/untitled/mf-pattern/mF_YSlider.js" type="text/javascript"></script>
<link href="http://localhost:63342/untitled/mf-pattern/mF_YSlider.css" rel="stylesheet" type="text/css"/>
<style>
*{margin: 0px;
padding: 0px;
font-size: 12px;
}
body{
background-color: #f5f5f5;
}
.top{
width: 100%;
height: 27px;
border: 1px solid #ccbdb8;
}
.top-con{
width: 1000px;
margin: 0 auto;
}
.top-con li{
width: 70px;
line-height: 27px;
float: right;
text-decoration: none;
}
.top-con li a{
text-decoration: none;
}
.top-con li a:hover{
color:red;
}
.top-con li a:link,a:visited{
color: rgba(0, 0, 0, 0.56);
text-decoration: none;
}
.wrap{
width: 1000px;
margin: 0 auto;
}
.logo{
height:80px;
background-color: white;
}
.logo_left{
width: 200px;
float:left;
}
.logo_right{
height: 28px;
width: 300px;
float:right;
margin-top: 30px;
color:#8e8e8e ;
}
.logo_right img{
vertical-align:middle;
marin-right:20px
}
.tel{
font-family:"微软雅黑" ;
font-size: 16px;
color:#c00;
}
.nav{
height: 40px;
background-color: darkslategrey;
}
.nav_left{
width:10px;
float: left;
height: 40px;
}
.nav_middle{
width: 980px;
float: left;
}
.nav_middle_left{
width:680px;
}
.nav_middle_right{
width: 300px;
}
.nav_right{
width:10px;
float:left;
height: 40px;
}
.nav_middle_right,.nav_middle_left{
float:left;
}
.nav_middle_left li{
float:left;
text-decoration: none;
width: 100px;
text-align: center;
line-height: 40px;
list-style-type: none;
}
.nav_middle_left a:link,a:visited{
text-decoration: none;
color:#fff;
font-size: 16px;
font-family: "微软雅黑";
}
.nav_middle_left a:hover,a:active{
text-decoration: none;
color:#ff0;
font-size: 16px;
font-family: "微软雅黑";
}
.search_text{
margin-top: 5px;
width:190px;
height: 25px;
background: url("search.jpg") no-repeat right
center;
background-size:20px 20px ;
background-color:white;
padding-right:25px ;
border:1px solid #fff;
}
.ad{
height: 300px;
}
.pic li{
width: 1000px;
height: 300px;
}
.pic li img{
width: 1000px;
height: 300px;
}
</style>
<script type="text/javascript">
myFocus.set({
id:'picbox'
})
</script>
</head>
<body>
<img src="loading.gif" height="95" width="156"/>
<div class="top">
<div class="top-con">
<ul> <li>
<a href="#">联系我们</a>
</li>
<li>
<a href="#">产品介绍</a>
</li>
<li>
<a href="#"> 设为主页</a>
</li>
</ul>
</div>
</div>
<div class="wrap">
<div class="logo">
<div class="logo_left">
<img src="logo.jpg" alt="慕课网">
</div>
<div class="logo_right">
<img src="ph.jpg" alt="服务热线">24小时服务热线 <span class="tel">123-456-7890</span>
</div>
</div>
<div class="nav">
<div class="nav_left">
</div>
<div class="nav_middle">
<div class="nav_middle_left">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于慕课网</a></li>
<li><a href="#">新闻动态</a></li>
<li><a href="#">课程中心</a></li>
<li><a href="#">在线课程</a></li>
<li><a href="#">人才招聘</a></li>
</ul>
</div>
<div class="nav_middle_right">
<form action="" method="post">
<input type="text" class="search_text"/>
</form>
</div>
</div>
<div class="nav_right">
</div>
</div>
<div class="ad" id="picbox">
<div class="ppp"><img src="loading.gif" alt="图片加载中"/></div>
<div class="pic">
<ul>
<li>
<img src="1a.jpg"/>
</li>
<li>
<img src="2a.jpg"/>
</li>
<li>
<img src="3a.jpg"/>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
2回答
-
- Gemma_Tong
- 2017-08-24 07:05:20
http://demo.jb51.net/js/myfocus/tutorials.html
Step 2. 创建myFocus标准的html结构，并填充你的内容
<div class="loading"><img src="img/loading.gif" alt="请稍候..." /></div><!--载入画面(可删除)-->
******************************
这个插件规定了那个是必须这么命名的~class="loading"
-
- moonrisk
- 2017-08-21 20:10:31
<div class="ppp"><img src="loading.gif" alt="图片加载中"/></div>
class="ppp"把这个改成 class="loading" 还要注意这个div大小
企业网站综合布局实战
157078 学习 · 2157 问题
相似问题