简单实用的CSS网页布局中文排版技巧

由于汉字的特殊性,在css网页布局中,中文排版有别于英文排版。排版是一个麻烦的问题,小编认为,作为一个优秀的网页设计师和网页制作人员,掌握一些简单的中文排版技巧是不可或缺的,所以今天特意总结了几个简单实用的技巧,希望对大家有所帮助。

  一、如何设定文字字体、颜色、大小等

  font-style设定斜体,比如font-style:italic

  font-weight设定文字粗细,比如font-weight:bold

  font-size设定文字大小,比如font-size:12px

  line-height设定行距,比如line-height:150%

  color设定文字颜色,注意不是font-color喔,比如color:red

  font-family设定字体,比如font-family:"LucidaGrande",Verdana,Lucida,Arial,Helvetica,宋体,sans-serif

  二、使用margin,text-align 控制段落

  中文段落使用p标签,左右、段前段后的空白,都可以通过margin来控制。

  比如

  p{

  margin:18px 6px 6px 18px;/*分别是上、右、下、左,十二点开始的顺时针方向*/

  }

  而text-align则用于文字的对齐方式。

  比如

  p{

  text-align:center;/*居中对齐*/

  }

  除了居中对齐之外,对齐方式还有左对齐、右对齐和两端对齐,对应的属性值分别为left、right、justify。

  提示:由于默认的margin值会导致页面排版出现问题,特别是ul、ol、p、dt、dd等标签。小编的解决之道就是把所有标签的margin值定义为0。

  三、竖排文字—使用writing-mode

  writing-mode属性有两个值lr-tb和tb-rl,前者是默认的左-右、上-下,后者是上-下、右-左。

  写法如

  p{

  writing-mode:tb-rl;

  }

  四、使用list-style美化列表

  如果我们的排版涉及到列表,不妨考虑为它添加些项目符号进行美化。

在CSS里,项目符号包括disc(实心圆点)、circle(空心圆圈)、square(实心方块)、decimal(阿拉伯数字)、lower-roman(小写罗马数字)、upper-roman(大写罗马数字)、lower-alpha(小写英文字母)、upper-alpha(大写英文字母)、none(无)。

  嘿嘿!我们可用的项目符号数量不少喔,但美中不足的是我们不能为它们设定大小,也不能设定垂直方向上的对齐。

  如果我们想设定一个列表的项目符号为方块,可以这样写:

  li{

  list-style:square;

  }

  小编在这里提醒大家一下:当一个项目列表的左外边距设为零的时候,list-style-position:outside的项目符号不会显示。

  五、使用text-overflow 实现固定宽度汉字截断

  用后台语言可以对从数据库里的字段内容做截断处理,如果想对列表应用该样式,我们可以这样写:

  li{

  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;

  }

  六、首字下沉

  如果你想制作首字下沉效果,不妨考虑伪对象:first-letter并配合font-size、float属性。

  p:first-letter{

  padding:6px;

  font-size:32pt;

  float:left;

  }

  七、首行缩进—使用text-indent

  text-indent可以使得容器内首行缩进一定单位。比如中文段落一般每段前空两个汉字。

可以这么写

  p{

  text-indent:2em;/*em是相对单位,2em即现在一个字大小的两倍*/

  }

  注意:如果font-size是12px的话,那么text-indent:2em则代表缩进24px。

  八、固定宽度汉字(词)折行—使用word-break

  在排版的时候,你是否为一个词组,其中一个字出现在上面而另一个字折断到下一行去而发愁呢?不用愁,这时使用word-break就可以轻松解决问题了。

  九、关于汉字注音—使用ruby标签和ruby-align属性

  最后小编向大家介绍一下ruby标签和ruby-align属性 。这是一个比较冷门的技巧,可能平时使用不多,但小编觉得不妨提供给大家预防不时之需。

  如果我们想为汉字注音就可以这样写

  <ruby>注音<rt style="font-size:11px;">zhuyin</rt></ruby>

  然后通过ruby-align设置其对齐方式。

