海南中立科技 旗下:精英网|海微商|海微信|天涯数码
网站首页home 网站建设web Const 系统开发System Dev 微信开发wx Dev 网站推广Website SEO 网站超市Website SM 客户案例Client case 网站模板Web template 关于我们About us
网站建设
建站基础系统 成品网站 网站建设资讯 独立设计样板 网站套餐 解决方案 经典案例
联系我们
QQ服务群:28519571 工作时间:86-0898-31568080 传真号码:86-0898-31568085 24小时服务:0138-07590485
 您现在的位置: 首页 >> 网站建设 >> 网站建设资讯 网站制作教程
网页文字排版处理的技巧
中立科技 | 2011-12-02 00:03:32 | 阅读:3580
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。

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

图2 文字竖排效果

  4、文字从右读起

  古文的文字编排也通常用到从右读起的效果,下面的代码就可以实现这个效果(如图3):
编辑的好帮手 网页文字的处理技巧

图3 文字从右读起

<div style="width:260px;direction: rtl; unicode-bidi: bidi-override">
长恨歌(片段) <br>
白居易<br>
汉皇重色思倾国,御宇多年求不得。
杨家有女初长成,养在深闺人未识。
天生丽质难自弃,一朝选在君王侧。
……
</div>

  <div>标签中的样式规定了一块260像素宽的区域,其中的文字从右边开始。样式中宽度的设置非常重要,必须设置刚好的宽度来容纳内容,否则诗文的显示效果可能就不是一行一段了。

  5、文字强制对齐

  我们来比较一下图4和图5两种文字编排方式,图4是使用了文字强制对齐的效果,图5只是普通的编排。图4的文字首尾很整齐,而图5的文字行落则参差不齐,有长有段。显然,图4的效果更加美观,特别是对于英文的段落。通过如下的代码,我们就可以轻松实现文字的强制对齐:
编辑的好帮手 网页文字的处理技巧

图4 使用文字强制对齐的效果

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

图5 普通的编排显得参差不齐

<div style="font-size:12px;width:300;text-align:justify">
The United States is an industrial country ……
</div>

  代码   标签中的样式规定了一个300像素宽的区域,“text-align:justify”规定了其中的文字行落强制对齐。

  通过以上的一些技巧,我们就可以很灵活的根据需要进行网页文字的编排!
海南网络公司|海口网站建设|海南网站优化|海南网站设计|海南网络推广|海南网页设计|南通网站建设|海南网站建设|海赋灯光音响|广州沣韵|海南企业微信|天涯数码|海南精英网|海南微信建站|海南中立科技|海南微信营销|海南微信电商|海南网站建设|海南网站制作|海口网站建设|三亚网站建设|儋州网站建设|五指山网站建设|文昌网站建设|琼海网站建设|万宁网站建设|东方网站建设|定安网站建设|屯昌网站建设|澄迈网站建设|临高网站建设|白沙网站建设|昌江网站建设|乐东网站建设|陵水网站建设|保亭网站建设|琼中网站建设
合作伙伴 企业发展 企业文化 联系我们 在线订购 网站地图 返回首页手机版
海南中立科技有限公司2018版权所有 24小时服务热线:13807590485   欢迎来电咨询
地址:海南省.海口市.海甸二东路环惠大厦6楼(南宝路明都大厦107#) 公司电话:0898-31568080 31568060 QQ:85398489
全国合作联盟分布:海南海口 四川成都 湖北武汉 湖南长沙 安徽合肥 广东深圳 山西太原 西藏拉萨
技术服务: E_mail:zlkj_2008@126.com 服务订购:E_mail:server@web0898.net 在线客服邀请 备案/经营许可号:琼ICP备10201086号-9
推广关键字:海南网站建设,海南网站制作,海南网站开发,海南微信开发,海南微信公众号开发,海南微信公众号代运营,海南模板网站制作,海南网页设计,海南网络公司

在线客服 业务咨询 备案咨询
扫描直接联系