\n'); } function setFlash(){ var myFlshObj = document.myFlash; var photoAlbum=document.getElementById('photoAlbum'); if(photoAlbum&&myFlshObj){ var awidth=0; awidth=parseInt(photoAlbum.offsetWidth); if(awidth<260) myFlshObj.height='150px'; if(awidth>=260 && awidth<350) myFlshObj.height='240px'; if(awidth>=350 && awidth<370) myFlshObj.height='305px'; if(awidth>=370 && awidth<550) myFlshObj.height='320px'; if(awidth>=550 && awidth<730) myFlshObj.height='455px'; if(awidth>=730) myFlshObj.height='590px'; } } function setAlbumUrl(name){ albumTypename=name; setFlash(); myFlash_DoFSCommand(null,"test"); } function showLoginWindow(ev){ var obj = document.getElementById("pop-login"); if(document.all){ obj.style.top = ev.clientY +'px'; obj.style.left = ev.clientX - 272 +'px'; } else{ obj.style.top = ev.pageY +'px'; obj.style.left = ev.pageX - 272 +'px' } obj.style.display ="block"; document.getElementById("pop-user-name").focus(); } function hideLoginWindow(){ document.getElementById("pop-login").style.display ="none"; } var blogID=getBlogID(); var UserName = ""; if(blogID!=null){ var tmpUserName=blogID.split("."); UserName=tmpUserName[0]; } function resize(obj){ if(window.event.srcElement.tagName == 'A'){ return; } obj.parentNode.childNodes[1].style.display = obj.parentNode.childNodes[1].style.display=='none' ? 'block': 'none'; obj.parentNode.childNodes[2].style.display = obj.parentNode.childNodes[2].style.display=='none' ? 'block': 'none'; } function tab(event){ var evt = (document.all)?window.event:event; if(evt.keyCode == 9){ document.getElementById("pop-password").focus(); return false; } else{ return evt.keyCode; } } function tab1(event){ var evt = (document.all)?window.event:event; if(evt.keyCode == 9){ document.getElementById("save").focus(); return false; } else{ return evt.keyCode; } } function tabTrack(event) { var evt = (document.all)?window.event:event; if(evt.keyCode == 9){ document.getElementById("pop-password-track").focus(); return false; } else{ return evt.keyCode; } }
个人资料
日志
前些天,他们疯狂的看着这个电视剧。之前,我也看过一两集觉得还可以。在他们的一再推荐下我也疯狂的看了,用了两个晚上不到的时间把这将近三十集(未完)的美国电视剧看了。
开始,我觉得micheal的确是个天才,后来,我觉得这个国家很乱,一切都弄得这么简单----杀。感觉美国就是为少数几个人成立的一样。其它人一文不值,没用了,就用简单的方法处理了就了事了。。。。
变量命名规范
|
前缀 |
类型 |
描述 |
实例 |
|
ch |
char |
8位字符 |
chGrade |
|
ch |
TCHAR |
如果_UNICODE定义,则为16位字符 |
chName |
|
b |
BOOL |
布尔值 |
bEnable |
|
n |
int |
整型(其大小依赖于操作系统) |
nLength |
|
n |
UINT |
无符号值(其大小依赖于操作系统) |
nHeight |
|
w |
WORD |
16位无符号值 |
wPos |
|
l |
LONG |
32位有符号整型 |
lOffset |
|
dw |
DWORD |
32位无符号整型 |
dwRange |
|
p |
* |
指针 |
pDoc |
|
lp |
FAR* |
远指针 |
lpszName |
|
lpsz |
LPSTR |
32位字符串指针 |
lpszName |
|
lpsz |
LPCSTR |
32位常量字符串指针 |
lpszName |
|
lpsz |
LPCTSTR |
如果_UNICODE定义,则为32位常量字符串指针 |
lpszName |
|
h |
handle |
Windows对象句柄 |
hWnd |
|
lpfn |
callback |
指向CALLBACK函数的远指针 |
|
|
前缀 |
符号类型 |
实例 |
范围 |
|
IDR_ |
不同类型的多个资源共享标识 |
IDR_MAIINFRAME |
1~0x6FFF |
|
IDD_ |
对话框资源 |
IDD_SPELL_CHECK |
1~0x6FFF |
|
HIDD_ |
对话框资源的Help上下文 |
HIDD_SPELL_CHECK |
0x20001~0x26FF |
|
IDB_ |
位图资源 |
IDB_COMPANY_LOGO |
1~0x6FFF |
|
IDC_ |
光标资源 |
IDC_PENCIL |
1~0x6FFF |
|
IDI_ |
图标资源 |
IDI_NOTEPAD |
1~0x6FFF |
|
ID_ |
来自菜单项或工具栏的命令 |
ID_TOOLS_SPELLING |
0x8000~0xDFFF |
|
HID_ |
命令Help上下文 |
HID_TOOLS_SPELLING |
0x18000~0x1DFFF |
|
IDP_ |
消息框提示 |
IDP_INVALID_PARTNO |
8~0xDEEF |
|
HIDP_ |
消息框Help上下文 |
HIDP_INVALID_PARTNO |
0x30008~0x3DEFF |
|
IDS_ |
串资源 |
IDS_COPYRIGHT |
1~0x7EEF |
|
IDC_ |
对话框内的控件 |
IDC_RECALC |
8~0xDEEF |
静态库版本命名规范
|
库 |
描述 |
|
NAFXCWD.LIB |
调试版本:MFC静态连接库 |
|
NAFXCW.LIB |
发行版本:MFC静态连接库 |
|
UAFXCWD.LIB |
调试版本:具有Unicode支持的MFC静态连接库 |
|
UAFXCW.LIB |
发行版本:具有Unicode支持的MFC静态连接库 |
Windows.h中新的命名规范
|
类型 |
定义描述 |
|
WINAPI |
使用在API声明中的FAR PASCAL位置,如果正在编写一个具有导出API人口点的DLL,则可以在自己的API中使用该类型 |
|
CALLBACK |
使用在应用程序回叫例程,如窗口和对话框过程中的FAR PASCAL的位置 |
|
LPCSTR |
与LPSTR相同,只是LPCSTR用于只读串指针,其定义类似(const char FAR*) |
|
UINT |
可移植的无符号整型类型,其大小由主机环境决定(对于Windows NT和Windows 9x为32位);它是unsigned int的同义词 |
|
LRESULT |
窗口程序返回值的类型 |
|
LPARAM |
声明lParam所使用的类型,lParam是窗口程序的第四个参数 |
|
WPARAM |
声明wParam所使用的类型,wParam是窗口程序的第三个参数 |
|
LPVOID |
一般指针类型,与(void *)相同,可以用来代替LPSTR |
MFC、句柄、控件及结构的命名规范
|
Windows类型 |
样本变量 |
MFC类 |
样本变量 |
|
HWND |
hWnd; |
CWnd* |
pWnd; |
|
HDLG |
hDlg; |
CDialog* |
pDlg; |
|
HDC |
hDC; |
CDC* |
pDC; |
|
HGDIOBJ |
hGdiObj; |
CGdiObject* |
pGdiObj; |
|
HPEN |
hPen; |
CPen* |
pPen; |
|
HBRUSH |
hBrush; |
CBrush* |
pBrush; |
|
HFONT |
hFont; |
CFont* |
pFont; |
|
HBITMAP |
hBitmap; |
CBitmap* |
pBitmap; |
|
HPALETTE |
hPaltte; |
CPalette* |
pPalette; |
|
HRGN |
hRgn; |
CRgn* |
pRgn; |
|
HMENU |
hMenu; |
CMenu* |
pMenu; |
|
HWND |
hCtl; |
CState* |
pState; |
|
HWND |
hCtl; |
CButton* |
pButton; |
|
HWND |
hCtl; |
CEdit* |
pEdit; |
|
HWND |
hCtl; |
CListBox* |
pListBox; |
|
HWND |
hCtl; |
CComboBox* |
pComboBox; |
|
HWND |
hCtl; |
CScrollBar* |
pScrollBar; |
|
HSZ |
hszStr; |
CString |
pStr; |
|
POINT |
pt; |
CPoint |
pt; |
|
SIZE |
size; |
CSize |
size; |
|
RECT |
rect; |
CRect |
rect; |
一般前缀命名规范
|
前缀 |
类型 |
实例 |
|
C |
类或结构 |
CDocument,CPrintInfo |
|
m_ |
成员变量 |
m_pDoc,m_nCustomers |
库标识符命名法
|
标识符 |
值和含义 |
|
u |
ANSI(N)或Unicode(U) |
|
d |
调试或发行:D = 调试;忽略标识符为发行。 |
动态连接库命名规范
|
名称 |
类型 |
|
_AFXDLL |
唯一的动态连接库(DLL)版本 |
|
WINAPI |
Windows所提供的函数 |
Microsoft MFC宏命名规范
|
名称 |
类型 |
|
_AFXDLL |
唯一的动态连接库(Dynamic Link Library,DLL)版本 |
|
_ALPHA |
仅编译DEC Alpha处理器 |
|
_DEBUG |
包括诊断的调试版本 |
|
_MBCS |
编译多字节字符集 |
|
_UNICODE |
在一个应用程序中打开Unicode |
|
AFXAPI |
MFC提供的函数 |
|
CALLBACK |
通过指针回调的函数 |
匈牙利命名法是一种编程时的命名规范。基本原则是:变量名=属性+类型+对象描述,其中每一对象的名称都要求有明确含义,可以取对象名字全称或名字的一部分。命名要基于容易记忆容易理解的原则。保证名字的连贯性是非常重要的。
举例来说,表单的名称为form,那么在匈牙利命名法中可以简写为frm,则当表单变量名称为Switchboard时,变量全称应该为frmSwitchboard。这样可以很容易从变量名看出Switchboard是一个表单,同样,如果此变量类型为标签,那么就应命名成lblSwitchboard。可以看出,匈牙利命名法非常便于记忆,而且使变量名非常清晰易懂,这样,增强了代码的可读性,方便各程序员之间相互交流代码。
这种命名技术是由一位能干的Microsoft程序员查尔斯·西蒙尼(Charles Simonyi) 提出的,他出生在匈牙利。在 Microsoft 公司中和他一起工作的人被教会使用这种约定。这对他们来说一切都很正常。但对那些 Simonyi 领导的项目组之外的人来说却感到很奇特,他们认为这是死板的表达方式,甚至说带有这样奇怪的外观是因为它是用匈牙利文写的。从此这种命名方式就被叫做匈牙利命名法. 据说这种命名法是一位叫 Charles Simonyi 的匈牙利程序员发明的,后来他在微软呆了几年,于是这种命名法就通过微软的各种产品和文档资料向世界传播开了。现在,大部分程序员不管自己使用什么软件进行开发,或多或少都使用了这种命名法。这种命名法的出发点是把量名变按:属性+类型+对象 描述的顺序组合起来,以使程序员作变量时对变量的类型和其它属性有直观的了解,下面是HN变量命名规范,其中也有一些是我个人的偏向:
属性部分
全局变量 g_
常量
c_
c++类成员变量
m_
静态变量
s_
类型部分
指针
p
函数
fn
无效
v
句柄
h
长整型
l
布尔
b
浮点型(有时也指文件)
f
双字
dw
字符串
sz
短整型
n
双精度浮点
d
计数
c(通常用cnt)
字符
ch(通常用c)
整型
i(通常用n)
字节
by
字
w
实型
r
无符号
u
描述部分
最大
Max
最小
Min
初始化
Init
临时变量
T(或Temp)
源对象
Src
目的对象
Dest
这里顺便写几个例子:
hwnd : h 是类型描述,表示句柄, wnd 是变量对象描述,表示窗口,所以 hwnd 表示窗口句柄;
pfnEatApple : pfn 是类型描述,表示指向函数的指针, EatApple 是变量对象描述,所以它表示指向 EatApple 函数的函数指针变量。
g_cch : g_ 是属性描述,表示全局变量,c 和 ch 分别是计数类型和字符类型,一起表示变量类型,这里忽略了对象描述,所以它表示一个对字符进行计数的全局变量。
上面就是HN命名法的一般规则。
小结:匈牙利命名法
|
| |||
| |||
|
JavaScript语言的前身叫作Livescript。自从Sun公司推出著名的Java语言之后,Netscape公司引进了Sun公司有关Java的程序概念,将自己原有的Livescript 重新进行设计,并改名为JavaScript。
JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言,有了JavaScript,可使网页变得生动。使用它的目的是与HTML超文本标识语言、Java 脚本语言一起实现在一个网页中链接多个对象,与网络客户交互作用,从而可以开发客户端的应用程序。它是通过嵌入或调入在标准的HTML语言中实现的。
JavaScript具有很多优点:
1.简单性 JavaScript是一种脚本编写语言,它采用小程序段的方式实现编程,像其它脚本语言一样,JavaScript同样已是一种解释性语言,它提供了一个简易的开发过程。它的基本结构形式与C、C++、VB、Delphi十分类似。但它不像这些语言一样,需要先编译,而是在程序运行过程中被逐行地解释。它与HTML标识结合在一起,从而方便用户的使用操作。
2.动态性 JavaScript是动态的,它可以直接对用户或客户输入做出响应,无须经过Web服务程序。它对用户的反映响应,是采用以事件驱动的方式进行的。所谓事件驱动,就是指在主页中执行了某种操作所产生的动作,就称为“事件”。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后,可能会引起相应的事件响应。
3.跨平台性 JavaScript是依赖于浏览器本身,与操作环境无关,只要能运行浏览器的计算机,并支持JavaScript的浏览器就可以正确执行。
4.节省CGI的交互时间 随着WWW的迅速发展有许WWW服务器提供的服务要与浏览者进行交流,确浏览的身份、需服务的内等等,这项工作通常由CGI/PERL编写相应的接口程序与用户进行交互来完成。很显然,通过网络与用户的交互过程一方面增大了网络的通信量,另一方面影响了服务器的服务性能。服务器为一个用户运行一个CGI时,需要一个进程为它服务,它要占用服务器的资源(如CPU服务、内存耗费等),如果用户填表出现错误,交互服务占用的时间就会相应增加。被访问的热点主机与用户交互越多,服务器的性能影响就越大。
JavaScript是一种基于客户端浏览器的语言,用户在浏览中填表、验证的交互过程只是通过浏览器对调入HTML文档中的JavaScript源代码进行解释执行来完成的,即使是必须调用CGI的部分,浏览器只将用户输入验证后的信息提交给远程的服务器,大大减少了服务器的开销。
JavaScript语言和Java语言是相关的,但它们之间的联系并不像想象中的那样紧密。
二者的区别体现在:
首先,它们是两个公司开发的不同的两个产品,Java是SUN公司推出的新一代面向对象的程序设计语言,特别适合于Internet应用程序开发;而JavaScript是Netscape公司的产品,其目的是为了扩展Netscape Navigator功能,而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言。
其次,JavaScript是基于对象的,而Java是面向对象的,即Java是一种真正的面向对象的语言,即使是开发简单的程序,必须设计对象。JavaScript是种脚本语言,它可以用来制作与网络无关的,与用户交互作用的复杂软件。它是一种基于对象和事件驱动的编程语言。因而它本身提供了非常丰富的内部对象供设计人员使用。
第三,两种语言在其浏览器中所执行的方式不一样。Java的源代码在传递到客户端执行之前,必须经过编译,因而客户端上必须具有相应平台上的仿真器或解释器,它可以通过编译器或解释器实现独立于某个特定的平台编译代码的束缚。JavaScript是一种解释性编程语言,其源代码在发往客户端执行之前不需经过编译,而是将文本格式的字符代码发送给客户,由浏览器解释执行。
第四,两种语言所采取的变量是不一样的。Java采用强类型变量检查,即所有变量在编译之前必须作声明。JavaScript中变量声明,采用其弱类型。即变量在使用前不需作声明,而是解释器在运行时检查其数据类型。
第五,代码格式不一样。Java是一种与HTML无关的格式,必须通过像HTML中引用外媒体那么进行装载,其代码以字节代码的形式保存在独立的文档中。JavaScript的代码是一种文本字符格式,可以直接嵌入HTML文档中,并且可动态装载。编写HTML文档就像编辑文本文件一样方便。
第六,嵌入方式不一样。在HTML文档中,两种编程语言的标识不同,JavaScript使用 <script>...</script> 来标识,而Java使用<applet> ... </applet>来标识。
第七,静态绑定和动态绑定。Java采用静态联编,即Java的对象引用必须在编译时的进行,以使编译器能够实现强类型检查。JavaScript采用动态联编,即JavaScript的对象引用在运行时进行检查,如不经编译则就无法实现对象引用的检查。
在目前流行的浏览器中,Netscape公司的Navigator 2.0以上版本的浏览器具都有处理JavaScript源代码的能力。JavaScript在其中实现了它的1.0版本,并在后来的Navigator 3.0实现了它的1.1版本,在现在推出的Navigator 4.0(Communicator)中,JavaScript在其中实现了它的1.2版本。
微软公司从它的Internet Explorer 3.0版开始支持JavaScript。Microsoft把自己实现的JavaScript规范叫做JScript。这个规范与Netscape Navigator浏览器中的JavaScript规范在基本功能上和语法上是一致的,但是在个别的对象实现方面还有一定的差别,这里特别需要予以注意。
JavaScript 有六种数据类型。主要的类型有 number、string、object 以及 Boolean 类型,其他两种类型为 null 和 undefined。
String 字符串类型:字符串是用单引号或双引号来说明的。(使用单引号来输入包含引号的字符串。)如:“The cow jumped over the moon.”
数值数据类型:JavaScript 支持整数和浮点数。整数可以为正数、0 或者负数;浮点数可以包含小数点、也可以包含一个 “e”(大小写均可,在科学记数法中表示“10的幂”)、或者同时包含这两项。
Boolean 类型:可能的 Boolean 值有 true 和 false。这是两个特殊值,不能用作 1 和 0。
Undefined 数据类型:一个为 undefined 的值就是指在变量被创建后,但未给该变量赋值以前所具有的值。
Null 数据类型:null 值就是没有任何值,什么也不表示。
object类型:除了上面提到的各种常用类型外,对象也是JavaScript中的重要组成部分,这部分将在后面章节详细介绍。
在 JavaScript 中变量用来存放脚本中的值,这样在需要用这个值的地方就可以用变量来代表,一个变量可以是一个数字,文本或其它一些东西。
JavaScript是一种对数据类型变量要求不太严格的语言,所以不必声明每一个变量的类型,变量声明尽管不是必须的,但在使用变量之前先进行声明是一种好的习惯。可以使用 var 语句来进行变量声明。如:var men = true; // men 中存储的值为 Boolean 类型。
变量命名:JavaScript 是一种区分大小写的语言,因此将一个变量命名为 computer 和将其命名为 Computer是不一样的。
另外,变量名称的长度是任意的,但必须遵循以下规则:
1.第一个字符必须是一个字母(大小写均可)、或一个下划线(_)或一个美元符 ($)。
2.后续的字符可以是字母、数字、下划线或美元符。
3.变量名称不能是保留字。
JavaScript所提供的语句分为以下几大类:
1.变量声明,赋值语句:var。
语法如下: var 变量名称 [=初始值]
例:var computer = 32 //定义computer是一个变量,且有初值为32。
2.函数定义语句:function,return。
语法如下: function 函数名称 (函数所带的参数)
{
函数执行部分
}
return 表达式 //return语句指明将返回的值。
例:function square ( x )
{
return x*x
}
3.条件和分支语句:if...else,switch。
if...else语句完成了程序流程块中分支功能:如果其中的条件成立,则程序执行紧接着条件的语句或语句块;否则程序执行else中的语句或语句块。 语法如下: if (条件)
{
执行语句1
}else{
执行语句2
}
例:if (result == true)
{
response = “你答对了!”
}else{
response = “你错了!”
}
分支语句switch可以根据一个变量的不同取值采取不同的处理方法。
语法如下: switch (expression)
{
case label1: 语句串1;
case label2: 语句串2;
case label3: 语句串3;
...
default: 语句串3;
}
如果表达式取的值同程序中提供的任何一条语句都不匹配,将执行default 中的语句。
4. 循环语句:for, for...in,while,break,continue。
for语句的语法如下: for (初始化部分;条件部分;更新部分)
{
执行部分...
}
只要循环的条件成立,循环体就被反复的执行。
for...in语句与for语句有一点不同,它循环的范围是一个对象所有的属性或是一个数组的所有元素。
for...in语句的语法如下: for (变量 in 对象或数组)
{
语句...
}
while语句所控制的循环不断的测试条件,如果条件始终成立,则一直循环,直到条件不再成立。
语法如下: while (条件)
{
执行语句...
}
break语句结束当前的各种循环,并执行循环的下一条语句。
continue语句结束当前的循环,并马上开始下一个循环。
5.对象操作语句:with,this,new。
with语句的语法如下:
with (对象名称){
执行语句
}
作用是这样的:如果你想使用某个对象的许多属性或方法时,只要在with语句的()中写出这个对象的名称,然后在下面的执行语句中直接写这个对象的属性名或方法名就可以了。
new语句是一种对象构造器,可以用new语句来定义一个新对象。
语法是这样的:新对象名称= new 真正的对象名
譬如说,我们可以这样定义一个新的日期对象: var curr= new Date(),然后,变量curr就具有了Date对象的属性。
this运算符总是指向当前的对象。
6.注释语句://,/*...*/。
//这是单行注释
/*这可以多行注释.... */
在JavaScript中是基于对象的编程,而不是完全的面向对象的编程。
那麽什麽是对象呢?如果你学过一些VB的编程,对这个名词一定不会陌生。通俗的说,对象是变量的集合体,对象提供对于数据的一致的组织手段,描述了一类事物的共同属性。
在JavaScript中,可以使用以下几种对象:
1.由浏览器根据web页面的内容自动提供的对象。
2.JavaScript的内置对象,如Date,Math等。
3.服务器上的固有对象。
4.用户自定义的对象。
JavaScript中的对象是由属性和方法两个基本的元素的构成的。对象的属性是指对象的背景色,长度,名称等。对象的方法是指对属性所进行的操作,就是一个对象自己所属的函数,如对对象取整,使对象获得焦点,使对象获得个随机数等等一系列操作。
举个例子来说,将汽车看成是一个对象,汽车的颜色,大小,品牌等叫做属性,而发动,刹车,拐弯等就叫做方法。
可以采用这样的方法来访问对象的属性:对象名称.属性名称,例:mycomputer.year=1996,mycomputer.owner = “me”。
可以采用这样的方法,将对象的方法同函数联系起来:对象.方法名字=函数名字或对象.属性.方法名,例:this.display=display,document.writeln(“this is method”)。
多看或多写一些程序,就会理解对象的方法和属性的含义了!各个对象的各种属性和方法,可点击参考!
事件是浏览器响应用户交互操作的一种机制,JavaScript的事件处理机制可以改变浏览器响应用户操作的方式,这样就开发出具有交互性,并易于使用的网页。
浏览器为了响应某个事件而进行的处理过程,叫做事件处理。
事件定义了用户与页面交互时产生的各种操作,例如单击超级连接或按钮时,就产生一个单击(click)操作事件。浏览器在程序运行的大部分时间都等待交互事件的发生,并在事件发生时,自动调用事件处理函数,完成事件处理过程。
事件不仅可以在用户交互过程中产生,而且浏览器自己的一些动作也可以产生事件,例:当载入一个页面时,就会发生load事件,卸载一个页面时,就会发生unload事件等。
归纳起来,必需使用的事件有三大类:
1.引起页面之间跳转的事件,主要是超连接事件。
2.事件浏览器自己引起的事件。
3.事件在表单内部同界面对象的交互。
各种JavaScript的事件可点这里参考。
CSS布局与传统表格(table)布局最大的区别在于:原来的定位都是采用表格,通过表格的间距或者用无色透明的GIF图片来控制文布局版块的间距;而现在则采用层(div)来定位,通过层的margin,padding,border等属性来控制版块的间距。
1.定义DIV
分析一个典型的定义div例子:
#sample{ MARGIN: 10px 10px 10px 10px;
PADDING:20px 10px 10px 20px;
BORDER-RIGHT: #CCC 2px solid;
BORDER-BOTTOM: #CCC 2px solid;
BORDER-LEFT: #CCC 2px solid;
BORDER-TOP: #CCC 2px solid;
BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom;
COLOR: #666;
TEXT-ALIGN: center;
LINE-HEIGHT: 150%; WIDTH:60%; }
说明如下:
层的名称为sample,在页面中用<div id="sample">就可以调用这个样式。
MARGIN是指层的边框以外留的空白,用于页边距或者与其它层制造一个间距。"10px 10px 10px 10px"分别代表"上右下左"(顺时针方向)四个边距,如果都一样,可以缩写成"MARGIN: 10px;"。如果边距为零,要写成"MARGIN: 0px;"。注意:当值是零时,除了RGB颜色值0%必须跟百分号,其他情况后面可以不跟单位"px"。MARGIN是透明元素,不能定义颜色。
PADDING是指层的边框到层的内容之间的空白。和margin一样,分别指定上右下左边框到内容的距离。如果都一样,可以缩写成"PADDING:0px"。单独指定左边可以写成"PADDING-LEFT: 0px;"。PADDING是透明元素,不能定义颜色。
BORDER是指层的边框,"BORDER-RIGHT: #CCC 2px solid;"是定义层的右边框颜色为"#CCC",宽度为"2px",样式为"solid"直线。如果要虚线样式可以用"dotted"。
BACKGROUND是定义层的背景。分2级定义,先定义图片背景,采用"url(../images/bg_logo.gif)"来指定背景图片路径;其次定义背景色"#FEFEFE"。"no-repeat"指背景图片不需要重复,如果需要横向重复用"repeat-x",纵向重复用"repeat-y",重复铺满整个背景用"repeat"。后面的"right bottom;"是指背景图片从右下角开始。如果没有背景图片可以只定义背景色BACKGROUND: #FEFEFE
COLOR用于定义字体颜色,上一节已经介绍过。
TEXT-ALIGN用来定义层中的内容排列方式,center居中,left居左,right居右。
LINE-HEIGHT定义行高,150%是指高度为标准高度的150%,也可以写作:LINE-HEIGHT:1.5或者LINE-HEIGHT:1.5em,都是一样的意思。
WIDTH是定义层的宽度,可以采用固定值,例如500px,也可以采用百分比,象这里的"60%"。要注意的是:这个宽度仅仅指你内容的宽度,不包含margin,border和padding。但在有些浏览器中不是这么定义的,需要你多试试。
下面是这个层的实际表现:
我们可以看到边框是2px的灰色,背景图片在右下没有重复,内容距离上和左边框20px,内容居中,一切和预想的一样。hoho,虽然不好看,但它是最基本的,掌握了它,你就已经学会一半的CSS布局技术了。就是这样,不算难吧!(另一半是什么?另一半是层与层之间的定位。我会在后面逐步讲解。)
2.CSS2盒模型
自从1996年CSS1的推出,W
3.辅助图片一律用背景处理
用XHTML+CSS布局,有一个技术一开始让你不习惯,应该说是一种思维方式与传统表格布局不一样,那就是:所有辅助图片都用背景来实现。类似这样:
BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom;
尽管可以用<img>直接插在内容中,但这是不推荐的。这里的"辅助图片"是指那些不是作为页面要表达的内容的一部分,而仅仅用于修饰、间隔、提醒的图片。例如:相册中的图片、图片新闻中的图片,上面的3d盒模型图片都属于内容的一部分,它们可以用<img>元素直接插在页面里,而其它的类似logo,标题图片,列表前缀图片都必须采用背景方式或者其他CSS方式显示。
这样做的原因有2点:
·将表现与结构彻底相分离(参考阅读另一篇文章:《理解表现与结构相分离》),用CSS控制所有的外观表现,便于改版。
·使页面更具有易用性,更有亲和力。例如:盲人使用屏幕阅读机,用背景技术实现的图片就不会被朗读出来。
最新评论