Web学习第一个小例子-慕课网企业案例

在慕课网学了将近一个月的前端开发，这两天根据视频，写出了一个小Demo，没有涉及到JS，基本上都是静态布局，也学习了不少布局的知识。
有一个比较炫的焦点图MyFocus插件，记一下用法;
1.MyFocus包下载地址
利用里面的js文件中的样式来设计不同风格的焦点图。
2.MyFocus的使用注意三点：
（1）引入文件：有三个文件需要引入，myfocus库文件和焦点图风格的css和js。

（2）使用格式：

<div class="ad" id="boxID"><!--此处id必须和script中id一致-->
    <div class="pic"><!--ul外必须有一个div包裹层，且class必须为pic-->
       <ul>
          <li><a href="#"><img src="img/ads1.jpg"/></a></li>
          <li><a href="#"><img src="img/ads2.jpg"/></a></li>
          <li><a href="#"><img src="img/ads3.jpg"/></a></li>
       </ul>
    </div>
</div>

（3）script调用myfocus：

<script>
    myFocus.set({
        id:"boxID" //此id和html中最外层id一致，说明是这个div层调用myfocus
    });
</script>

最后来一张效果图：

网址为：https://fahrenheitarron.github.io/MukeDemo/