零基础也能看懂！写给设计师的前端小知识之各司其职

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

　　好了，不多说了，接着。

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

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

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

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

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

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

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

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

　　1. 外包

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

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

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

　　margin: 0 auto;

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

　　2. 实战

　　好了，看看俺写好的：

　　是不是很像了?

　　以下是html及样式文件的编码，

　　看没看到新的东西，不仅外包了content，上面讲换行文本我们使用到了的哟。新添img标签和span标签，span这个标签，用在这种小型的，特殊的短文本是很好用的，详询：http://www.w3school.com.cn/tags/tag_span.asp 。

　　其次，有些属性也是新介绍的，比如：border(描边使用),值什么意思看下图，是不是很亲切?除开solid这个值，当然还有其他值，乃们慢慢去试试。

　　再看看图中：

　　红色标示的部分，其实是可以复用黑色模块的东西的，只要稍作标题的颜色和大小调整即可。还有下面文前带点的文本，这样类似列表形式的文本，ul li标签是可以直接做到的，可以自己当做作业来做，下期就把上图中的东西全部排完了。

　　TIPS：排版中，我们多次为了让内容对齐，使用了margin-left：24px;即文本与黑框左边的距离。实际使用中，文本通常与装它的有色框是有一定距离的，为了美观，绝不会贴边出现：

　　但是每一句都加左边距，倒不如直接在black加内边距，单独每一句捏，就不需要加了:

　　.black{ width:356px; height:160px; background-color:#000000; opacity:0.6; margin-top:408px;padding-left:24px;}

　　注意了，这里有很重要的一点是：padding所加的左内边距是算在整个盒子宽内的，所以，width由原来的380px变为了356px。同样要是顶部加了padding-top，高也是相应要减掉一些的。

（编辑：源码网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!