前端实习一周

　　在四月底的时候找了一家小电商的前端实习工作，总算能亲身体验一下前端的工作到底是怎么回事，刚好写一些初步感受。

　　实习工作的主要内容是使用Html/CSS制作页面，这基本上就是从一入职就开始在做的事，工作内容主要是跟网页设计和网站运营打交道。在实习之前本以为网站的页面这块是由前端主导的，但实际上却不是这样，前端虽然有个"前“字，但在实际工作过程中却似乎是担当着后期制作的角色，因为一个网站的页面主要是由网页设计师设计的，设计师会将设计好的网页原型（就是一张PS图片）交给前端，前端的工作就是将这张图用HTML\CSS“翻译”成网页，一方面要让网页依照设计师的设计来展现，另一方面也要为网页增加一些动态的内容。当然，前端的工作内容或许跟公司的组织也有关系，不是每个公司的前端所做的工作都是一样的。因为对页面制作这块还不是很熟悉，所以现在主要还是在做静态网页，动态网页这块还没接触到。

　　单纯就做网页来说只要懂一点Html/CSS的人都是能做的，只要按着设计师的稿子来依葫芦画瓢基本上就可以了。可就算是这么简单的一件事，一旦数量到达了一定程度，做起来也是件麻烦的事。一两张网页好做，那要是有十几张网页在限定时间内需要做完该怎么办？难道每张网页都得从零开始？如何简化自己的工作提升效率就变成了一个很重要的内容。

　　设计师的需求主要有两方面，一是为网站制作新的页面，二是对网站之前的页面做修改。修改网页的需求很常见，也很琐碎，如果前端一开始制作的页面灵活性不够，那么后期遇到修改的需求时就很难处理了，或许只需改一两张图片或部分字就要对网页结构进行大改，费时费力。那怎样的网页才叫有灵活性？至少是对于需要经常更改的部分可以方便改动，而且保证不影响页面的其他元素及整体呈现效果。但要达到这一目的也并不是那么容易，首先，作为前端基本上都是根据设计师提供的稿件制作网页，并没有参与网页设计的过程，那网页的哪些部分是需要经常改动的前端要如何知晓？其次，如何设计网页的结构才能使其具备足够的灵活性？对于前一个问题，或许前端应该要参与到网页设计的过程之中，并不是说要进行决策，但需要了解整个设计的过程，大致把握网页的设计思想以及设计的重点，如果前端能够比较熟悉网页设计的过程，那么在制作页面的时候就能够对网页的整体有一个把握，能够抓住重点，也能够预见到改动需求可能比较大的部分；而对于后一个问题，自然就需要前端自己的不断学习与积累经验了，不过我也是刚接触这份工作，加上不是科班出生，具体该如何去做也还没有很系统的想法，不过感觉到模块化对很多工作来说都是很重要的，通过增加灵活性来提高工作效率，让自己能把时间更多的用于思考，而不是重复的做琐碎的工作。不知道比较好的互联网公司前端跟设计是如何进行合作的，但就我现在所在的公司让前端跟设计工作过程完全分离的模式好像是存在问题的。

　　以上是关于工作内容部分的感受，在日后的一段时间里，主要的工作内容应该还是页面的制作，要找到办法提高自己的工作效率，不能让自己淹没在重复的工作之中。虽然很想做web开发方面的工作（比如割绳子，能做出这样的游戏实在太酷了！），但电子商务这块商品展示是比较核心的部分，加上现在的公司前端人实在也太少了一点——全职的前端才一个人···光页面这块就无穷无尽，估计短期内不会在用户互动方面下什么功夫，只能自己在工作之外抽出时间先把Javascript学起来。

　　下面就再总结一下工作时遇到具体细节的问题做一点整理。

　　1.实习时自己所制作的第一个页面是发送到用户邮箱里的简单的邮件页面。但是在看到页面Html源码发现很奇怪的是，邮件页面并没有使用CSS统一管理页面样式，而是直接在HTML的各个标签中设定样式，一般并不提倡这样的做法，但后来了解到，之所以这样做主要是因为有一些邮件服务器无法识别CSS文件，需要通过这样的方式确保用户能够看到正常的页面。

　　2.由于各个浏览器对于容器的边距有不同的默认值，为了保证网页的兼容性，需要对网页格式进行初始化，即将默认的内外边距设置为0.

　　　　*{margin:0;padding:0;}——*表示所有元素

　　3.图片的垂直居上

　　　　在制作页面会发现，一些图片会出现与上方元素之间出现一定默认间隔，如果不希望出现这种情况就需要对图片元素<img>属性进行设定。

　　　　使用vertical-align 属性设置元素的垂直对齐方式，这一属性用于定义行内元素的基线相对于该元素所在行的基线的垂直对齐，默认值为baseline——出现空隙的原因，即元素放在父元素的基线上，如果将其设定为top，就可以把元素的顶端与行中最高元素的顶端对齐，这样就可以使图片顶端不会出现空隙——对其他元素来说也是同样。

　　4.页面居中的问题

　　　　一般来说要让页面居中，设定{margin:0 auto}——0：上下边距为0，auto:左右居中——即可。但这一设定好像有的浏览器读得懂，而有的浏览器读不懂，这就出现了浏览器兼容性的问题。造成这样问题的原因在于，有的浏览器对于页面宽度是有一个默认值的，因此只要设定margin：auto就能够自动调整边距位置。但是有一些浏览器，对页面并没有一个默认的宽度，那么在没有宽度的情况下设定左右居中就无法实现了——因为找不到"中”在哪里。这一解释并不一定正确，我暂时是这样理解的。或许有的浏览器压根就没有auto这种方法，对于这种情况网上也有一种解决方法：

　　　　{width:950px; position:relative; left:50%; margin-left:-475px;}

　　　　width:950px，通过width设定元素内容区的宽度；

　　　　position:relative; left:50%，设置元素内容左边缘位置——这个50%是相对于其父元素来说的，就是内容的最左边移到了中间

How it work?

　　　　margin-left:-475px，将元素左移，使其居中——偏移量为元素宽度的一半。

How it work?

　　　　

　　

转载于:https://www.cnblogs.com/liangchao/articles/2485918.html