在公司前端实习都两周多了，感觉和学校的环境还是差别很大的。在这里，我感觉在学校学的东西都不太适用，什么都要重新来过，一切都从零开始学起。
我的师傅们，人很好，技术也超赞。从他们那儿我着实在一点一点地学到新的知识。
下面是我这两周以来在前端学习上的一个总结。
1、编写网页过程
以前我在拿到一个页面时，总是很急于马上就开始写代码了，总是喜欢从头部到底部的方式一点一点来写，边写边设置样式边切图，这样总觉得写起来速度很慢，效率低，而且做出来的东西也总是会出现一些问题。经过实习的这段时间，我明白其实前端页面的编写也应该按照软件工程中项目开发的mvc框架模式来进行。
在拿到一个页面时，急于开始写代码并不是一个好的习惯，我觉得就像软件工程中最首要的就是需求分析一样，先对整个页面进行了解，分析这个页面主要的具体功能是什么，针对怎样的群体，整个页面的框架是怎样的，由哪几部分组成，需要切哪些图片。这些问题想好之后，再来开始写代码。
而写代码并非有固定的顺序，一般是具体情况而定，但是我觉得整体上比较好的方式是先写html页面，再写css文件，最后完成js部分。写html时，整个页面先不加任何样式，看没有样式的情况下，是否也能让用户体会到如何操作页面。完成html之后，再来向html中添加相应的样式，调整效果，最后再来增加js实现动态效果。
下面是在这段时间内完成的一个页面：
在无样式情况下，用户依然可以使用该网页。
2、模块化
2.1、结构模块化
才开始写网页的时候，我没有注意到网页模块化这个问题，觉得只要做出来的东西达到我想要的效果就行了，殊不知自己的网页结构却很混乱。一个好的结构可以使页面清晰，结构明确，程序员修改起来也容易。网页模块化一般是网页中的各个模块都是呈 “口” 字形的，通过css文件来控制，某类具有高度耦合的页面采用自身css来控制。
在css中，如何达到使页面模块化的效果。一般是先通过class，id命名，布局来确定页面中的模块在哪个位置，具体表现为定位、布局和部分盒模型，
2.2、代码模块化
这个具体的可以参考下列博客内容：http://www.cnblogs.com/joyho/articles/3117223.html
3、css编写小结
3.1、css命名
我在写css样式的时候，以前没发现命名也很讲究的，现在就来总结一下。
一般css命名都采用英文命名，class名称要能反映该模块的功能，最好用英文单词来命名，这样能让编码者一眼便能知道该块是干嘛的，尽量少用拼音来代替单词，如果在一个div里有多个嵌套的子div，那么命名时就要注意用“-”来连接，且一般的子模块名称=它上级模块名称+子模块名称。
例如：如下代码：
<div class="menu">
<div class="menu-tit">这是标题</div>
<div class="menu-cnt">这是内容</div>
</div>
（一般title可缩写为tit，content可缩写为cnt），这样看起来就清晰多了，并能让读者知道每块要表达的含义。
下面是一些网页公共命名，可以参考：
3.2、css中雪碧图的使用
虽然在一些博客上面我看到有说尽量用iconfont代替雪碧图的说法，但是在实习的这段日子里，我发觉还是有很多问题用雪碧图解决的话，会变得很简单。以下是我自己在使用的过程中的一点小体会。如下代码所示：
1 <div class="slogan-share"> 2 <h6 class="fx">分享到：</h6> 3 <a href="#" class="wb"></a> 4 <a href="#" class="xl"></a> 5 <a href="#" class="kj"></a> 6 <a href="#" class="rr"></a> 7 <a href="#" class="db"></a> 8 </div>
其css文件内容为：
.slogan-share{ height:auto; } .slogan-share a{ background: url("img/solo.gif") no-repeat; } .fx{ line-height: 20px; color:#000; font-size: 13px; } .wb,.xl,.kj,.rr,.db{ margin-right:2px; width: 20px; height:20px; display:inline-block; vertical-align: middle; } .slogan-share .wb{ background-position: 0 0; height:20px; } .slogan-share .xl{ background-position: 0 -20px; height:19px; } .slogan-share .kj{ background-position: 0 -40px; height:19px; } .slogan-share .rr{ background-position: 0 -60px; height:18px; } .slogan-share .db{ background-position: 0 -79px; height:19px; }
显示的结果为：
这里，我的solo.gif是一张雪碧图，是将图标纵向排列的，由于这些a标签都是在一个div当中，所以在文档流中它就只占一行的宽度，在使用background-position属性截取图标时，需要为截取的图片设置高度，显示的图片就可能显示出多余的部分或是显示不出来，如下图所示为不设置每个截取的图片的高度，则它的高度就会自动和该层div的高度一致。
同理，如果我的图片是横向排列的，那么也要相应的设置图片的宽度，否则将从开始的位置开始一直截取到雪碧图的末尾。
虽然使用雪碧图主要是为了减少http请求数，增加网页速度，但是也有弊端，它的不足之处是大量使用会造成一旦确实或者图片损坏就会让整个页面多处图像显示受到影响，2，制作和修改相对比较复杂，每次都要确定了设计之后再决定哪些元素是可以放到雪碧图中的，一旦修改就要整个重新定位和修改代码。
4、关于浏览器兼容的一些解决办法
一个页面如果写得不够好，在不同的浏览器中呈现的效果不一样，有的甚至会让人感到惊讶，”为什么在这个浏览器中，我的页面怎么成这个样子了“。以下是我自己在生活中碰到的一些解决兼容的办法（虽然很不全，但是有助于加深自己的印象，以后就一点一点添加上来）:
方法1：
property:value; //一般的浏览器都能识别
+property:value; //使IE7能识别
- property:value; //使IE6能识别
* property:value; //IE6, IE7都能识别
如以下代码：
<!DOCTYPE html> <html> <head> <title></title> <style> body{ *background:red; } </style> </head> <body> </body> </html>
在ie7中能显示出背景颜色，而在ie8/ie9中都不显示：
方法2：
针对页面一些模块一般采用float属性和position属性来进行定位和布局，如以下代码：
<div class="slogan"> <a href="#" class="slogan-buyer">我是买家</a> <a href="#" class="slogan-productor">我是服务商</a> <h2 class="slogan-service">让人民为您服务</h2> </div>
css:
1 .slogan{ 2 width:400px; 3 height:200px; 4 position: relative; 5 top:20px; 6 margin:0 auto; 7 border:1px solid red; 8 } 9 .slogan-buyer,.slogan-productor{ 10 float: left; 11 font-weight:400; 12 font-size: 16px; 13 text-decoration: none; 14 color:#000; 15 } 16 .slogan-service{ 17 float: right; 18 font-family:microsoft yahei; 19 color:#000; 20 font-size:20px; 21 font-weight:100; 22 position: relative; 23 top:20px; 24 }
结果：
方法3：
采用float属性方法使用。
例如以下代码：
<!DOCTYPE html> <html> <head> <title></title>
<style> .main{ width:300px; height:100px; border:1px solid #0b6aaa; float:left; } .main img{float: right; } </style>
</head> <body>
<div class="main"> <img src="img/011.gif"> <img src="img/022.gif"> </div>
</body> </html>
<!DOCTYPE html> <html> <head> <title></title> <style> .main{ width:300px; height:100px; border:1px solid #0b6aaa; float:left; text-align: right; } </style> </head> <body> <div class="main"> <img src="../img/011.gif"> <img src="../img/022.gif"> </div> </body> </html>
在个浏览器中的效果都为：
方法4：
针对背景色的渐变，主要采用以下方法：
<!DOCTYPE html> <html> <head> <title></title> <style> .slide{ width:200px; line-height:50px; color:#fff; text-align: center; background: -webkit-gradient(linear,0 bottom,0 0,from(#fc7c00),to(royalblue));//chrome浏览器; background:-moz-linear-gradient(bottom,#fc7c00,royalblue);//firefox浏览器; background:#fc7c00; FILTER:Alpha(Opacity=100,Finishopacity=0,Style=1,Startx=0,Starty=0,Finishx=0,Finishy=100); } </style> </head> <body> <div class="slide">做前端要有爱</div> </body> </html>
在firefox和chrome下效果如图所示：
在ie下如下图所示：
以上是我自己做东西时碰到的一些可以解决兼容的办法，其他很多方面目前还没用到，以后再来慢慢补上。
5、 关于文档流概念的理解
综合百度百科及其他博客上对文档流的理解，我感觉文档流就像是读书时用的作业纸一样，窗口像作业纸一样被分成了很多行，而且每一行的高度是固定相同的，在每一行中从左到右依次写入的数学公式或文字等就是我们在每行中排列的元素，这个就是文档流。
在所有元素中，有三种元素是脱离文档刘而存在的，分别是浮动、绝对定位、固定定位，但是在ie中浮动也是存在于文档流当中的。
基于文档流，关于以上三个元素的理解就可以如下所示：
- 相对定位,
即相对于元素在文档流中位置进行偏移. 但保留原占位. - 绝对定位,
即完全脱离文档流, 相对于position属性非static值的最近父级元素进行偏移 - 固定定位,
即完全脱离文档流, 相对于视区进行偏移
6、关于切图
我觉得切图是一件体现人思考问题方式的技术活。对于一些将要作为背景的图片，如果是需要重复平铺的，那么可以将原有的图片放大后，找到图片平铺的规律，截取小的子图来作为背景图，而不是直接就是一整张大图作为背景；其次，对于有文字在的图片，要考虑是否需要将文字一起也切入图片中；再次，就是图片的存储格式也需要注意，一般来说png格式的图片损坏程度较小，一些图标，大小比较小的图片用gif格式的比较好。
对于切图，最近在网上看到一个比较快捷的方法，”一键切图“，在ps中导入一个动作，则只需要轻松几步就可以切出很规范的图。具体操作可以参考以下链接：
http://www.cnblogs.com/rangzf/p/3279848.html
最后总结一下，虽然在这段时间我存在的问题很多，但是人总是在一点一点错误中慢慢成长起来的，把犯过的错误在这里记录下来，警醒自己以后不要再犯。要把曾经自己犯过的错当做自己以后的经验。