来讲讲：CSS网页结构中文排版的9则技能

凡是和我讨论客户段效率的全是脑子有问题的，影响的全是图片和Flash，所以我一直建议一个提交按钮就不要用图片带代替了。
网页制造poluoluo文章简介：CSS网页结构中文排版有别于外洋所先容的英文排版，因为汉字的特别性，以是有一些中央是必要人人注重的。明天poluoluo.com的这个文章也许对人人对排版的把持有所匡助.
　CSS网页结构中文排版有别于外洋所先容的英文排版，因为汉字的特别性，以是有一些中央是必要人人注重的。明天poluoluo.com的这个文章也许对人人对排版的把持有所匡助。

1、怎样设定笔墨字体、色彩、巨细—利用font

　　font-style设定斜体，好比font-style:italic;
　　font-weight设定笔墨粗细，好比font-weight:bold;
　　font-size设定笔墨巨细，好比font-size:12px;（大概9pt，分歧单元显现成绩参考CSS手册）
　　line-height设定行距，好比line-height:150%;
　　color设定笔墨色彩（注重不是font-color），好比color:red;
　　font-family设定字体，好比font-family:"LucidaGrande",Verdana,Lucida,Arial,Helvetica,宋体,sans-serif;（这是通用的写法）

　　以上都能够写在一行font属性里（除color属性必要独自写）：
　　font:italicbold12px/150%"LucidaGrande",Verdana,Lucida,Arial,Helvetica,宋体,sans-serif;

2、怎样把持段落排版—利用margin，text-align

　　中文段落利用<p>标签，摆布（相称于缩进）、段前段后的空缺，都能够用margin。好比：

p{
margin:18px6px6px18px;/*分离是上、右、下、左，十二点入手下手的顺时针偏向*/
}
　　笔墨的对齐体例用text-align，好比：

p{
text-align:center;/*居中对齐*/
}
　　对齐体例另有left、right和justify（两头对齐）
　　PS.谈起margin，我习气于在写CSS的时分为一切的标签订义margin:0;由于时而呈现因为默许的margin值招致页面排版成绩，而本人找不到缘故原由（出格注重的是ul/ol/p/dt/dd等标签）

3、竖排笔墨—利用writing-mode

　　writing-mode属性有两个值lr-tb和tb-rl，前者是默许的左-右、上-下，后者是上-下、右-左。
　　好比：

p{
writing-mode:tb-rl;
}
　　能够分离direction排版。

4、项目标记的成绩—利用list-style

　　在CSS里项目标记有disc（实心圆点）、circle（空心圆圈）、square（实心方块）、decimal（阿拉伯数字）、lower-roman（小写罗马数字）、upper-roman（年夜写罗马数字）、lower-alpha（小写英笔墨母）、upper-alpha（年夜写英笔墨母）、none（无）。好比设定一个列表（ul或ol）的项目标记为方块，如：

li{
list-style:square;
}
　　别的list-style另有一些值，好比能够接纳一些小图片作为项目标记，在list-style下间接写url(“图片地点”)就能够了。注重假如一个项目列表的左外补钉（margin-left）设为零的时分，list-style-position:outside（默许是outside）的项目标记不会显现。惋惜的是上述的项目标记仿佛其实不能设定巨细，圆点和方块一直是那末点。而且不克不及设定垂直偏向上的对齐。

5、首字下沉—利用:first-letter

　　伪工具:first-letter共同font-size、float能够制造首字下沉效果。
　　好比：

p:first-letter{
padding:6px;
font-size:32pt;
float:left;
}
6、首行缩进—利用text-indent

　　text-indent可使得容器内首行缩进必定单元。好比中文段落一样平常每段前空两个汉字。能够这么写：

p{
text-indent:2em;/*em是绝对单元，2em即如今一个字巨细的两倍*/
}
　　假如font-size是12px的话，那末text-indent:2em则缩进24px。

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

　　好比说<ruby>注音<rtstyle="font-size:11px;">zhuyin</rt></ruby>，能够使用ruby-align设置对齐体例。这是在CSS手册内里看到的，详细能够自行查阅ruby-align项。

8、流动宽度汉字截断—利用text-overflow

　　用背景言语能够对从数据库里的字段内容做截断处置，好比说截12个汉字（以后用省略号）。可是偶然还必要html标签的过滤等，而用CSS来把持则没有这个成绩。好比对列表使用以下款式：

li{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
　　不外只能处置笔墨在一行上的截断，不克不及处置多行。

9、流动宽度汉字（词）折行—利用word-break

　　举个例子，好比说要在一个流动宽度容器内里显现良多地名（假定以空格分开），为了不地名两头断开（即一个字在下面而另外一个字折断到下一行往了）。则可使用word-break。好比：

<divstyle="width:210px;height:200px;background:#ccc;word-break:keep-all">
南京上海上海上南上海上海南京上海上海上海南京上海上海南京上海上海南京上海南京上海南京上海南京上海南京上海南京上海上海南京上海上海
</div>
　　值得注重的是内里的空格不克不及以取代（起码要有一个软空格）。</p>
属性值就追加上去，重复的属性值就以最后一个为准。这里要注意的是，样式的先后不是根据页面上应用的名字顺序，而是样式表里的样式顺序。

Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。

Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。

是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。

这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

仓酷云

可以使用 CSS 检查工具进行设计。

在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。