其他的一些属性

  • column-width : 用于指定列的宽度,一旦指定一个值,浏览器会根据当前浏览器的宽度,动态的决定将内容分为多少列。
  • column-rule : 这个属性是一种简写,其实它包含了三个不同的属性,分别是 column-rule-width, column-rule-style, column-rule-color,反正实现的就是在列之间加上一个分割线,和 border 属性的设置是相同的。
  • column-gap : 用于设置分栏的空隙属性,这个值由分栏两侧平摊。

如果想要实现分栏,我们可以利用 column-width ,也可以使用 column-count 属性,但是我们通常不这么做,因为这意味着必须要将内容分成三列,而不考虑当前浏览器的宽度,这是非常不友好的设计。

利用 column-width 的优点是,我们的列数跟随浏览器窗口的变化而变化(响应式),即列数 = 浏览器宽度 / columnWidth, 不过这么做也有一个显而易见的问题,那就是我们很难把握 column-width 数值大小,如果过大,那对于中等屏幕可能都仍然是一列,如果过小,那么在大屏幕上又会分成过多的列。

利用 column-count 的优点是,我们可以随心所欲的设置列数,保证布局达到我们想要的结果,这么做的缺点就是列数是固定的无法跟随浏览器宽度的变化而发生改变,这就导致了很严重的问题,比如对于一个 480px 宽的设备,我们设置为两列,那么可能只显示两三个单词就要换行,非常的不友好。

实际上,我们可以同时采用 column-widthcolumn-count,什么意思呢?比如说我们设置 column-width=480px; column-count=2的时候,这两个属性就会相互制约,也就是说对于相当大的屏幕,比如说 2100px宽的屏幕,它也只会显示两列,因为我们设置了 column-count = 2,但是对于小屏幕,比如 640px 宽的屏幕,由于 column-width=480px,这就意味着放不下两列,这时就会变成一列。

可见,同时利用这两个属性就可以克服二者的缺点而集中二者的优点。 

知道了以上属性之后,相信你可以很快的将我们示图中的效果实现出来,这里我们不在粘贴源代码,你可以 点此下载 。这里需要将一下,我们在页面中引用了一些好看的字体,如果你也想使用,你住需要将下面这一行代码粘贴到你的 <head> 标签下即可。

<link href=‘http://fonts.googleapis.com/css?family=Lobster|Terminal+Dosis‘ rel=‘stylesheet‘ type=‘text/css‘>

  • display : 如果想要使用 Flexbox 布局,那么我们首先要将这个属性的值设置为 flex
  • flex-flow : 这个属性其实是两个属性的缩写,其中一个是 flex-direction 用于设置主轴的方向,如果设置为 row 则是一水平方向为主轴,如果为 column 垂直方向为主轴。还有一个属性是 flex-wrap, 用于设置元素换行,当元素超出父元素宽度时就自动换行,这就可以实现自适应屏幕的效果。
  • flex : 这个属性一般在设置 displayflex 的子元素中设置,有三个参数,在这里不在详细解释,因为我也不太能组织语言解释它,可以百度查看一下该属性的使用方法。
时间: 2024-10-08 10:08:34

简单实用的CSS网页布局中文排版技巧的相关文章

别具光芒 CSS网页布局案例剖析 中文pdf扫描版

别具光芒:CSS网页布局案例剖析以七大完整案例为线索,紧密围绕在使用CSS+DIV布局制作网页过程中遇到的实际需要和应该掌握的技术,全面介绍了CSS布局网页的各方面内容和技巧.书中摒弃了案例书常见的一味罗列步骤,轻视技术原理的做法,把案例作为学习手段,不但侧重讲解CSS盒子模型.标准流.浮动.定位等四大核心技术原理,更侧重讲解如何在实践中应用它们.读者通过案例,既可以掌握CSS的核心技术要点,也可以了解相关技术和工作流程,使读者不但知其然,还知其所以然.此外,本书还结合了流行的CMS内容管理系统

CSS网页布局中必须要了解的几个XHT…

