myFocus如何调用其他的风格？
李伟鹏
2015-05-14 14:09
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>编程挑战</title>
<link rel="stylesheet" type="text/css" href="css/test2.css">
<script type="text/javascript" src="js/myfocus-2.0.1.min.js" charset="UTF-8"></script>
<script src="js/mf-pattern/mF_slide3D.js" type="text/javascript"></script>
<link href="js/mf-pattern/mF_slide3D.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
myFocus.set({
id:'picBox'
});
</script>
</head>
<body>
<div></div><!--top结束-->
<div>
<div>
<div>
<img src="http://img.mukewang.com/53edadad0001efe202000070.jpg" alt="慕课网Logo">
</div><!--nav_left结束-->
<div>
<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><!--nav_right结束-->
</div><!--nav结束-->
<div id="picBox">
<div><img src="http://img.mukewang.com/53edad8c000175cb00300029.jpg" alt="Loading..."></div>
<div>
<ul>
<li><img src="http://img.mukewang.com/53edad3e0001afad10000318.jpg"></li>
<li><img src="http://img.mukewang.com/53edad2c0001b61310000314.jpg"></li>
<li><img src="http://img.mukewang.com/53edad1600019ae910000310.jpg"></li>
</ul>
</div>
</div><!--ad结束-->
<div>
<div><a href="#">滚动新闻</a> </div>
<div><a href="#">这是滚动新闻</a> </div>
</div><!--scrollnews结束-->
<div>
<ul>
<li>
<img src="http://img.mukewang.com/53edad54000119fb03300130.jpg" alt="玩转Bootstrap">
<a href="#">玩转Bootstrap</a>
</li>
<li>
<img src="http://img.mukewang.com/53edad690001260a03300130.jpg" alt="企业网站实战">
<a href="#">企业网站实战</a>
</li>
<li>
<img src="http://img.mukewang.com/53edad7a0001cde803300130.jpg" alt="JavaScript基础">
<a href="#">JavaScript基础</a>
</li>
</ul>
</div><!--course结束-->
<div>
<div>
<div>
<h2><a href="#">新闻中心</a> </h2>
</div>
<div>
<ul>
<li>
<div><p>8月23日</p></div>
<div>
<h3><a href="#">学习计划之"Android攻城狮初养成"</a></h3>
<p><a href="#">想成为Android攻城狮?想开发一款专属App?没有任何基础的你,应该从何学起?</a></p>
</div>
</li>
<li>
<div><p>8月23日</p></div>
<div>
<h3><a href="#">学习计划之"Android攻城狮初养成"</a></h3>
<p><a href="#">想成为Android攻城狮?想开发一款专属App?没有任何基础的你,应该从何学起?</a></p>
</div>
</li>
<li>
<div><p>8月23日</p></div>
<div>
<h3><a href="#">学习计划之"Android攻城狮初养成"</a></h3>
<p><a href="#">想成为Android攻城狮?想开发一款专属App?没有任何基础的你,应该从何学起?</a></p>
</div>
</li>
</ul>
</div>
</div><!--news结束-->
<div>
<div>
<h2><a href="#">热门活动</a> </h2>
</div>
<div>
<a href="#">
<img src="http://img.mukewang.com/53edacdd0001b8e804820302.jpg" alt="活动">
</a>
<ul>
<li><a href="#">慕课网2048源码征集</a> </li>
<li><a href="#">慕课网2048源码征集</a> </li>
<li><a href="#">慕课网2048源码征集</a> </li>
<li><a href="#">慕课网2048源码征集</a> </li>
<li><a href="#">慕课网2048源码征集</a> </li>
</ul>
</div>
</div><!--activity结束-->
<div>
<div>
<h2><a href="#">联系我们</a> </h2>
</div>
<div>
<p>讲师招募<br>
JoV<br>
电话：10086<br>
QQ:360870202<br>
E-mail:gobananas@163.com<br><br><br>
网站合作<br>
JoV<br>
电话：10086<br>
QQ:360870202<br>
E-mail:gobananas@163.com
</p>
</div>
</div><!--contact结束-->
</div><!--main结束-->
</div><!--wrap结束-->
<div>
<p>Copyright © 2013 imooc.com All Rights Reserved 京ICP备 13046642号-2</p>
</div><!--copyright结束-->
</body>
</html>
/*在此创建CSS样式*/
*{
margin: 0;
padding: 0;
font-size: 12px;
text-decoration: none;
}
body{
background-color: #f5f5f5;
}
.wrap{
width: 1000px;
margin: 0 auto;
}
.nav{
height: 80px;
background: #FFFFFF;
}
.nav_left{
width: 200px;
float: left;
}
.nav_right li{
list-style-type: none;
float: left;
line-height: 80px;
width: 100px;
text-align: center;
}
.nav_right li a{
display: block;
font-size: 16px;
font-family: "微软雅黑";
}
.nav_right a:link,.nav_right a:visited{
color: #000000;
background-color: #FFFFFF;
}
.nav_right a:hover,.nav_right a:active{
color: #FFFFFF;
background-color: #be3948;
}
.ad{
height: 310px;
overflow: hidden;
margin: 5px 0 20px 0;
}
.scrollnews{
height: 30px;
overflow: hidden;
}
.scrollnews_left{
background-color: #be3948;
float: left;
width: 150px;
text-align: center;
}
.scrollnews_left a,.scrollnews_right a{
color: #FFFFFF;
line-height: 30px;
font-size: 15px;
}
.scrollnews_right{
color: #FFFFFF;
background-color: #3E3E3E;
float: left;
line-height: 30px;
width: 850px;
}
.scrollnews_right a{
padding-left: 20px;
}
.course{
height: 150px;
margin: 20px 0 20px 0;
}
.course li{
list-style-type: none;
float: left;
width: 330px;
height: 130px;
margin-right: 5px;
}
.course li.course_right_pic{
margin-right: 0;
}
.course li a{
display: block;
text-align: center;
color: #000000;
font-size: 15px;
font-family: "微软雅黑";
}
.main{
margin-bottom: 20px;
height: 290px;
overflow: hidden;
}
.news{
width: 330px;
margin-right: 5px;
float: left;
}
.title{
height: 35px;
width: 100%;
background-color: #be3948;
}
.title a{
line-height: 35px;
font-size: 14px;
font-weight: normal;
color: #FFFFFF;
padding-left: 20px;
}
.news_list li{
list-style-type: none;
height: 70px;
margin: 10px 0;
}
.news_date{
float: left;
width: 40px;
height: 50px;
margin: 10px 5px;
border-radius: 5px;
background-color: #be3948;
}
.news_date p{
margin: 8px 5px;
font-size: 14px;
line-height: 18px;
color: #FFFFFF;
}
.news_content{
float: left;
width: 260px;
margin-top: 3px;
margin-left: 10px;
}
.news_content h3{
margin-bottom: 10px;
}
.news_content h3 a{
color: #000000;
font-size: 13px;
font-weight: bold;
}
.news_content p a{
line-height: 18px;
font-size: 14px;
color: #515151;
}
.activity{
width: 330px;
margin-right: 5px;
float: left;
}
.activity a img{
width: 290px;
height: 120px;
margin: 10px 20px 5px 20px;
}
.activity li{
list-style-type: none;
margin-left: 20px;
}
.activity li a{
color: #000000;
font-size: 15px;
font-weight: bold;
line-height: 20px;
}
.contact{
width: 330px;
float: left;
}
.contact p{
font-size: 15px;
font-family: "微软雅黑";
}
.copyright{
width: 100%;
height: 40px;
background-color: #e8e8e8;
}
.copyright p{
line-height: 40px;
text-align: center;
color: #000;
font-size: 16px;
font-family: "微软雅黑";
font-weight: bold;
}1回答
-
- 松懈
- 2016-01-30 23:26:50
加载其他焦点图样式的JS文件和CSS文件
企业网站综合布局实战
157078 学习 · 2157 问题
相似问题