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

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

　　今天要讲三个东西：

　　文件路径关系

　　各式文本

　　继续排版

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

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

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

　　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. 短文本

　　如上图蓝色标示的几处，这些文本一般一行足以，无换行，常用标题，名字等。它们的宽高可设可不设，但是保险起见是要用盒子装着的，常用、……等，装入文本即可，然后对字体大小(font-size)、颜色(color)、粗细(font-weight)等进行样式设置。

　　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文件：

　　则会得到这么一个文件：

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

（编辑：源码网）

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