Div+CSS布局入门教程(五)

四、页面制作(1)—-用好border和clear

  由于找工作找房子的原因,隔了这么久才能开始写教程,心里感觉很对不起一直在关注本站的朋友,今天是找到房子的第二天,于是赶快继续写教程。
  这一节里面,主要就是想告诉大家如何使用好border和clear这两个属性。

继续阅读

Div+CSS布局入门教程(一)

转自http://www.tblog.com.cn

一、页面布局与规划

好久没有认真写点东西了,想起最近这些时间经常有朋友问到我有关于DIV+CSS布局的问题,其实归根结底还是由于没有入门造成的。那么接下来的这篇文章就带领大家入门吧…

在网页制作中,有许多的术语,例如:CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。

所有的设计第一步就是构思,构思好了,一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来,以下是我构思好的界面布局图。
01.JPG

继续阅读

padding-CSS速查手册

padding版本:CSS1  兼容性:IE4+ NS4+ 继承性:无

语法:

padding : length

参数:
length : 由浮点数字和单位标识符组成的长度值 | 或者百分数。百分数是基于父对象的宽度。请参阅长度单位

说明:

检索或设置对象四边的补丁边距。
如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边。
如果只提供一个,将用于全部的四条边。
如果提供两个,第一个用于上-下,第二个用于左-右。
如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。
内联对象要使用该属性,必须先设定对象的height或width属性,或者设定position属性为absolute。
不允许负值。
对应的脚本特性为padding。请参阅我编写的其他书目。
关于对象的尺寸与边框,内外补丁等样式表属性的关系,请参看图例以及height和width属性。

示例:

body { padding: 36pt 24pt 36pt; }
body { padding: 11.5%; }
body { padding: 10% 10% 10% 10%; }

word-break应用

word-break版本:IE5+专有属性 继承性:无语法:

word-break : normal | break-all | keep-all

参数:
normal :  依照亚洲语言和非亚洲语言的文本规则,允许在字内换行
break-all :  该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all :  与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本

说明:

设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。
对于中文,应该使用break-all 。
对应的脚本特性为wordBreak。请参阅我编写的其他书目。

示例:

div {word-break : break-all; }