让企业赢在全网营销时代
当前位置: 首页>>建站知识>>网站运营

网站DIV排版技巧归纳总结

作者:admin 点击量:76次 2017-03-05 13:28:31

东营网站设及网站结构的根本是要理解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就能够完成改版了。