myFocus如何調(diào)用其他的風(fēng)格?
<!DOCTYPE HTML>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>編程挑戰(zhàn)</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結(jié)束-->
<div>
? ? <div>
? ? ? ? <div>
? ? ? ? ? ? <img src="http://img1.sycdn.imooc.com//53edadad0001efe202000070.jpg" alt="慕課網(wǎng)Logo">
? ? ? ? </div><!--nav_left結(jié)束-->
? ? ? ? <div>
? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? <li><a href="#">首頁</a></li>
? ? ? ? ? ? ? ? <li><a href="#">產(chǎn)品特色</a></li>
? ? ? ? ? ? ? ? <li><a href="#">解決方案</a></li>
? ? ? ? ? ? ? ? <li><a href="#">產(chǎn)品價格</a></li>
? ? ? ? ? ? ? ? <li><a href="#">幫助中心</a></li>
? ? ? ? ? ? ? ? <li><a href="#">關(guān)于我們</a></li>
? ? ? ? ? ? </ul>
? ? ? ? </div><!--nav_right結(jié)束-->
? ? </div><!--nav結(jié)束-->
? ? <div id="picBox">
? ? ? ? <div><img src="http://img1.sycdn.imooc.com//53edad8c000175cb00300029.jpg" alt="Loading..."></div>
? ? ? ? <div>
? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? <li><img src="http://img1.sycdn.imooc.com//53edad3e0001afad10000318.jpg"></li>
? ? ? ? ? ? ? ? <li><img src="http://img1.sycdn.imooc.com//53edad2c0001b61310000314.jpg"></li>
? ? ? ? ? ? ? ? <li><img src="http://img1.sycdn.imooc.com//53edad1600019ae910000310.jpg"></li>
? ? ? ? ? ? </ul>
? ? ? ? </div>
? ? </div><!--ad結(jié)束-->
? ? <div>
? ? ? ? <div><a href="#">滾動新聞</a> </div>
? ? ? ? <div><a href="#">這是滾動新聞</a> </div>
? ? </div><!--scrollnews結(jié)束-->
? ? <div>
? ? ? ? <ul>
? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? <img src="http://img1.sycdn.imooc.com//53edad54000119fb03300130.jpg" alt="玩轉(zhuǎn)Bootstrap">
? ? ? ? ? ? ? ? <a href="#">玩轉(zhuǎn)Bootstrap</a>
? ? ? ? ? ? </li>
? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? <img src="http://img1.sycdn.imooc.com//53edad690001260a03300130.jpg" alt="企業(yè)網(wǎng)站實戰(zhàn)">
? ? ? ? ? ? ? ? <a href="#">企業(yè)網(wǎng)站實戰(zhàn)</a>
? ? ? ? ? ? </li>
? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? <img src="http://img1.sycdn.imooc.com//53edad7a0001cde803300130.jpg" alt="JavaScript基礎(chǔ)">
? ? ? ? ? ? ? ? <a href="#">JavaScript基礎(chǔ)</a>
? ? ? ? ? ? </li>
? ? ? ? </ul>
? ? </div><!--course結(jié)束-->
? ? <div>
? ? ? ? <div>
? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? <h2><a href="#">新聞中心</a> </h2>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? ? ? ? ? <div><p>8月23日</p></div>
? ? ? ? ? ? ? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <h3><a href="#">學(xué)習(xí)計劃之"Android攻城獅初養(yǎng)成"</a></h3>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <p><a href="#">想成為Android攻城獅?想開發(fā)一款專屬App?沒有任何基礎(chǔ)的你,應(yīng)該從何學(xué)起?</a></p>
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? ? ? ? ? <div><p>8月23日</p></div>
? ? ? ? ? ? ? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <h3><a href="#">學(xué)習(xí)計劃之"Android攻城獅初養(yǎng)成"</a></h3>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <p><a href="#">想成為Android攻城獅?想開發(fā)一款專屬App?沒有任何基礎(chǔ)的你,應(yīng)該從何學(xué)起?</a></p>
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? ? ? ? ? <div><p>8月23日</p></div>
? ? ? ? ? ? ? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <h3><a href="#">學(xué)習(xí)計劃之"Android攻城獅初養(yǎng)成"</a></h3>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <p><a href="#">想成為Android攻城獅?想開發(fā)一款專屬App?沒有任何基礎(chǔ)的你,應(yīng)該從何學(xué)起?</a></p>
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? </div>
? ? ? ? </div><!--news結(jié)束-->
? ? ? ? <div>
? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? <h2><a href="#">熱門活動</a> </h2>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? <a href="#">
? ? ? ? ? ? ? ? ? ? <img src="http://img1.sycdn.imooc.com//53edacdd0001b8e804820302.jpg" alt="活動">
? ? ? ? ? ? ? ? </a>
? ? ? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? ? ? <li><a href="#">慕課網(wǎng)2048源碼征集</a> </li>
? ? ? ? ? ? ? ? ? ? <li><a href="#">慕課網(wǎng)2048源碼征集</a> </li>
? ? ? ? ? ? ? ? ? ? <li><a href="#">慕課網(wǎng)2048源碼征集</a> </li>
? ? ? ? ? ? ? ? ? ? <li><a href="#">慕課網(wǎng)2048源碼征集</a> </li>
? ? ? ? ? ? ? ? ? ? <li><a href="#">慕課網(wǎng)2048源碼征集</a> </li>
? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? </div>
? ? ? ? </div><!--activity結(jié)束-->
? ? ? ? <div>
? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? <h2><a href="#">聯(lián)系我們</a> </h2>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? <p>講師招募<br>
? ? ? ? ? ? ? ? ? ? JoV<br>
? ? ? ? ? ? ? ? ? ? 電話:10086<br>
? ? ? ? ? ? ? ? ? ? QQ:360870202<br>
? ? ? ? ? ? ? ? ? ? E-mail:gobananas@163.com<br><br><br>
? ? ? ? ? ? ? ? ? ? 網(wǎng)站合作<br>
? ? ? ? ? ? ? ? ? ? JoV<br>
? ? ? ? ? ? ? ? ? ? 電話:10086<br>
? ? ? ? ? ? ? ? ? ? QQ:360870202<br>
? ? ? ? ? ? ? ? ? ? E-mail:gobananas@163.com
? ? ? ? ? ? ? ? </p>
? ? ? ? ? ? </div>
? ? ? ? </div><!--contact結(jié)束-->
? ? </div><!--main結(jié)束-->
</div><!--wrap結(jié)束-->
<div>
? ? <p>Copyright ? 2013 imooc.com All Rights Reserved 京ICP備 13046642號-2</p>
</div><!--copyright結(jié)束-->
</body>
</html>
/*在此創(chuàng)建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; }
2016-01-30
加載其他焦點圖樣式的JS文件和CSS文件