结庐在人境,而无车马喧。 问君何能尔?心远地自偏。 采菊东篱下,悠然见南山。 山气日夕佳,飞鸟相与还。 此中有真意,欲辨已忘言。
スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
列表项目效果的CSS定义
*list-style-type: circle(可换成自己想要的样式); 列表项目样式

  disc :     CSS1 实心圆

  circle :    CSS1 空心圆

  square :    CSS1 实心方块

  decimal :    CSS1 阿拉伯数字

  lower-roman :  CSS1 小写罗马数字

  upper-roman : CSS1 大写罗马数字

  lower-alpha : CSS1 小写英文字母

  upper-alpha : CSS1 大写英文字母

  none :     CSS1 不使用项目符号

  armenian :   CSS2 传统的亚美尼亚数字

  cjk-ideographic:CSS2 浅白的表意数字

  georgian :   CSS2 传统的乔治数字

  lower-greek :  CSS2 基本的希腊小写字母

  hebrew : CSS2 传统的希伯莱数字

  hiragana : CSS2 日文平假名字符

  hiragana-iroha: CSS2 日文平假名序

  katakana : CSS2 日文片假名字符

  katakana-iroha: CSS2 日文片假名序号

  lower-latin : CSS2 小写拉丁字母

  upper-latin : CSS2 大写拉丁字母

  *list-style-image: url(images/disc.gif); 用图像disc.gif代替列表项目显示

  *list-style-position : outside | inside

  outside:  列表项目标记放置在文本以外,且环绕文本不根据标记对齐

  inside :  列表项目标记放置在文本以内,且环绕文本根据标记对齐

  hr{border:1px dashed #86BCD4; height:1;}

在HTML代码中,还有一些特殊的如水平条hr,也可以在风格管理中加上定义,以更改其默认的显示效果:

  水平条效果的CSS定义

  BORDER-BOTTOM-STYLE: dotted;

  BORDER-LEFT-STYLE: dotted;

  BORDER-RIGHT-STYLE: dotted; BORDER-TOP-STYLE: dotted;

  height:1;

  width:100%;

  align:left;

  color:#86BCD4;

  Shade:no;

  水平条虚线效果定义

  border:1px dashed #86BCD4; height: 1;
スポンサーサイト
CSS+Div布局总结
xml(extensible Markup Language)的出现,结构化文档和数据有了一个通用的、科适应的格式,不仅仅应用在web上,也可以应用在任何地方。标准称为可能。
XHTML是The Extensible HyperText Markup Language可扩展标识语言的缩写。在HTML4.0的基础上,用XML的规则对其进行扩展,得到了XHTML。它实现HTML向XML的过渡。
CSS是Cascading Style Sheets层叠样式表的缩写。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构,使站点的访问及维护更加容易。

1)为页面添加正确的DOCTYPE
DOCTYPE是document type的简写。主要用来说明你用的XHTML或者HTML是什么版本。浏览器根据你 DOCTYPE定义的DTD(文档类型定义)来解释页面代码。
XHTML1.0提供了三种DOCTYPE可选择:

2)设定一个名字空间(Namespace)
直接在DOCTYPE声明后面添加如下代码:
html XMLns="http://www.w3.org/1999/xhtml" >
一个namespace是收集元素类型和属性名字的一个详细的DTD,namespace声明允许你通过一个在线地址指向来识别你的namespace。只要照样输入代码就可以。

3)声明你的编码语言
为了被浏览器正确解释和通过标识校验,所有的XHTML文档都必须声明它们所使用的编码语言。代码如下:
meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
这里声明的编码语言是简体中文GB2312,你如果需要制作繁体内容,可以定义为BIG5

(1)过渡型(Transitional )--使用非常普遍。
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

(2)严格型(Strict )
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1 -strict.dtd">

(3)框架型(Frameset )
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

4)用小写字母书写所有的标签
XML对大小写是敏感的,所以,XHTML也是大小写有区别的。所有的XHTML元素和属性的名字都必须使用小写。否则你的文档将被W3C校验认为是无效的。

5)为图片添加 alt 属性
为所有图片添加alt属性。alt属性指定了当图片不能显示的时候就显示供替换文本,这样做对正常用户可有可无,但对纯文本浏览器和使用屏幕阅读机的用户来说是至关重要的。只有添加了alt属性,代码才会被W3C正确性校验通过。注意的是我们要添加有意义的alt属性,象下面这样的写法毫无意义:
img src="logo.gif" alt="logo.gif">
正确的写法:
img src="logo.gif" alt="文字">

6)给所有属性值加引号
在HTML中,你可以不需要给属性值加引号,但是在XHTML中,它们必须被加引号。还必须用空格分开属性。
例: hr width="75%"size="7"/> 这也是不正确的

