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

众所周知,网页文字的排版设计对于页面的整体效果有着非常重要的影响。就象传统的报刊杂志一样,我们将网页看作一张报纸、一本杂志来进行文字的排版处理,针对不同的需要,有可能需要使用一些特殊的文字排版技巧。比如做一个介绍古文的网页时,我们可能会用到文字竖排、文字从右读起的效果以增强页面表现力;做一个新闻页面,可能会用到段落首字下沉等效果,用以强调某条新闻。

  在一张报纸上、一本杂志上要实现这些效果并不难,但是我们如何在网页上实现这样的效果呢?下面就向大家介绍几种文字排版处理的技巧。

  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。

时间: 2024-08-18 08:21:03

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

CSS改变选择网页文字的背景色技巧

最近在访问一个网站的时候,我注意到,当其文字被选中时它有一个匹配他的网站的背景色,这个背景色通常是深蓝色.现在,如果您的网站不使用任何蓝色为文字背景,看上去会不会有点不合适? 当寻找如何实现这一点的解决办法后,我感到惊喜,这竟然非常容易.只需添加以下的CSS到您的网页: ::selection{background: #A8141B; color: white; /* Safari */} ::-moz-selection{background: #A8141B; color: white; /

Dreamweaver制作网页的段落排版技巧

在使用Dreamweaver进行网页制作中有关文档资料内容的网页时,如果是英文书写格式,段落一般不缩进(不支持半角空格);如果需要缩进往往需要用如下方法解决: 1.人为的加入两个中文全角空格,才能够显示出位置缩进效果. 2.插入点图或图形 点图是指图片中只有一个或几个像素点,用肉眼看不出来.当我们在段落开头插入这样一个点图,并用HSPACE和VSPACE属性来调整点图的左右和上下的空格,以达到段落缩进. 同样可以插入图形,只不过该图形的颜色需要用网页背景色,这种方式用IMG的WIDTH和HEIG

网页文字无法复制?看这里

  网站对网页加密之后,用户无法复制网页中的文字,用下列方法可破解. 1.按CTRL+A键将网页选中,"复制",然后从中选取需要的文字即可. 2.调用源文件.选择菜单"查看",点击"源文件",打开记事本就能看到网页的全部文字,选取你需要的即可. 3.点击IE的"工具/Internet"菜单,进入"安全"标签页,选择"自定义级别",将所有脚本全部禁用然后按F5键刷新网页,然后选取.(提示:

网页文字无法复制怎么办

有时我们在网上搜索出了一些资料,却出现这种情况:不论我们如何拖动鼠标,无法选取网页上的文字,点击鼠标左右键没有任何反映,这怎么办呢?其实这主要是某些网站为了防止资料被随意转载而采取的一种保护措施(一般方法是禁用鼠标左右键),小编整理出了几种方法来破解网上文字无法复制的问题. 方法一.最简单的破解方法 1.使用IE内核的浏览器,360浏览器要使用兼容模式,打开"internet属性"页面. 2.选"自定义级别"找到如下设置 3.将java"小程序脚本&quo

网页文字该多大?文字字号详解

网页|详解 文字在网页上的应用: (只看小标题您就能知道这一部分要说什么了,为了避免罗嗦,在此文发布前决定把此处300余字删除,只保留了下面这一句.) 对于一个设计的好的网站来说,用户浏览时间最长的是文章正文. 中文网页文字的现状: 中文网页普遍使用12px和14px的宋体(simsun),这两种文字都可以加粗(font-weight: bold).这个规范似乎也成了网页设计师的基本 常识. 中国的网页设计师有这4种可供选择的文字表现方式,仅仅是4种,只有这4种,4种很小的文字.其中12px的宋

利用PHP和CSS改变网页文字大小

  用PHP和CSS改变网页文字大小--在设计网站的时候,要牢记一点:并不是所有的访问者都是神采奕奕的年轻人,而且他们也不一定完全熟悉Web浏览器的各种使用方法. 在设计网站的时候,要牢记一点:并不是所有的访问者都是神采奕奕的年轻人,而且他们也不一定完全熟悉Web浏览器的各种使用方法.聪明的设计者了解这一点,他们常常将各种特殊的可访问特性融入网站的设计中,这样,即使是年长者或是残疾人士都可以方便舒适地使用网站,而不必花费额外的力气. 文本大小调节器是最有效的可访问特性中的一个,任何网站都可能需要

CSS3教程:网页文字阴影属性text

文章简介:文字阴影在很多设计中都有应用,在过去我们只能通过图片来实现在Web上显示文字阴影,但是这样做对不太利于SEO,所以在CSS3中,text-shadow又恢复了其属性(text-shadow属性是CSS3中定义的,在CSS2.1中删除了). 文字阴影在很多设计中都有应用,在过去我们只能通过图片来实现在Web上显示文字阴影,但是这样做对不太利于SEO,所以在CSS3中,text-shadow又恢复了其属性(text-shadow属性是CSS3中定义的,在CSS2.1中删除了). text-

CSS3网页制作实例:实现网页文字渐变内发光投影

文章简介:纯CSS3文字 渐变内发光投影效果. 前阵子做了个css3文字效果,涉及css3投影,渐变,蒙版,伪类等知识点,现在写下设计思路,仅供参考.发个效果图大家看先: 投影shadow box-shadow 一般我们都是用css3的box-shadow来实现盒投影,用text-shadow来实现文字投影,box-shadow设置方型盒子投影,用raidus的话可以让盒子产生圆角,看起来就很圆滑舒服,一般的写法是这样的: -moz-box-shadow:1px 1px 5px #000; 1p

网页文字字号应用分析

文字在网页上的应用: (只看小标题您就能知道这一部分要说什么了,为了避免罗嗦,在此文发布前决定把此处300余字删除,只保留了下面这一句.) 对于一个设计的好的网站来说,用户浏览时间最长的是文章正文. 中文网页文字的现状: 中文网页普遍使用12px和14px的宋体(simsun),这两种文字都可以加粗(font-weight: bold).这个规范似乎也成了网页设计师的基本常识. 中国的网页设计师有这4种可供选择的文字表现方式,仅仅是4种,只有这4种,4种很小的文字.其中12px的宋体加粗效果还并