应用div+css网页布局,你必须了解一些xhtml结构标签,原则上一个xhtml文档所有的标签都应该是结构标签,需要表现的地方都使用css来控制. 下面列一个完整xhtml的结构标签: 结构 body, head, html, title 文本 abbr, acronym, address, blockquote, br, cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre, q, samp, span, strong, 

HTML、DIV+CSS网页制作中排版混乱的几种常见的情况

对于Web前端初学者或者经验不够丰富的人来说,出现页面排版布局混乱的情况并不罕见,有时候明明前面部分的网页都很整齐美观,可是在接下来的部分中经常会出现网页布局混乱,比如content无法调整到开发者需要的位置,或者出现页面重叠的现象.以下内容是我个人在网页制作过程中关于网页排版混乱及其解决办法的一些经验总结,不足之处,希望大家互相补充学习. )DIV+CSS网页错位的原因与解决方法 常常我们会遇到我们要设置在一行显示的布局,却因为种种原因造成了错位,看到结果是在一行的最后一个盒子布局错位掉下去了

【div+css网页布局详解】

前言: 网页布局是制作一个网页的第一步也是最重要的一步,今天来详细谈一下使用div+css布局的方法. 用dw编写网页的时候是可以通过两种方法的,一是图形界面,二是代码,初学的话可以用图形界面,学的差不多的时候使用代码更能提高效率. 因为现在css3和之前css2有较大改动,咱们先从css2的说起吧. (笔者采用的是dreamweaver cs6,破解版下载地址:http://www.aa25.cn/download/954.shtml) 一.单列布局 一个网页编写手先要搭一个框架,就像下图样:

DIV+CSS网页布局常用的一些基础知识整理

CSS命名规范一.文件命名规范 全局样式:global.css:框架布局:layout.css:字体样式:font.css:链接样式:link.css:打印样式:print.css: 二.常用类/ID命名规范页 眉:header内 容:content容 器:container页 脚:footer 版 权:copyright 导 航:menu主导航:mainMenu子导航:subMenu 标 志:logo标 语:banner标 题:title侧边栏:sidebar 图 标:Icon注 释:note

Div+CSS网页布局中CSS无效的十个常见原因

学习Div+CSS网页布局的知识,可是兄弟连validation有时难以操作,但用它你可以查看由版面设计引起的差错,验证程序抛出大量差错和警告,说明你的XHTML尚未完善,可能无法在不同浏览器上保持一致功能,下面十个细微的失效问题难住了大批程序员,本文就告诉你如何解决,在本文开始前介绍一些使用兄弟连PHP培训的基础div+css验证程序时需要注意的问题. 1.不要担心验证程序的警告:如果验证程序说发现12处错误以及83处警告,不要理它,继续进行下一步. 2.一次更正一个错误:按顺序进展工作,从上

深入理解css网页布局细节

在CSS网页开发布局中,需要对浮动和定位有深刻的理解才能在开发中游刃有余. 基于此,在博客园中做了本篇总结,这些总结来自实践经验和阅读一些书籍后的理解总结,主要内容为浮动,清除浮动,定位. 一. float属性深入理解 首先简单布局一下,代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css Test</title> <sty

深入理解CSS网页布局-理论篇

在CSS网页开发布局中,需要对浮动和定位有深刻的理解才能在开发中游刃有余. 基于此,在博客园中做了本篇总结,这些总结来自实践经验和阅读一些书籍后的理解总结,主要内容为浮动,清除浮动,定位. (可点击屏幕左边的目录查阅) 一. float属性深入理解 首先简单布局一下,代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css Test</ti

前端教程(10)css入门教程-css网页布局

一 网页布局方式 #1.什么是网页布局方式 布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式,比如word,nodpad++等等 而网页的布局方式指的就是浏览器这款工具是如何对网页中的元素进行排版的 #2.网页布局/排版的三种方式 2.1.标准流 2.2.浮动流 2.3.定位流 二 标准流 标准流的排版方式,又称为:文档流/普通流,所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列. # 1 浏览器默认的排版方式就是标准流排版方式 # 2 在CSS中将