7)关闭所有的标签
在XHTML中,每一个打开的标签都必须关闭。空标签也要关闭,在标签尾部使用一个正斜杠"/"来关闭它们自己。例如:
br />

8)收藏夹小图标
例如:首先制作一个16x16的icon图标,命名为favicon.ico,放在根目录下。然后将下面的代码嵌入head区:
link rel="icon" href="/favicon.ico" type="image/x-icon" />
link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

9)用CSS定义元素外观
用css布局的一个好处是可以批量对页面进行修改,它能将文档结构和表现层分离开来,减轻工作量和服务器的负荷,加站点的扩展能力和应用。
dreamweaver为我们提供了非常方便的方法去编写css.

css是不区别空格和大小写的,下面是一些基础的归纳

(1)颜色值
颜色值可以用RGB值写,例如:color : rgb(255,0,0),也可以用十六进制写,就象上面例子color:#FF0000。如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。

(2)定义字体
web标准推荐如下字体定义方法:
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
Lucida Grande字体适合Mac OS X;
Verdana字体适合所有的Windows系统;
Lucida适合UNIX用户
"宋体"适合中文简体用户;
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;

(6)类别选择器
在CSS里用一个点开头表示类别选择器定义,例如:
.14px {color : #f60 ;font-size:14px ;}
在页面中,用class="类别名"的方法调用:
span class="14px">14px大小的字体
这个方法比较简单灵活,可以随时根据页面需要新建和删除。

(7)定义链接的样式
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
a:active {font-weight : bold ;text-decoration : none ;color : #F90 ;}
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。

(8)组合使用选择器创造精致的设计效果
用漂亮的图案代替普通无序列表前沉闷的点。站点http://marine.happycog.com/
先用css规则告诉类别属性inventory的无序列表。
ul.inventory{
list-style:disc url(/images/common/lister2.gig) inside;}
它的调用标记:
ul class="inventory">
li> a href="/angelfish">Angelfish(67 items)
li> a href="/angeld">Angels/Frogfish(35 items)
li> a href="/anthias">Angelfish(5526 items)
li> a href="/basslets">Angelfish(15 items)
ul>

(9)缩写是按照顺时针的顺序
margin:25px 0 25px 0;

(10)行高
line-height:150% 说明行距为正常的150%

10)结构化代码div(division)、id、class
用它们来书写紧凑的xhtml,更明智的使用css.

(1)结构化id标签,与class的有区别:
如果你的属性页面包含了一个div,它的id为"content",它就不可能有另外一个div或者其他元素拥有相同的名字。相反,class属性可以在意个页面中一次又一次地使用。

(2)id的规则
一个id值必须用一个字母或者下划线开头,它不能用一个数字进行开头,然后跟随字母、数字和下划线。空格和连字符-都是不允许的。

11)制作好的网站可以到w3c进行标准校正
http:validator.w3.org
http://jigsaw.w3.org/css-validator/

(3)群选择器
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
p, td, li { font-size : 12px ; }

(4)派生选择器
可以使用派生选择器给一个元素里的子元素定义样式,例如这样:
li strong { font-style : italic; font-weight : normal;}
就是给li下面的子元素strong定义一个斜体不加粗的样式。

(5)id选择器
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
div id="menubar">

然后在样式表里这样定义:
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。

id选择器也同样支持派生,例如:
#menubar p { text-align : right; margin-top : 10px; }
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
CSS hack浏览器兼容
一、HACK
以下两种方法几乎能解决现今所有HACK.

1, !important

随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)
style>
#wrapper
{
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */
}
/style>

2, IE6/IE77对FireFox

*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.
style>
#wrapper
{
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 fixed */
*+html #wrapper { width: 60px;} /* ie7 fixed, 注意顺序 */
}
/style>

注意:
*+html 对IE7的HACK 必须保证HTML顶部有如下声明:
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

二、万能 float 闭合

关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup]
将以下代码加入Global CSS 中,给需要闭合的div加上 class="clearfix" 即可,屡试不爽.

style>
/* Clear Fix */

.clearfix:after
{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix
{
display:inline-block;
}
/* Hide from IE Mac */
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
/style>

三、其他兼容技巧

1, FF下给 div 设置 padding 后会导致 width 和 height 加, 但IE不会.(可用!important解决)
2, 居中问题.
1).垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.)
2).水平居中. margin: 0 auto;(当然不是万能)
3, 若需给 a 标签内内容加上 样式, 需要设置 display: block;(常见于导航标签)
4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题.
5, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)
6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.
7, 关于手形光标. cursor: pointer. 而hand 只适用于 IE.

===================================================================

1 针对firefox ie6 ie7的css样式
现在大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,
但是ie7对!important可以正确解释,会导致页面没按要求显示!找到一个针
对IE7不错的hack方式就是使用“*+html”,现在用IE7浏览一下,应该没有问题了。
现在写一个CSS可以这样:
#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE7 */
那么在firefox下字体颜色显示为#333,IE6下字体颜色显示为#666,IE7下字体颜色显示为#999。

