问答详情
源自：7-1 编程挑战

myFocus如何调用其他的风格？


<!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;
}


提问者：李伟鹏 2015-05-14 14:09

个回答

  • 松懈
    2016-01-30 23:26:50

    加载其他焦点图样式的JS文件和CSS文件

    0