浅谈前段设计师应该如何做到各司其职

这里说个题外话，其实中文对于这种外来进入的技术，一直以来都是比较麻烦的一个东西吧，对于非英文的国家来说大概都是。所以，世界上总存在那么一堆人，为了某个东西全世界的都能使用，他们就制定了很多规范，撇开这种计算机规范不说，就拿最简单的公斤、厘米、24小时计时等……我们平时常见的一些国际规范来说吧。你觉得除了中国人，有几个知道一尺是几厘米，一个时辰是几个小时?

好了，不多说了，接着。

把原来写在头部的样式文件剪切到css里来，盒子可以删掉啦。like this：

注意保存的时候按照本文第一节中介绍的那样，把样式文件放进专属文件夹。

顿时我们的html文件里就干净了许多有木有?

但是别慌，干净是干净了，样式赶走了，却连个联系方式都没有，要用的时候怎么办呢?

所以要在文件中引用样式：

还有，别忘了图片的路径。相信如果你上面的听懂了，完全手敲路径棒棒哒~

之前我们已经介绍了排版的几个基本步骤，从外到里一层层处理。但是今天排版之前先解释一下童鞋们私下问我的问题，估计其他人也遇到过，如下图：

好像和我们想象的不太一样，虽然把浏览器的窗口缩窄是可以看到正常布局，但是问题不是这么解决哒!

1. 外包

此处的外包，可不是指一个团队的外包。，而是从里到外包盒子。前面我们有讲到浮动这个东西，之所以出现上面这中情况呢，原因肯定是导航栏排完之后，右侧还有足够距离，所以图片那一块窜到上面去了。

我们从外到里已经做好了，现在得在它们的外包盒子了。外包的盒子的宽若刚刚好只放得下导航的内容，图片那一块不就下来了吗?

步骤还是那样啦，只不过从里往外包缺少了填内容那一步。定大小：定跟导航栏一样宽呀，多的留来也没用。定位置，当然是整个浏览器中间啦。可是你以为我会用margin-left来做吗?当然不，如果有个属性可以自动水平居中该多好。当然有：

margin: 0 auto;

遇到margin后面跟两个值各代表什么?不记得?往前翻……auto这个值，就是居中的意思，有了它，你会发现，浏览器窗口怎么放缩，都处在中间，是不是很嗨森?/(^o^)/~

2. 实战

好了，看看俺写好的：

是不是很像了?