2 css布局中的居中问题

主要的样式定义如下:
body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
说明:
首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中;对于IE这样设定就已经可以了。
但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
需要说明的是,如果你想用这个方法使整个页面要居中,建议不要套在一个DIV里,你可以依次拆出多个div,
只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。

3 盒模型不同解释

#box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0}
#box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}

4 浮动ie产生的双倍距离

#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}
这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,...不可控制(内嵌元素);
#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果 diplay:table;
IE不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使。这样问题就大了,如果只用宽度和高度,
正常的浏览器里这两个值就不会变,如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。
比如要设置背景图片,这个宽度是比较重要的。要解决这个问题,可以这样:
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

6 页面的最小宽度

min-width是个非常方便的CSS命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正确。但IE不认得这个,
而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用,可以把一个
放到 标签下,然后为div指定一个类:
然后CSS这样设计:
#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}
第一个min-width是正常的;但第2行的width使用了Javascript,这只有IE才认得,这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

7 清除浮动

.hackbox{ display:table; //将对象作为块元素级的表格显示}或者.hackbox{ clear:both;}
或者加入:after(伪对象),设置在对象后发生的内容,通常和content配合使用,IE不支持此伪对象,非Ie 浏览器支持,
所 以并不影响到IE/WIN浏览器。这种的最麻烦的......#box:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden;}

8 DIV浮动IE文本产生3象素的bug

左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px的间距.
#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //这句是关键}
HTML代码
div id="box">
div id="left">
/div>
div id="right">
/div>
/div>

9 属性选择器(这个不能算是兼容,是隐藏css的一个bug)

p[id]{}div[id]{}
这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用
属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

10 IE捉迷藏的问题

当div应用复杂的时候每个栏中又有一些链接,DIV等这个时候容易发生捉迷藏的问题。
有些内容显示不出来,当鼠标选择这个区域是发现内容确实在页面。
解决办法:对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。

11 高度不适应

高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节,特别是当内层对象使用
margin 或paddign 时。
例:
div id="box">
p>p对象中的内容 /p>
/div>
CSS:#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
解决方法:在P对象上下各加2个空的div对象CSS代码:.1{height:0px;overflow:hidden;}或者为DIV加上border属性。
43个你应当避免的Web设计错误
这是一篇关于网站易用性的文章,作者以亲身体会讲述了43条网站设计中常犯的错误,而无疑这些错误会大大影响网站的可用性。如今网站易用性已成为一种趋势,但纵观国内的各大网站,似乎易用性并未成为设计者们广泛理解的概念。

1. 用户必须在几秒钟知道网站是做什么的。
注意力是因特网上最有价值的货币。 如果访问者无法在几秒钟之内得知你的网站的方向,他很有可能转而访问其他网站。 你必须迅速地告诉访问者为什么要在你的网站上花费时间。

2. 让网站易于速读。
因特网不是书,因此没必要使用大段的文字。 也许我访问你的网站时我正在忙于其他工作,我不得不迅速读完所有内容。 项目符号、标题、副标题、列表,这些都能帮助读者迅速找到他想要的内容。

3. 不要使用难于阅读的花哨字体。
当然,某些字体可以让网站精彩纷呈。 不过它们容易阅读吗?如果你的主要目的是传递信息并让读者阅读, 你应该让阅读过程舒服些。

4. 不要用小字体。
如上一条所述,你得让读者阅读时感到舒服。 虽然我的Firefox有放大功能,但如果必须放大才能看清一个网站的话, 我就再也不会去访问它了。

5. 不要打开新浏览器窗口。
我的第一个网站曾经经常这么做。 原因很简单,在新窗口中打开外部链接,用户就不必离开我的网站。 错!让用户决定如何打开链接,否则浏览器上大大的后退按钮就没必要存在了。 不用担心用户离开你的网站,在必要的时候他们会回来的。

6. 不要改变用户的浏览器窗口大小。
用户有权控制自己的浏览器。 如果你改变窗口大小,你会在他们面前失去信用。

7. 不必要时不要让用户注册。
直白地讲,我上网是为了获取信息,不是为了别的。 不要强迫我注册并留下我的电子邮件以及其他信息,除非特别必要(比如你 能提供的消息非常有价值)。

8. 不要在未经访问者同意的情况下为他们订阅电子杂志。
不要在访问者注册时自动给他们订阅电子杂志。 不请自来的邮件可不是个交朋友的好办法。

9. 不要过多使用Flash。
Flash不仅会加网站的读取时间, 过度使用甚至会让访问者感到不快。只有当静态页面无法表达你的意图时 才使用Flash。

10. 不要播放音乐。
早些年Web开发者都喜欢在网站中集成音乐,结果他们失败了。 记住,永远不要使用音乐。


11. 当你必须使用声音时,让用户启动它。
有时你必须使用声音文件, 比如你要给用户发送一份演讲,或者你的教程包含声音。这没问题,但要让用户来控制, 让用户点击“播放”按钮,别在打开网页的瞬间播放声音。

12. 不要让标志弄乱你的网站。
社交网络和社区的标志会让你的网站看起来十分不专业。 就算是奖章和荣誉等标志也应当放到“关于我们”页面上。

13. 不要使用“点击进入”页面。
用户访问到内容的步骤越少越好。

14. 注意要留下联系方式。
最差的莫过于网站没有留下联系方式的了。 不仅对访问者不友好,而且对你也没好处,你会错过珍贵的反馈信息。

15. 不要影响“后退”按钮的动作。
这是网站可用性的最基本的理念。 在任何情况下都不能影响“后退”按钮的动作。比如,打开新窗口会破坏它, 某些Javascript链接也会破坏它。

16. 不要用闪烁的文字。
除非你的访问者来自1996年,否则别用闪烁文字。

17. 避免复杂的URL结构。
一个简单的基于关键字的URL结构不仅能提高你的搜索引排名, 还能让访问者在访问之前了解网页内容。

18. 用CSS布局,不要使用表格。
HTML表格曾经被用于页面布局, 但没有必要拘泥于此,尤其是在CSS诞生之后。CSS更快、更稳定, 并能提供更多的特性。

19. 保证用户可以搜索整个网站。
搜索引带来因特网革命的原因,就是 它使得信息查找变得十分容易。别在你的网站上唱反调。

20. 避免使用下拉菜单。
用户应当直观地看到所有导航选项。 下拉菜单会造成混乱,并且会隐藏访问者真正要找的信息。

21. 使用文字做导航栏。
文字导航不仅速度快,而且更稳定。 例如,有些用户上网时会关闭图片。

22. 如果需要链接到PDF文档,一定要注明。
你一定有过点击链接之后, 浏览器就像死掉一样等待Acrobat Reader启动,只为了打开一个(你不想看的)PDF? 这是个不小的麻烦,因此一定要在指向PDF的链接旁特别说明,使用户可以采取相应措施。

23. 不要用多种版本让访问者迷惑。
你想用哪种带宽?56Kbps?128Kbps?Flash版还是HTML版? 嗨,我只想快点看到内容!

24. 不要在内容中混合广告。
在内容中混合广告(如Adsense)也许会加短期内的广告点击率, 但从长远角度来看,这会减少网站的人气。愤怒的用户会离开的。

25. 使用简单的导航结构。
过犹不及。这个规则通常适用于人和选择上。 确保你的网站的导航结构单纯简洁。你不想让用户在查找信息时遇到麻烦吧?

26. 避免内容介绍。
别强迫用户在访问到真正内容之前看某些东西。 这很令人愤怒,除非你提供的信息是用户必须的,否则他不会等下去。

27. 不要使用FrontPage。
这一点也适用于其他廉价的HTML编辑器。 它们让页面设计变得更方便,但其输出结果将会非常低级,不兼容不同的浏览器, 并且会包含错误。

28. 保证你的网站兼容大部分浏览器。
浏览器并不完全相同,在解释CSS和其他 语言的方法也相差甚远。不管你是否愿意,你应当让网站兼容市面上的常用浏览器, 否则你会永远地失去部分读者。

29. 保证在链接上添加有意义的文字。
以前我经常犯这个错误。告诉人们“点击这里”很容易, 但这没有效果。要保证链接文字有意义。它使得访问者知道点击链接之后将出现什么, 也能为链接指向的外部站点带来SEO效果。

30. 不要在状态栏中隐藏链接。
用户还必须能在状态栏中看到链接指向哪里。 如果你隐藏了链接(即使是由于其他原因),那么你也会丧失信誉。

31. 使链接可见。
访问者应能轻易识别出哪些能点击,哪些不能。 确保链接的颜色有强烈的对比(标准的蓝色通常是最好的)。可能的话, 最好加上下划线。

32. 不要在普通文本上添加下划线或者颜色。
除非特别需要,否则不要为普通文字添加下划线。 就像用户需要识别哪些能点击一样,他们不应当将本不能点击的文字误认为能够点击。

33. 改变访问过的链接的颜色。
这一点对于提高网站可用性非常重要。 改变访问过的链接颜色有助于用户在网站中定位,确保他们不会不经意地 访问同一页面两次。

34. 不要使用动态GIF。
除非你有需要动画的广告条,否则避免使用动态GIF。 它会使网站看上去很业余,并且会分散访问者的注意力。

35. 给图像添加ALT和TITLE属性。
ALT和TITLE不仅会带来SEO效果,而且 对盲人有很大帮助。

36. 不要用令人不快的颜色。
如果用户连续阅读10分钟后觉得头疼, 那么你最好选择别的配色方案。根据你的目的决定设计(例如,创造一种氛围 使得用户将注意力放在网站内容上,等等)。

37. 不要弹出窗口。
这一点涉及任何种类的弹出窗口。即使用户要求使用, 弹出窗口也不宜使用,因为它会被弹出窗口拦截功能阻拦。

38. 不要使用Javascript做链接。
远离那些点击之后执行一小段Javascript的链接, 它们经常给用户带来麻烦。

39. 在页面底部放置有意义的链接。
访问者在找不到所需信息时通常会滚动到页面最底端。 作为最后的手段,你应当在页面底部放一个“联系我们”页面的链接。

40. 避免网页过长。
如果用户老是需要滚动才能看到内容,他通常会采取的做法是 跳过它们。如果你的网站正好如此,那么应当缩短内容并优化导航结构。

41. 禁止使用水平滚动条。
虽然垂直滚动条可以接受,但水平滚动条却远非如此。 现在的流行分辨率是1024x768,要确保网站能容纳在其中。

42. 禁止出现拼写或语法错误。
这不是网站设计的错,但却是影响网站整体质量的重要因素。 确保链接和文字中没有拼写或语法错误。

43. 如果你使用图片认证,要保证能看清其字符。
有些网站将图片认证作为对抗垃圾评论的方法, 或是在注册表单上使用。其中有个问题就是,用户经常需要叫上全家人来讨论图片上到底是什么字母。
常用CSS缩写语法总结
  使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则如下:

  颜色
  16进制的色彩值,如果每两位的值相同,可以缩写一半,例如:
  #000000可以缩写为#000;#336699可以缩写为#369;

  盒尺寸
  通常有下面四种书写方法:
  property:value1; 表示所有边都是一个值value1;
  property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2
  property:value1 value2 value3; 表示top的值是value1,right和left的值是value2,bottom的值是value3
  property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left
  方便的记忆方法是顺时针,上右下左。
具体应用在margin和padding的例子如下:
  margin:1em 0 2em 0.5em;

  边框(border)
  边框的属性如下:
  border-width:1px;
  border-style:solid;
  border-color:#000;
  可以缩写为一句:border:1px solid #000;
  语法是border:width style color;

  背景(Backgrounds)
  背景的属性如下:
  background-color:#f00;
  background-image:url(background.gif);
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-position:0 0;
  可以缩写为一句:background:#f00 url(background.gif) no-repeat fixed 0 0;
  语法是background:color image repeat attachment position;
  你可以省略其中一个或多个属性值,如果省略,该属性值将用浏览器默认值,默认值为:
  color: transparent
  image: none
  repeat: repeat
  attachment: scroll
  position: 0% 0%

  字体(fonts)
  字体的属性如下:
  font-style:italic;
  font-variant:small-caps;
  font-weight:bold;
  font-size:1em;
  line-height:140%;
  font-family:"Lucida Grande",sans-serif;
  可以缩写为一句:font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;
  注意,如果你缩写字体定义,至少要定义font-size和font-family两个值。

  列表(lists)
  取消默认的圆点和序号可以这样写list-style:none;,
  list的属性如下:
  list-style-type:square;
  list-style-position:inside;
  list-style-image:url(image.gif);
  可以缩写为一句:list-style:square inside url(image.gif);

  1. css 字体简写规则
  当使用css定义字体时你可能会这样做:
  font-size: 1em;
  line-height: 1.5em;
  font-weight: bold;
  font-style: italic;
  font-variant: small-caps;
  font-family: verdana,serif;
  事实上你可以简写这些属性:
  font: 1em/1.5em bold italic small-caps verdana,serif
  现在好多了吧,不过有一点要注意:使用这一简写方式你至少要指定 font-size 和 font-family 属性,其他的属性(如 font-weight,font-style,font-varient)如未指定将自动使用默认值。

  2. 同时使用两个class
  通常我们只为属性指定一个class,但这并不等于你只能指定一个,实际上,你想指定多少就可以指定多少,例如:
p class="text side"... /p
  通过同时使用两个 class(使用空格而不是逗号分割),这个段落将同时应用两个 class 中制定的规则。如果两者中有任何规则重叠,那么后一个将获得实际的优先应用。

  3. css中边框(border)的默认值
  当编写一条边框的规则时,你通常会指定颜色、宽度以及样式(任何顺序均可)。例如:border: 3px solid #000(3像素宽的色实线边框),其实这个例子中唯一需要指定的值只是样式。假如你指定样式为实线(solid),那么其余的值将使用默认值:默认的宽度为中等(相当于3到4像素);默认的颜色为边框里的文字颜色。如果这正是你想要的效果,你完全可以不在css里指定。

  4. !important会被IE忽略
  在 css 中,通常最后指定的规则会获得优先权。然而对除了IE以外的浏览器来说,任何后面标有 !important 的语句将获得绝对的优先权,例如:margin-top: 3.5em !important; margin-top: 2em。
  除IE以外所有浏览器中的顶部边界都是3.5em,而IE为2em,有时候这一点很有用,尤其在使用相对边界值时(就像这个例子),可以显示出IE与其他浏览器的细微差别。(很多人可能还注意到了css的子选择器也是会被IE忽略的)

  5. 图片替换的技巧
  使用标准的html而不是图片来显示文字通常更为明智,除了加快下载还可以获得更好的可用性。但是如果你决心使用访问者的机器中可能没有的字体时,你只能选择图片。
  举例来说,你想在每一页的顶部使用“Buy widgets”的标题,但你同时又希望这是能被搜索引发现的,为了美观你使用了少见的字体那么你就得用图片来显示
  这样当然没错,但是有证据显示搜索引对真实文本的重视远超过alt文本(因为已经有太多网站使用alt文本充当关键字),因此,我们得用另一种方法:h1 span Buy widgets /span /h1 那你的漂亮字体怎么办呢?下面的css可以帮上忙:
  h1 {
  background: url(widget-image.gif) no-repeat;
  }
  h1 span {
  position: absolute;
  left:-2000px;
  }
  现在你既用上了漂亮的图片又很好的隐藏了真实文本——借助css,文本被定位于屏幕左侧-2000像素处。

  6. css盒模型hack的另一选择
  css盒模型hack被用来解决IE6之前的浏览器显示问题,IE6.0之前的版本会把某元素的边框值和填充值包含在宽度之内(而不是加在宽度值上)。例如,你可能会使用以下css来指定某个容器的尺寸:
  #box {
  width: 100px;
  border: 5px;
  padding: 20px;
  }
  然后在html中应用:div id="box"... /div,盒的总宽度在几乎所有浏览器中为150像素(100像素宽度+两条5像素的边框+两个20像素的填充),唯独在IE6之前版本的浏览器中仍然为100像素(边框值和填充值包含在宽度值中),盒模型的hack正是为了解决这一问题,但是也会带来麻烦。更简单的办法如下:
  css:
  #box {
  width: 150px;
  }
  #box div {
  border: 5px;
  padding: 20px;
  }

  html:
