编辑的好帮手 网页文字的处理技巧

众所周知,网页文字的排版设计对于页面的整体效果有着非常重要的影响。就象传统的报刊杂志一样,我们将网页看作一张报纸、一本杂志来进行文字的排版处理,针对不同的需要,有可能需要使用一些特殊的文字排版技巧。比如做一个介绍古文的网页时,我们可能会用到文字竖排、文字从右读起的效果以增强页面表现力;做一个新闻页面,可能会用到段落首字下沉等效果,用以强调某条新闻。  在一张报纸上、一本杂志上要实现这些效果并不难,但是我们如何在网页上实现这样的效果呢?下面就向大家介绍几种文字排版处理的技巧。  1、段落首行自动缩进  每个段落的首行要缩进两个汉字大小是众人皆知的常识,我们通常在每个段落首行加上多个“”标签来实现缩进,这样虽然能够达到目的,但是却过于麻烦。其实我们只要运用一些简单的CSS语法就可以一劳永逸地在一个页面中实现首行缩进。<style type=”text/css”>p{text-indent: 2em}</style>  通过上面的样式,页面中每段包含在标签<p>和</p>之间的段落都会自动缩进两个汉字字符大小。  2、段落首字下沉  我们阅读传统媒体时,经常看到如图1的效果,通过使用样式,我们也可以很轻松地实现类似效果。图1 很常见的段落首字下沉效果

<style>#chr:first-letter{font-size: 24pt;left: 0px; float: left;position: absolute }</style>  上面这段代码定义了一个首字大小为24pt的缩进,使用时我们只要在某个段落的标签中添上一个“id=chr”就可以了,例如下面的段落:<p id=chr>柳永(987?-1053?)字耆卿,福建崇安人。……</p>

  3、文字竖排效果  如下面的一段诗文,在网页上显示时文字呈竖直排布,非常适合诗词的文字编排。<div style=”line-height: 18px; text-align: center; writing-mode: tb-rl”><pre>长恨歌(片段)<br>白居易<br>汉皇重色思倾国,御宇多年求不得。杨家有女初长成,养在深闺人未识。天生丽质难自弃,一朝选在君王侧。……</pre></div>代码

  标签中的样式规定了文字的竖直排布,并且每行的间距为18像素,文字为中间对齐。网页读取时都会自动将空格去除后才显示,在诗文内容开始和结束部分分别加上标签<per>和</per>,可以使诗文内容按照自己的意愿精确显示,其效果如图2。<CENTE自己战胜自己是最可贵的胜利。

编辑的好帮手 网页文字的处理技巧

相关文章:

你感兴趣的文章:

标签云: