(两端对齐) PS.谈起 margin,我习惯于在写 CSS 的时候为所有的标签定义 margin:0;因为时而出现由于 默认的 margin 值导致页面排版问题,而自己找不到原因(特别注意的是 ul/ol/p/dt/dd 等 标签) 排版中竖排文字—— ——使用 writing6、DIV+CSS 排版中竖排文字——使用 writing-mode writing-mode 属性有两个值 lr-tb 和 tb-rl,前者是默认的左-右、上-下,后者是上下、右-左。 比如:
p{ writing-mode:tb-rl; }
可以结合 direction 排版。 7、项目符号的
问题——使用 list-style 项目符号的问题——使用 list——
在 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)的项目符号不会显示。 可惜的是上述的项目符号似乎并不能设定大小, 圆点和方块始终是那么点。 并且不能设定垂 直方向上的对齐。 排版中首字下沉——使用:first ——使用:first8、DIV+CSS 排版中首字下沉——使用:first-letter 伪对象:first-letter 配合 font-size、float 可以制作首字下沉效果。 比如:
p:first-letter{ padding:6px; font-size:32pt; float:left; }
9、首行缩进——使用 text-indent
首行缩进——使用 text—— text-indent 可以使得容器内首行缩进一定单位。 比如中文段落一般每段前空两个汉字。 可以这么写:
p{ text-indent:2em;/*em 是相对单位,2em 即现在一个字大小的两倍*/ }
如果 font-size 是 12px 的话,那么 text-indent:2em 则缩进 24px。 10、关于汉字注音——使用 ruby10、关于汉字注音——使用 ruby 标签和 ruby-align 属性 —— 比如说
注音zhuyin,可以利用 ruby-align 设置对齐方式。 这是在 CSS 手册里面看到的, 具体可以自行查阅 ruby-align 项。 11、 排版中固定宽度汉字截断—— ——使用 text11、DIV+CSS 排版中固定宽度汉字截断——使用 text-overflow 用后台语言可以对从数据库里的字段内容做截断处理,比如说截 12 个汉字(之后用省 略号)。但是有时还需要 html 标签的过滤等,而用 CSS 来控制则没有这个问题。比如对列 表应用以下样式:
li{ overflow:hidden; text-overflow:ellipsis;
white-space:nowrap; }
不过只能处理文字在一行上的截断,不能处理多行。 12、固定宽度汉字( 12、固定宽度汉字(词)折行——使用 word-break 折行——使用 word—— 举个例子,比如说要在一个固定宽度容器里面显示很多地名(假设以空格分隔),为了 避免地名中间断开(即一个字在上面而另一个字折断到下一行去了)。则可以使用
word-break。 比如:
xml:namespace prefix = divstyledivstyle="width />
南京上海上海上南上海上海南京上海上海
值得注意的是里面的空格不能以代替(最少要有一个软空格)。 13、 排版中设置背景属性——使用(background) ——使用 13、DIV+CSS 排版中设置背景属性——使用(background) background 属性包含很多子属性,如 background-color 设置背景颜色; background-image 设置背景图片;background-repeat 设置背景图片的重复设置, background-repeat:no-repeat 为不重复, background-repeat:repeat-x 为只水平方向重复, background-repeat:repeat-y 为只垂直方向重复; background-position 设置背景图片的显 示位置,background-attachment 为固定图片在某个位置显示。 以上图片属性均可写在一起,如:background:url(绝对路径或相对路 径);background-repeat:no-repeat;background-position:xy 坐标或百分比; 以上为 CSS 基本常用的属性, 个人感觉 DIV+CSS 不能太迷信它的很好很强大, 它作为制 作网页, 美化网页的一个重要辅助是很强大方便的。 可以弥补 table 制作框架和表格时的很 多不足和美工上的缺点,但是完全只用它来做,太费时费力,对于全国中小型网站长来说, 真的不太适合。我个人觉得用 table+DIV+CSS 是最好的组合,也是最省时省力的办法。即使 只用 table
来制作网站,在里面加些 CSS 样式,的的确确也能带来极大的方便。但对于门户 类或其他大型网站业讲用 DIV+CSS 可占绝对优势,只需要改动 CSS 文件就完成了所有改版。 DIV+CSS 对于门户网站来说改版就像换件衣服一样简单容易,改版时,不用改动全站 HTML 页面,只需要重新写 CSS,再用新 CSS 覆盖以前的 CSS 就可以实现改版了。