div id="box" div... /div /div
  这样一来在任何浏览器中盒的总宽度都将是150像素。

  7. 将块元素居中
  假设你的网站使用了固定宽度的布局,所有的内容置于屏幕中央,可以使用以下的css:
  #content {
  width: 700px;
  margin: 0 auto;
  }
  你可以把html的body之内任何项目置于中,该项目将自动获得相等的左右边界值从而保证了居中显示。不过,这在IE6之前版本的浏览器中仍然有问题,将不会居中,因此必须修改如下:
  body {
  text-align: center;
  }
  #content {
  text-align: left;
  width: 700px;
  margin: 0 auto;
  }
  对body的设定将导致主体内容居中,但是连所有的文字也居中了,这恐怕不是你想要的效果,为此#content 的div还要指定一个值:text-align: left。

  8. 使用css实现垂直居中
  垂直居中对表格来说是小菜一碟,只需指定单元格为 vertical-align: middle 即可,但这在css布局中不管用。假设你将一个导航菜单的高度设为2em,然后在css中指定垂直对齐的规则,文字还是会被排到盒的顶部,根本没有什么区别。
  要解决这一问题,只需将盒的行高设为与盒的高度相同即可,以这个例子来说,盒高2em,那么只需在css中再加入一条:line-height: 2em 就可实现垂直居中了!

  9. 容器内的css定位
  css的最大优点之一就是可以将对象定位在文档的任何位置,同样的也可以将对象在某容器内进行定位。只需要为该容器添加一条css规则:
  #container {
  position: relative;
  }
  则容器内的任何元素的定位都是相对于该容器的。假定你使用以下html结构:
  div id="container" div id="navigation" ... /div /div
  如果想将navigation定位在容器内离左边界30像素,离顶部5像素,可以使用以下css语句:
  #navigation {
  position: absolute;
  left: 30px;
  top: 5px;
  }

  10. 延伸至屏幕底部的背景色
  css的缺点之一是缺乏垂直方向的控制,从而导致了一个表格布局不会遇到的问题。假设你在页面的左侧设定了一列用于放置网站的导航。页面为白色背景,但你希望导航所在的列为蓝色背景,使用以下css即可:
  #navigation {
  background: blue;
  width: 150px;
  }
  问题在于导航项不会一直延伸到页面的底部,自然它的背景色也不会延伸到底部。于是左列的蓝色背景在页面上被半路截断,浪费了你的一番设计。怎么办呢?很不幸我们现在只能用欺骗的办法,即将body的背景指定为与左列同颜色同宽度的图片,css如下:
  body {
  background: url(blue-image.gif) 0 0 repeat-y;
  }
  背景图应为宽150像素的蓝色图片。这一办法的缺点是没法使用em来指定左列的宽度,当用户改变文字的大小导致内容的宽度扩张时,背景色的宽度不会随之改变。到写这篇文章为止这是对这类问题的唯一解决办法,因此你只能为左列使用像素值来获得能够自动延伸的不同的背景色。
