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

二、各式文本

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自动生成的任何语句就是了。