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

Sunny萧萧：本文作为小白入门级，相对基础，是写给现在想了解一点前端知识的设计师同行们，今天这章用设计师熟悉的PS来解释前端相关的术语，通俗易懂幽默风趣，绝对是小白入门的好教程！

往期回顾：

立即学习“前端免费学习笔记（深入）”；

1. 《零基础也能看懂！写给设计师的前端小知识之小白入门篇（一）》
2. 《零基础也能看懂！写给设计师的前端小知识之征服霸道DIV篇（二）》
3. 《零基础也能看懂！写给设计师的前端小知识之网页排版（附实战）》
4. 《零基础也能看懂！写给设计师的前端小知识之排版三步走起来》

今天要讲三个东西：

1. 文件路径关系
2. 各式文本
3. 继续排版

看不懂的童鞋，不要偷懒，去把前面的补一下。

一、路径关系——各司其职

上一节中，要调用图片的时候用了这么一句：

background:url(imges/01.jpg);

图片、链接地址、样式文件、js文件……等都是经常需要外界支持的东西，浏览器通过html标签内的各式url地址去一一找到然后呈现出来，一旦地址错误，比如找不到样式文件或者图片，那网页所呈现出来的就不知道神马鬼了。所以，虽然大多数文件都可以浏览选择并不需要手动去敲，但是了解个中关系，对处理问题也是有一定好处的。

如下图，一个相对较完整的文件夹是酱紫的，包含主页index和所需的样式文件、images、js等，哪怕样式文件就一个都要单独建立一个文件夹，html文件一般放在其他文件的上层，但是html文件很多，或者分模块的情况下也是需要建文件夹哒。看个人喜好啦……

index.html中要是需要引用images下的图片01，地址为：images/01.jpg。

正常情况下，当然不是所有东西都在一个页面上处理啦，不仅样式要单独放在一个.css文件中，所有图片也是要单独放个文件夹的。

不同层级间要引用其他地方的文件时路径该怎么写呢？下面举几类的例子。

1）同级

以index.html为参考点，若再增加一张图片（此处为举例添加的02.jpg文件） ,要引用与自己同等级文件，不用写别的了，直接文件名就OK了。例：url（02.jpg）;

2）下级

同样，以index.html为参考点，它要引用比他低一级的01.jpg，首先，01往上找，是它所属的images文件夹，这个文件夹刚好与参考点同一级，即与01之间只跨一级，则使用一个斜杠“/”,（向下两级则是两个斜杠哦）index想要引用images下的文件，首先得经过images的同意，所以路径还要带上它的“签名”，最后得来路径则是：url（images/01.jpg）；

3）上级

以index.css 为参考点,想引用02.jpg ,首先还是得往上看，参考点属于css文件夹，而02.jpg跟他爹“同辈”，但是不能直呼其名啊，所以用两点“..”来代替，其实这两点也可以是总文件夹的代替名，因为对index.css来说并无多大意义。

好了，找到规律了没？如果index.css要找index.js文件该怎么找捏？这个，留给大家思考一下，嘿嘿……（提示一下，先往上找，再往下找）

二、各式文本

html中，除了展示图，就是文了，现在来介绍一下几种文本形式：

1. 短文本

如上图蓝色标示的几处，这些文本一般一行足以，无换行，常用标题，名字等。它们的宽高可设可不设，但是保险起见是要用盒子装着的，常用

2. 换行长文本

如上图紫色标示的地方，这种文本一般用在正文。排文字版的时候我们当然不愿意多余的文字就那么直愣愣的跑出去了，希望在固定的宽内自动换行，而不是在结尾处加
这个标签来手动换行。（注意，br是少有的“单身狗”标签哦）。那既然是固定宽，就得有固定高咯，所以这样的换行文本，装它们的盒子是要有宽高的。

宽的话，就按照需要来设定咯，white-space:normal;这个属性是专用换行的，normal代表默认，其次还有nowarp（强制不换行）等其他属性值。