常用的CSS命名规则
  (一)

  头:header
  内容:content/container
  尾:footer
  导航:nav
  侧栏:sidebar
  栏目:column
  页面外围控制整体布局宽度:wrapper
  左右中:left right center
  登录条:loginbar
  标志:logo
  广告:banner
  页面主体:main
  热点:hot
  新闻:news
  下载:download
  子导航:subnav
  菜单:menu
  子菜单:submenu
  搜索:search
  友情链接:friendlink
  页脚:footer
  版权:copyright
  滚动:scroll
  内容:content
  标签页:tab
  文章列表:list
  提示信息:msg
  小技巧:tips
  栏目标题:title
  加入:joinus
  指南:guild
  服务:service
  注册:regsiter
  状态:status
  投票:vote
  合作伙伴:partner

  (二)注释的写法:

  /* Footer */
  内容区
  /* End Footer */

  (三)id的命名:

  (1)页面结构
  容器: container
  页头:header
  内容:content/container
  页面主体:main
  页尾:footer
  导航:nav
  侧栏:sidebar
  栏目:column
  页面外围控制整体布局宽度:wrapper
  左右中:left right center

  (2)导航
  导航:nav
  主导航:mainbav
  子导航:subnav
  顶导航:topnav
  边导航:sidebar
  左导航:leftsidebar
  右导航:rightsidebar
  菜单:menu
  子菜单:submenu
  标题: title
  摘要: summary

  (3)功能
  标志:logo
  广告:banner
  登陆:login
  登录条:loginbar
  注册:regsiter
  搜索:search
  功能区:shop
  标题:title
  加入:joinus
  状态:status
  按钮:btn
  滚动:scroll
  标签页:tab
  文章列表:list
  提示信息:msg
  当前的: current
  小技巧:tips
  图标: icon
  注释:note
  指南:guild
  服务:service
  热点:hot
  新闻:news
  下载:download
  投票:vote
  合作伙伴:partner
  友情链接:link
  版权:copyright

  (四)class的命名:

  (1)颜色:使用颜色的名称或者16进制代码,如
  .red { color: red; }
  .f60 { color: #f60; }
  .ff8600 { color: #ff8600; }

  (2)字体大小,直接使用"font+字体大小"作为名称,如
  .font12px { font-size: 12px; }
  .font9pt {font-size: 9pt; }

  (3)对齐样式,使用对齐目标的英文名称,如
  .left { float:left; }
  .bottom { float:bottom; }

  (4)标题栏样式,使用"类别+功能"的方式命名,如
  .barnews { }
  .barproduct { }

  注意事项::

  1.一律小写;
  2.尽量用英文;
  3.不加中杠和下划线;
  4.尽量不缩写,除非一看就明白的单词.

  主要的 master.css
  模块 module.css
  基本共用 base.css
  布局,版面 layout.css
  主题 themes.css
  专栏 columns.css
  文字 font.css
  表单 forms.css
  补丁 mend.css
  打印 print.css
初学网页制作:CSS特点及加入网页的四种方法 
 CSS(Cascading Stylesheets,层叠样式表)是一种制作网页的新技术,现在已经为大多数的浏览器所支持,成为网页设计必不可少的工具之一。使用CSS能够简化网页的格式代码,加快下载显示的速度,也减少了需要上传的代码数量,大大减少了重复劳动的工作量。尤其是当你面对的是有数百个网页的站点时,CSS简直象是神对我们的恩赐!

  前言

  CSS(Cascading Stylesheets,层叠样式表)是一种制作网页的新技术,现在已经为大多数的浏览器所支持,成为网页设计必不可少的工具之一。

  W3C(The World Wide Web Consortium)把动态HTML(Dynamic HTML)分为三个部分来实现:脚本语言(包括JavaScript、Vbscript等)、支持动态效果的浏览器(包括Internet Explorer、Netscape Navigator等)和CSS样式表。

层叠样式表的特点

  且不说过去的网页缺少动感,就是在网页内容的排版布局上也有很多困难,如果不是专业人员或特别有耐心的人,很难让网页按自己的构思和创意来显示信息。即便是掌握了HTML语言精髓的人也要通过多次地测试,才能驾驭好这些信息的排版,过程十分漫长和痛苦。为了Internet的发展,让更多人早日踏足这个多姿多彩的世界,新的HTML辅助工具呼之欲出。
  样式表就是在这种需求下诞生的,它首先要做的是为网页上的元素精确地定位,可以让网页设计者象导演一样,轻易地控制由文字、图片组成的演员们,在网页这个舞台上按剧本要求好好地表演。
  其次,它把网页上的内容结构和格式控制相分离。浏览者想要看的是网页上的内容结构,而为了让浏览者更好地看到这些信息,就要通过格式控制来帮忙了。以前两者在网页上的分布是交错结合的,查看修改很不方便,而现在把两者分开就会大大方便网页的设计者。内容结构和格式控制相分离,使得网页可以光由内容构成,而将所有网页的格式控制指向某个CSS样式表文件。这样一来的好出表现在两个方面:
第一,简化了网页的格式代码,外部的样式表还会被浏览器保存在缓存里,加快了下载显示的速度,也减少了需要上传的代码数量(因为重复设置的格式将被只保存一次)。
第二,只要修改保存着网站格式的CSS样式表文件就可以改变整个站点的风格特色,在修改页面数量庞大的站点时,显得格外有用。避免了一个一个网页的修改,大大减少了重复劳动的工作量,当你面对的是有数百个网页的站点时,CSS简直象是神对我们的恩赐!^_^   

添加层叠样式表的方法:我们为网页添加样式表的方法有四种。
  
1.最简单的方法是直接添加在HTML的标识符(tag)里:   
< Tag style=”properties”>网页内容< /tag>   
举个例子:   
< p style=”color: blue; font-size: 10pt”>CSS实例< /p>   
代码说明:   
用蓝色显示字体大小为10pt的“CSS实例”。
尽管使用简单、显示直观,但是这种方法不怎么常用,因为这样添加无法完全发挥样式表的优势“内容结构和格式控制分别保存”。   

2.添加在HTML的头信息标识符< head>里:   
< head>   
< style type=”text/css”>   
< !-- 样式表的具体内容 -->   
< /style>   
< /head>   

type=”text/css”表示样式表采用MIME类型,帮助不支持CSS的浏览器过滤掉CSS代码,避免在浏览器面前直接以源代码的方式显示我们设置的样式表。但为了保证上述情况一定不要发生,还是有必要在样式表里加上注释标识符“< !--注释内容-->”。   

3、链接样式表   

同样是添加在HTML的头信息标识符< head>里:   
< head>   
< link rel=”stylesheet” href=”*.css” type=”text/css” media=”screen”>   
< /head>   
*.css是单独保存的样式表文件,其中不能包含< style>标识符,并且只能以css为后缀。  Media是可选的属性,表示使用样式表的网页将用什么媒体输出。
取值范围:   
·Screen(默认):输出到电脑屏幕  
·Print:输出到打印机  
·TV:输出到电视机  
·Projection:输出到投影仪  
·Aural:输出到扬声器  
·Braille:输出到凸字触觉感知设备  
·Tty:输出到电传打字机  
·All:输出到以上所有设备  
如果要输出到多种媒体,可以用逗号分隔取值表。
  
Rel属性表示样式表将以何种方式与HTML文档结合。
取值范围:   
·Stylesheet:指定一个外部的样式表  
·Alternate stylesheet:指定使用一个交互样式表   

4、联合使用样式表   

同样是添加在HTML的头信息标识符< head>里:   
< head>   
< style type=”text/css”>   
< !--   @import “*.css”   其他样式表的声明   -->   
< /style>   
< /head>   
以@import开头的联合样式表输入方法和链接样式表的方法很相似,但联合样式表输入方式更有优势。因为联合法可以在链接外部样式表的同时,针对该网页的具体情况,做出别的网页不需要的样式规则。  
需要注意的是:   
·联合法输入样式表必须以@import开头。  
·如果同时输入多个样式表有冲突的时候,将按照第一个输入的样式表对网页排版。  
·如果输入的样式表和网页里的样式规则冲突时,使用外部的样式表。
About me

8600

Author:8600
自由主义和完美主义的偏执狂……
一条矛盾的鱼.........
设计啊,设计.............
————————————————————
本博客所发表图片、文字未经允许,请勿转载,谢谢!

My World
Categories
Recent Entries
Messages


Chris's Crime
FC2 Counter

Archives
Comments
SPY
Links

Add To Friends
Friends


■ ブログ名:花月残

■ ブログ名:__左耳東風”

■ ブログ名:往日冬夏

■ ブログ名:小pea的bo

■ ブログ名:&#20781;の夢幻國都

■ ブログ名:娜娜&#21674;の永无&#23707;

■ ブログ名:on the Swing

■ ブログ名:提到独立&#39038;八荒

RSSフィード
Search

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。