前面小优已经跟大家分享了两部分的内容（“路径关系”和“各式文本”），详见《干货！设计师也可以学习的前端知识part1》与《干货！设计师也可以学习的前端知识part2》，今天再给大家讲一部分内容——排版，这也是设计师可以学习的前端知识。
三、排版
又到了激动人心的时刻啦。不过既然前面都讲了要各司其职，所以我们今天排版之前得把样式挪到它该去的地方啦。
在DW中ctrl+N ,新建一个css文件：

则会得到这么一个文件：

UTF-8呢，是一种国际编码。文件保存为非utf-8编码时，可能就会出现乱码。还有其它诸如GB-2312的东西，自己去查查，总之你不要乱动dw自动生成的任何语句就是了。
这里说个题外话，其实中文对于这种外来进入的技术，一直以来都是比较麻烦的一个东西吧，对于非英文的国家来说大概都是。所以，世界上总存在那么一堆人，为了某个东西全世界的都能使用，他们就制定了很多规范，撇开这种计算机规范不说，就拿简单的公斤、厘米、24小时计时等……我们平时常见的一些国际规范来说吧。你觉得除了中国人，有几个知道一尺是几厘米，一个时辰是几个小时？
好了，不多说了，接着。
把原来写在头部的样式文件剪切到css里来，<style></style>盒子可以删掉啦。like this：

注意保存的时候按照本文节中介绍的那样，把样式文件放进专属文件夹。
顿时我们的html文件里就干净了许多有木有？

但是别慌，干净是干净了，样式赶走了，却连个联系方式都没有，要用的时候怎么办呢？
所以要在文件中引用样式：
<link href="css/index.css" type="text/css"  rel="stylesheet">
还有，别忘了图片的路径。相信如果你上面的听懂了，完全手敲路径棒棒哒~
之前我们已经介绍了排版的几个基本步骤，从外到里一层层处理。但是今天排版之前先解释一下童鞋们私下问我的问题，估计其他人也遇到过，如下图：

好像和我们想象的不太一样，虽然把浏览器的窗口缩窄是可以看到正常布局，但是问题不是这么解决哒！
1. 外包
此处的外包，可不是指一个团队的外包。，而是从里到外包盒子。前面我们有讲到浮动这个东西，之所以出现上面这中情况呢，原因肯定是导航栏排完之后，右侧还有足够距离，所以图片那一块窜到上面去了。
我们从外到里已经做好了，现在得在它们的外包盒子了。外包的盒子的宽若刚刚好只放得下导航的内容，图片那一块不就下来了吗？
步骤还是那样啦，只不过从里往外包缺少了填内容那一步。定大小：定跟导航栏一样宽呀，多的留来也没用。定位置，当然是整个浏览器中间啦。可是你以为我会用margin-left来做吗？当然不，如果有个属性可以自动水平居中该多好。当然有：
margin: 0 auto;
遇到margin后面跟两个值各代表什么？不记得？往前翻……auto这个值，就是居中的意思，有了它，你会发现，浏览器窗口怎么放缩，都处在中间，是不是很嗨森？\(^o^)/~
 2. 实战
好了，看看俺写好的：

是不是很像了？
以下是html及样式文件的编码，

看没看到新的东西，不仅外包了content，上面讲换行文本我们使用到了的哟。新添img标签和span标签，span这个标签，用在这种小型的，特殊的短文本是很好用的，其次，有些属性也是新介绍的，比如：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，高也是相应要减掉一些的。
下图是随便网络一搜就能搜到的，但其实在实际使用中，width不仅仅是content里面的宽度，应该是要加上黄色的部分，曾经我有web工程师面试的时候就有这么一道题。或者说把紫色的边也加上，因为这些区域，除了空出来，服务于content，也放不了其他的了。且在没有margin的情况下，别的div要排也是贴着border，so……你懂的……-_-|||

好了，今天到这里，有疑问欢迎留言…

責(zé)任編輯：優(yōu)網(wǎng)科技

版權(quán)所有：http://www.jcoyc.com (優(yōu)網(wǎng)科技) 轉(zhuǎn)載請(qǐng)注明出處