网站DIV排版技巧归纳总结

东营网站设计及网站结构的根本是要理解DIV+CSS，经由过程正当的应用DIV+CSS能够利于搜索引擎的抓取，小我感到DIV+CSS作为制造网页，丑化网页的一个紧张帮助是很壮大便利的，能够补充table制造框架和表格时的许多不敷和美工上的毛病。上面是东营网站制造者必需晓得的排版技能：

1、CSS边框(border)

border紧张有如下参数：none:无边框;hidden:暗藏边框;dotted:点线;dashed:虚线;solid:实线边框;double:双线边框;groove:3D凹槽;ridge:菱形边框;inset:3D凹边;outset:3D凸边。

边框的值将是四个，假如供给全体四个参数值，将按上-右-下-左的次序作用于四个边框。假如只供给一个，将用于全体的四条边。假如供给两个，第一个用于上-下，第二个用于左-右。假如供给三个，第一个用于上，第二个用于左-右，第三个用于下。边框(border)和界限(margin)紧张用来定位，它们将以上下阁下四个值来界说。

2、CSS参加网页办法

紧张分为三种：内部款式表、行内款式表、内部款式表。内部款式表紧张界说在内;行内款式表可间接应用style属性界说在标签内部;应用内部款式表时，CSS文件与网页文件是分离开来的，离开的文件要用链接起来，这紧张针对CSS款式表较多的网页中，特别是要与DIV联合的网页。

3、CSS盒子

CSS中没有box这个属性。CSS的盒子是由如下几个部门构成的：内容(content)、添补(padding)、边框(border)和界限(margin)。盒子的内容固然是必需有的，而添补、边框和界限都是可选的。假如把CSS的盒子看作实际生涯中的盒子，那末内容便是盒子里装的货品;而添补便是怕货品毁坏而增加的泡沫或许别的抗震的器械;边框便是盒子自己了;至于界限则阐明盒子摆放的时刻的不克不及与其余物体紧挨在一起，而必需有一段闲暇。固然了，CSS中的盒子是平面的。

4、设置配景属性

background属性包括许多子属性，如background-color设置配景色彩;background-image设置配景图片;background-repeat设置配景图片的反复设置，background-repeat:no-repeat为不反复，background-repeat:repeat-x为只程度偏向反复，background-repeat:repeat-y为只垂直偏向反复;background-position设置配景图片的表现地位，background-attachment为牢固图片在某个地位表现。

5、设定笔墨字体、色彩、巨细

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;font:italicbold12px/150%"LucidaGrande",Verdana,Lucida,Arial,Helvetica,宋体,sans-serif;

6、若何节制段落排版

中文段落应用

标签，阁下(相当于缩进)、段前段后的空缺，都能够用margin。好比：

p{  margin:18px6px6px18px;  /*分离是上、右、下、左，十二点开端的顺时针偏向*/  } 笔墨的对齐办法用text-align，谈起margin，我习惯于在写CSS的时刻为所有的标签界说margin:0;因为时而呈现因为默许的margin值招致页面排版成绩，而自己找不到缘故原由

7、链接

CSS链接有四个属性：此中a:link、a:visited、a:hover和a:active分离对应未拜访的链接、曾经拜访过的链接、鼠标悬停的链接和激活的鼠标链接(按下鼠标左键的时刻)。这几个款式的次序不克不及倒置，不然能够形成部门款式无奈失常表现。每一个款式里能够变动字体属性、下划线、配景等等。

8、名目标记的成绩

在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)的名目标记不会表现。惋惜的是上述的名目标记彷佛并不克不及设定巨细，圆点和方块一直是那末点。而且不克不及设定垂直偏向上的对齐。

9、对于汉字注音

好比说注音zhuyin，能够应用ruby-align设置对齐办法。这是在CSS手册外面看到的，详细能够自行查阅ruby-align项。

10、首字下沉

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

11、竖排笔墨

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

12、首行缩进

能够使得容器内首行缩进必定单元。好比中文段落一样平常每段前空两个汉字。能够这么写： p{  text-indent:2em;/*em是绝对单元，2em即如今一个字巨细的两倍*/  }假如font-size是12px的话，那末text-indent:2em则缩进24px。

13、牢固宽度汉字截断

用后盾说话能够对从数据库里的字段内容做截断处置，好比说截12个汉字(之后用省略号)。然则偶然还必要html标签的过滤等，而用CSS来节制则没有这个成绩。不外只能处置笔墨在一行上的截断，不克不及处置多行。

14、牢固宽度汉字(词)折行

举个例子，好比说要在一个牢固宽度容器外面表现许多地名，为了防止地名中央断开。则能够应用word-break。

DIV+CSS对付流派网站设计来讲改版就像换件衣服同样简略轻易，改版时，不消篡改全站HTML页面，只必要从新写CSS，再用新CSS笼罩曩昔的CSS就能够完成改版了。