慕课网-企业/电商网站综合布局实战笔记

        今天跟着慕课网的视频把两个网站综合布局做了一遍，感觉HTML和CSS写起来明显比之前刷ife2015第一题的时候快多了，但JS用的依然不是特别多，也不是特别熟练，原生JS、Jquery、DOM等各种编写方式在脑子里快成浆糊了，而且感觉很多动画效果是可以用CSS或CSS3解决的，好像并不需要JS啊，可能还是JS学的不够到位吧。两个网站综合布局中第一个企业网站相对简单一点，在线demo见：网站综合演示1，但是发现放到github-pages以后直接引用的优酷网的视频打不开了，不知道什么原因。第二个略复杂，在线demo见：网站布局演示2，自己写了其中几个页面，并把之前小练习中一些功能整合了进去，也算是一个总结。简直太繁琐啦，最大的感觉就是写完代码再重构真的能疯，一点都不想回头看。而且还是没有全局意识，布局的时候总想着按最简单的方式把当前这一页搞定，但有时候这种分区方式并不适合后面几页，就很麻烦，也懒得再完善了。以后写多个网页的时候一定要先看一下整体结构，再考虑布局吧。朋友再见，短期内再也不想写页面布局了，接下来打算刷15和16年的ife把JS部分多熟悉一下，然后继续学一些框架和后端吧。总结一下写这两个过程中遇到的几个小小的问题：

1、其实是老生常谈了，浮动和绝对定位的元素并不能把父盒子撑开，父盒子的高度会是0，所以如果是浮动，要对父盒子清除浮动；如果是绝对定位…额，还是尽量不要绝对定位，这样父盒子就没有存在的意义了。

2、存一些初始化的CSS代码，以后可以直接用。

/*初始化*/
*{margin:0;padding:0;}
body{font-size:12px;}
img{border:none;}
li{list-style:none;}
input,select,textarea{outline:none;border:none; background:none;}
textarea{resize:none;}
a{text-decoration:none; color:#656565;}

/*清除浮动*/
.clearfix:after{content:"";display:block;clear:both;}
.clearfix{zoom:1;}
.fl{float:left;}
.fr{float:right;}

3、get了一个新技能，酷炫的myFocus制作焦点图，步骤如下：

step1：在html标签内引入相关文件

<script type="text/javascript" src="js/myfocus-2.0.0.min.js"></script><!--引入myFocus库-->
<script type="text/javascript" src="js/mf-pattern/slide3D.js"></script><!--引入风格js文件-->
<link href="js/mf-pattern/slide3D.css" type="text/css" /><!--引入风格css文件-->

step2：创建myFocus标准的html结构，并填充内容

<div id="boxID"><!--焦点图盒子-->
  <div class="loading"><img src="img/loading.gif" alt="请稍候..." /></div><!--载入画面(可删除)-->
  <div class="pic"><!--内容列表(li数目可随意增减)，class必须为pic-->
  	<ul>
        <li><a href="#"><img src="img/1.jpg" thumb="" alt="标题1" text="详细描述1" /></a></li>
        <li><a href="#"><img src="img/2.jpg" thumb="" alt="标题2" text="详细描述2" /></a></li>
        <li><a href="#"><img src="img/3.jpg" thumb="" alt="标题3" text="详细描述3" /></a></li>
        <li><a href="#"><img src="img/4.jpg" thumb="" alt="标题4" text="详细描述4" /></a></li>
        <li><a href="#"><img src="img/5.jpg" thumb="" alt="标题5" text="详细描述5" /></a></li>
  	</ul>
  </div>
</div>

step3：在step1代码之后任意位置调用，建议在head标签结束前调用

//你可以简单的调用---只设置它的盒子id，其它参数全部默认设置：
<script type="text/javascript">
myFocus.set({id:'boxID'});
</script>

//或详细一点的参数调用：
<script type="text/javascript">
myFocus.set({
    id:'boxID',//焦点图盒子ID
    pattern:'mF_fancy',//风格应用的名称
    time:3,//切换时间间隔(秒)
    trigger:'click',//触发切换模式:'click'(点击)/'mouseover'(悬停)
    width:450,//设置图片区域宽度(像素)
    height:296,//设置图片区域高度(像素)
    txtHeight:'default'//文字层高度设置(像素),'default'为默认高度，0为隐藏
});
</script>

但是这个方法ie不支持哦，还要做一些特殊的处理。