但是高可就要注意了！！！好长一段时间，其实我不太清楚css中，行间距（line-height）和盒子高有什么关系，只是一个个试，合适了就算确定好行间距了。当然资料上也没怎么解释清楚，也不知道是不是没注意。直到有一天有位大神告诉我，盒子高除以行间距，等于显示文字的行数。当时的我，像捡了宝一样啊，哈哈~

也就是说，如果你的盒子高50px,line-height为25px的话，50/25=2.也就是说可显示两行。即，如果说除不尽或者为小数，那有可能就会被遮掉一些。

最后一点，记得加上overflow:hidden;溢出隐藏，以便把你多出来的文本截掉，具体的用法会在后面排版中用到。

3. 不换行长文本

不换行长文本，即指多余的不换行，用省略号代替。如图中黄色标示处。这样的文本应用也是非常多哒。

首先，要使用white-space 强制不换行，第二步：溢出隐藏，第三步：文本溢出省略，text-overflow:ellipsis; 是不是很简单？

4. 多彩文本

这种是图中没有的格式，突然想起来的。实际应用中总会遇到对一段文字中某个词或者某句话进行变色，加粗，加大等操作使得它比较突出。这个时候呢，就要选择一些轻量级的标签，一般我选择标签，为什么捏，p标签自带行间距和换行属性，div这种块级元素显得有点大才小用了（好吧，有关块级和非块级元素下节拎出来讲讲，童鞋们自己可以先预习一下下），而a标签，在不添加 href 链接的时候，基本是个啥样式都木有的干净宝宝。可以避免布局错乱等一些原因，所以啊，我们就它了，当然，有时难免会出现问题，这个，具体遇到的时候你再来问我吧。下面举个栗子，哦不，例子~

比如：今天我不嗨森。

首先，装好整句话：

今天我不嗨森。

然后用a装下要特殊处理的文字：

今天我不嗨森。

最后，对你那“nohappy”的样式撒欢的放样式吧，不过不要去作死的放入有关位置的样式哈~（ps：如果只是想加粗，也可以使用标签哟~）

三、排版

又到了激动人心的时刻啦。不过既然前面都讲了要各司其职，所以我们今天排版之前得把样式挪到它该去的地方啦。

在DW中ctrl+N ,新建一个css文件：

IBM Watson

IBM Watson文字转语音

下载

则会得到这么一个文件：

UTF-8呢，是一种国际编码。文件保存为非utf-8编码时，可能就会出现乱码。还有其它诸如GB-2312的东西，自己去查查，总之你不要乱动dw自动生成的任何语句就是了。

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

好了，不多说了，接着。

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

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

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

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

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

<strong><link href="css/index.css" type="text/css"  rel="stylesheet"></strong>

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

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

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

1. 外包

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

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

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

<strong>margin: 0 auto;</strong>

遇到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，高也是相应要减掉一些的。

下图是随便网络一搜就能搜到的，但其实在实际使用中，width不仅仅是content里面的宽度，应该是要加上黄色的部分，曾经我有web工程师面试的时候就有这么一道题。或者说把紫色的边也加上，因为这些区域，除了空出来，服务于content，也放不了其他的了。且在没有margin的情况下，别的div要排也是贴着border，so……你懂的……-_-|||

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

「设计师自学指南系列教程」

1. 平面设计： 《超赞！设计师完全自学指南》
2. 交互设计 ： 《交互设计师修炼指南！教你从零开始成为优秀交互设计师》
3. UI设计： 《超实用新手指南！零基础如何自学UI设计？》
4. 前端开发 ： 《天猫高手来教你！零基础如何系统地学习前端开发？》
5. 抠图技巧： 《从菜鸟到高手！PHOTOSHOP抠图全方位攻略》
6. 配色方案： 《色彩搭配速成！3个实用方法帮你全面搞定配色》
7. DPI指南： 《基础知识学起来！为设计师量身打造的DPI指南》

作者：Sunny萧萧

【优设网 原创文章 投稿邮箱：2650232288@qq.com】