Web前端

Cursor:适用于css2，用于设置目标对象上光标的形状。此属性的值可以是多个，多个值可用英语逗号（，）分隔。此属性的常用值有auto/crosshair/default/hand/move/help/text/wait/url(url)等，分别对应于自动光标、十字光标、客户端光标、手形光标、十字箭头光标、帮助光标（带问号的）、文本光标、沙漏光标和自定义光标。

浏览器兼容性:

p.ie{

height:60px;text-align:center;line-height:60px;border:1px dashed #bbb;background:#f7f7f7;font:15;

color:blue; // 所有浏览器

color:brown/9; // 所有IE浏览器

+color:red; // IE7

_color:green; // IE6

}

检查浏览器类别

document.all IE上每个可编程元素

navigator.appName == " "

document.layers NS上每个层的集合

navigator.appName == "Netscape"

IE中<div> <span>

NS中增加了<layer> (用于绝对定位) <ilayer>（用于相对定位）

<dib id=layer1 style ="left:200">

在IE中使用layer1.style.left 引用left样式属性

在NS中使用document.layer1.left

解决方法：

在程序中定义一个变量，根据浏览器不同，为这个变量赋予不同的设置不同的设置值

var block;

if(ns) block = document.layer1;

if(ie) block = layer1.style;

层对象的visibility属性有三个设置值

1 inherit ,元素的可见性与父元素的可见性相同

2 visible或show,显示元素，在IE中为hidden,.在NS中为show

3 hidden或hide，隐藏元素，在IE中为hidden，在NS中为hide

层的定位：

CSS-P的top,left,width,height等属性指定了层的位置和大小，在IE和NS中设置这些值的方式完全一样，但读取这些属性时的返回值不太一样。在IE中，这些属性值的返回结果并不是整数，总是在数值的后面加"px".另外，在一些情况下，IE无法读这些属性的初始值，返回结果总是为空。为些IE专门定义了pixelTop,pixelLeft,pixelWidth,pixelHeight等几个整数类型的CSS属性。要读取一个名为block的对象的left属性，使用parseInt(block.left)

对于NS中的其它可编程元素，例如图像，如果位于层的外面，其引用语法为:

document.images["图像名"]

如果定义在层的内部，其引用语法变为:

document.layers.layer1.document.images["图像名"]

无论图像位于层内或层外，其在IE中的语法都为：documetnt.images["图像名"]

IE中所有元素，无论是位于层外或层内，都共用一个坐标系，各个层中的元素的绝对坐标都是相对同一个坐标原点来度量的

在NS中，每个层都有一个独立的坐标系，各个层中的元素的绝对坐标都是相对于各自的坐标原点来度量的

JS文件的命名不超过8个字符

list-style:none

margin:0

padding:0

float: left

background-attachment:

新闻列表前的小图标用list-style-image来实现 [W1]

各浏览器透明度区别,见下

CSS样式表的优化技巧

css缩写总结（background font list-style border margin）

个性图标:

加快图片显示：[W3]

加快网页加载速度

　用HTML代码指定图表大小。比如这个代码：

onMouseOver 切换查看大图

<img />

</a>

链接时留白，如：

传说中的链接在这里。

滑过显亮 8.5.2 缺少的点击空间

Robot.txt 来告诉搜索引擎不要搜索哪些东西等放在网站根目录下 [W4]

#Disallow directory /tupian/

user-agent:*

Disallow:/tupian/

Disallow:/*.png$

运用with(window.document.body.style) 不建议用好像效率低的

{

borderWidth="10";

borderStyle="solid";

borderColor="red";

}

CSS：

CSS样式表的优化技巧

css缩写总结

CSS学习代码集合: 实例

双色文字图片隐藏选项卡导航栏一张图完成的导航圆角

无图片实现圆角框

开头常规]：

body{

margin:0; [W5]

padding:0;

}

text-decoration:none;

}

clear: both; 清除清除

具有继承inherit的CSS属性汇总:(最典型的就是 color 这个属性)

/*常用*/

02. color:;

03. text-indent:;

04. text-align:;

05. line-height:;

06. list-style-type:;

07. list-style-image:;

08. list-style-position:;

09. list-style:;

10. cursor:;

/*不常用*/

13. direction:;

14. text-transform:;

15. word-spacing:;

16. white-space:;

17. letter-spacing:;

18. caption-side:;

19. border-spacing:;

20. empty-cells:;

21. border-collapse:;

22. speak-header:;

23. page-break-inside:;

24. page:;

25. orphans:;

26. widows:;

27. volume:;

28. speak:;

29. azimuth:;

30. quotes:;

IE常见私有属性-Scrollbar

IE常见私有属性-zoom

CSS选择器：

类型/标签选择器

CLASS

通用选择器 *｛｝

派生选择器 div span { } [W6]

子选择器 div > span { } [W7] //span 必须位于div的直接子元素

包含选择器 div span //span 不管是位于div的几层子元素，都起作用

属性选择器 *[href] { } [W8]

邻近选择器 li+li{ } [W9]

div[id] {} //对有id属性的Div元素定义

div[id=xx] //对id属性为xx的div元素

组合选择器

关联选择器 P EM{} 其优先权比 EM{} 大

Css的优先级：

ID选择器》 class选择器》 HTML选择器

内联样式表》嵌入样式表》链接样式表

伪类可以与CSS类配合使用：

a.red:visited { }

CSS高级语法：

伪类

伪元素

p:first-child { } //第一个P元素

p>i:first-child { } //P元素的第一个i元素

p:first-child i { } //第一个P元素的所有i元素

p:first-line{ } //伪元素，首行

p:first-letter{ } //伪元素，首字母

p.artide:first-letter{ } //伪元素 + CSS类

p:before

{

content: url(images/quote.gif);

}

p:after

{

content: '《end》';

} [W10]

语言伪类

:lang(de)

{

quotes:'《' '》' '/2039' '/203A'

} IE7 不支持lang伪类

选择器的组合：
h1,h2,h3

{

color:Marron; [W11]

}

选择器合并：

总体优先权（优先级） [W12]

从上到下从总体到局部

ID选择器》类选择器》标签选择器

内联样式》嵌入样式》连接样式

2009CSS浏览器兼容问题总结

CSS hack: !import (IE6不支持、firefox IE7都支持)

.test {

background-color: black; /* firefox, opera, ie8 */

[;background-color: green;] /* safari, chrome */

*background-color: blue; /* ie7 */

_background-color: red; /* ie6 */

}

各浏览器透明度区别：

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; /*IE8*/

filter:alpha(opacity=30); /*IE5、IE5.5、IE6、IE7*/

opacity: .3; /*Opera9.0+、Firefox1.5+、Safari、Chrome*/

让网页在ie及火狐下都能正常显示 margin:

把所有的元素的边界设置为0

margin: 0px;

}

margin加倍的问题。

　设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline; 例如： <#div id=”imfloat”>

相应的css为 #imFloat{ float:left; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/}

FF/IE8/IE6的hack书写顺序为： Firefox、IE8、IE6

区别FF/IE8/IE6： left:-62px;*left:-84px;_left:714px;

区别IE8/IE6： top:470px;_top:474px;

区别FF与IE所有浏览器（包括IE5/6/7/8/）： left:160px; left:144px/9;

body元素：

leftmargin body与浏览器左边界距离

topmargin

XHTML代码规范：

区分大小写属性要加" "

正确嵌套所有元素 <br/> <img src='...jpg' />

特殊字符用编码表示 [W13]

XHTML 中doctype html head body title 是强制性的

XHTML 用id属性代替name属性

重要的兼容性提示：应该在 "/>" 前加一个额外的空格

推荐使用外部链接来调用脚本：

DOCTYPE 选择 [W14]

过渡的严格的框架的

css链接：css导入引入

@import 可以放在样式文件中，但要放在本身的CSS之前

@import url(css1.css);

css导入普通用法：

li {list-style:none;}

</style>

js导入：

src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script> [W15]

js导入普通用法：

编写xml文件时，注意编码形式。

如果是GB2312，此文件存储是应为ANSI编码

如果是utf-8，此文件存储时编码应为utf-8

meta [W16] 必需的属性:

属性	值	描述	DTD
content	some_text	定义与 http-equiv 或 name 属性相关的元信息	STF

meta 可选的属性:

DTD 指示此属性允许在哪种 DTD 中使用。S=Strict, T=Transitional, F=Frameset.[W17]

属性	值	描述	DTD
http-equiv	· content-type · expires · refresh · set-cookie	把 content 属性关联到 HTTP 头部。	STF
name	· author (作者) · description(网站主要内容) · keywords · generator · revised · others · roobs (搜索机器人向导) · copyright (版权)	把 content 属性关联到一个名称。	STF
scheme	some_text	定义用于翻译 content 属性值的格式。	STF

xmlns [W18]

xmlns:math="http://www.w3.org/1999/Math/MathMl"> [W19]

不可继承属性：(display visibility )

display:none [W20] block

visibility:hidden [W21] visible

临时隐藏内容：

text-indent: -999px ;

水平：

text-align:center

margin-left:auto

margin-right:auto

[W22] 垂直：

top: 50%

margin-top:-50px

定义单元格间边框是否合并：

border-collapse: separate(默认分开) collapse(合并)

max-height: auto|..px

min-height:

段首缩进：

text-indent: 4em （4个字符）

首字符下沉与大写：

选择符： first-letter{ }

p:first-letter{font-size:18px;

color:red;

float:left;

text-transform:uppercase;

}

间隔与空白：

letter-spacing:10px 字母与字母间文字与文字之间

word-spacing: 单词与单词之间

white-space: normal (忽略多余的空白) 不可继承

pre (不忽略多余的空白)

nowrap (文本保持同一行)

文本大小写转换：

text-transfaorm:

图文混排：

img{float:right ; margin : 10px ; }

行高，行距：

font-family:"宋体","黑体"

font: bold 24px "宋体"

font: bold 24px/48px [W23] "宋体"

超链接的正确使用顺序：

：link 访问前

：hover 滑过

：visited 访问后

：active 被激活时

表单也可以被修饰：

.text {}

.textreea{}

.submit{}

clip: auto| rect (数值) [W24]

overflow: hidden|scrool [W25]

定义虚线：

style = "border-bottom:#ac 1px dashed;"

#links a:hover {filer:none } /*取消CSS注释*/

{background: url(banner.gif) top center} /*50% 0%*/

{background: url(banner.gif) center} /*50% 50% */

background:transparent 透明无颜色

div

span [W26]

CSS table-layout 属性：

automatic （默认）列宽度由单元格内容设定

fixed 列宽由表格宽度和列宽度设定

color 文本颜色

document.all.oDiv //引用图层oDiv

document.all.oDiv.style.display=”" //图层设置为可视

document.all.oDiv.style.display=”none” //图层设置为隐藏

<!--

var myVariable = “Hello there”;

var newVariable =

myVariable.bold().italics().fontcolor(“blue”).fontsize

(“24pt”);

document.write(newVariable);

// -->

仅IE支持:

shu标滑过

模湖 filter:blur(add=ture,direction=135,strength=200)

投影 filter:dropshadow(color=gray,offx=5,offy=5.positive=0)

阴影 filter:shadow(color=gray,direction=225)

透明色 filter:chroma(color=#CC33C2) (指定对象中哪个为透明色)

发光 filter:glow(color=red,strength=10)

Xray滤镜是让对象反映出它的轮廓并把这些轮廓加亮，也就是所谓的“X”光片 filter:xray

区域定位:

position:

absolute 以网页左上角为基准

relative 以上一个元素的位置

static 以HTML的默认位置

overflow-x

overflow-y

.InfoContainer li{

display:list-item;

list-style-image:url(images/recruitment_sml_logo.jpg);

color:#666666;

font-size:11px;

padding-bottom:10px;

}

Shortcut Icon 就是在网址列前面出现的Icon

　　例1、禁止所有搜索引擎访问网站的任何部分
　　User-agent: *
　　Disallow: /
　　例2、允许所有的robot访问
　　User-agent: *
　　Disallow:
　　（或者也可以建一个空文件 "/robots.txt" file）
　　例3、禁止某个搜索引擎的访问
　　User-agent: BadBot
　　Disallow: /
　　例4、允许某个搜索引擎的访问
　　User-agent: baiduspider
　　Disallow:
　　User-agent: *
　　Disallow: /
　　例5、一个简单例子
　　在这个例子中，该网站有三个目录对搜索引擎的访问做了限制，即搜索引擎不会访问这三个目录。
　　User-agent: *
　　Disallow: /cgi-bin/
　　Disallow: /tmp/
　　Disallow: /joe/

margin 两个块元素的左右一下分界

左右是两个块元素的数值相加] 上下是拿上边元素的margin

派生自<div>的所有<span>标记

限制在父元素的直接子元素上

页面上所有设置了href属性的元素

在无序列表中，需要突出另一个列表项，现对其后的所有项使用另一个样式，此时就可以使用邻近选择器

在目标元素的前面或后面插入内容

把h1,h2,h3标记的文本内容都...

选择器越具体优先级就越高，也就是

.classA .classB .classC{font-size: 25px;}

.classB .classC{font-size:18px}

.classC { font-size: 12px; }

这里.classA .classB .classC的优先级最高，.classC的优先级最低；

在同一个级别的情况下，最后指定的规则优先级就越高，也就是我们通常说的就近原则；html中标签的style的属性都高于css文件中的选择器样式；

标有”!important”的规则有最高优先级。

如：

1．过渡的

一种要求不很严格的DTD，允许在页面中使用HTML4.01的标识（符合xhtml语法标准）。过渡的DTD的写法如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2．严格的

一种要求严格的DTD，不允许使用任何表现层的标识和属性，例如<br/>等。严格的DTD的写法如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

3．框架的

一种专门针对框架页面所使用的DTD，当页面中含有框架元素时，就要采用这种DTD。框架的DTD的写法如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

使用严格的DTD来制作页面，当然是最理想的方式。但是，对于没有深入了解Web标准的网页设计者，比较合适的是使用过渡的DTD。因为这种DTD还允许使用表现层的标识、元素和属性，比较适合大多数网页制作人员。

注：上面说的"表现层的标识、属性"是指那些纯粹用来控制表现的tag，例如用于排版的表格、背景颜色标识等。在XHTML中标识是用来表示结构的，而不是用来实现表现形式，我们过渡的目的是最终实现数据和表现相分离。

( language="javascript" )

虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html

<head>

content="HTML examples">

content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript">

</head>

在文档中定义一个或多个可供选择的命名空间

就可以在 div 中使用该前缀了，就像这样：

<math:div>x3/X<div>

空间已经消失

空间还存在的

.等价于：

body{margin: 0 auto}

这里的48px是指行高

只有在position的值设定为absolute 时，该属性才能正常使用

hidden 不显示超出对象尺寸内容

scrool 只显示滚动条

一行的块

HTML:

<frameset></frameset> 布局 scrolling 滚动条

<frame>

<frame>

</frameset>

DIV不能套在<p>里

<p></p>相当于两个<br> <p>也可以单个使用

<nobr>强制不换行

<blockquote>缩进显示

<pre>原始版面

CSS布局 进阶：DIV

固定宽度设计与流体设计 [W1] ch09_eg01 ch09_eg02

最好采用流体设计和固定宽度设计的混合技术

具有较高分辨率显示器的用户倾向于在他们所浏览窗口的边缘留有较大的空余空间，显示更多的桌面或者其他正在运行的应用程序。因此，当用户具有更高分辨率的屏幕时，他们的浏览器窗口将很少占用整个屏幕。

Web UI 设计(网页设计)命名规范

1. Container

“container“ 就是将页面中的所有元素包在一起的部分，这部分还可以命名为: “wrapper“, “wrap“, “page“.

“header” 是网站页面的头部区域，一般来讲，它包含网站的logo和一些其他元素。这部分还可以命名为:“page-header” (或 pageHeader).

3. Navbar

“navbar“等同于横向的导航栏，是最典型的网页元素。这部分还可以命名为:“nav”, “navigation”, “nav-wrapper”.

4. Menu

“Menu”区域包含一般的链接和菜单，这部分还可以命名为: “subNav “, “links“，“sidebar-main”.

5. Main

“Main”是网站的主要区域，如果是博客的话它将包含的日志。这部分还可以命名为: “content“, “main-content” (或“mainContent”)。

6. Sidebar

“Sidebar” 部分可以包含网站的次要内容，比如最近更新内容列表、关于网站的介绍或广告元素等…这部分还可以命名为: “subNav “, “side-panel“, “secondary-content“.

7. Footer

“Footer”包含网站的一些附加信息，这部分还可以命名为: “copyright“.

组合命名规则:
[元素类型]-[元素作用/内容]
如:搜索按钮: btn-search
登录表单:form-login
新闻列表:list-news

常用命名汇总:

页头:header

登录条:loginbar

标志:logo

侧栏:sidebar

广告条:banner

导航:nav

子导航:subNav

菜单:menu

子菜单:subMenu

下拉菜单:dropMenu

工具条: toolbar

表单:form

栏目:column

箭头:arrow

搜索:search

搜索按钮:btn-search

滚动条:scroll

内容:content

标签页:tab

文章列表:list

提示信息:msg

小技巧:tips

栏目标题:title

链接:links

页脚:footer

服务:service

热点:hot

新闻:news

下载:download

状态:status

按钮:btn

投票:vote

合作伙伴:partner

版权:copyright

网站地图: sitemap

布局设计：

9.1.6 创建站点地图

在创建站点地图时，该层次结构图将决定导航的内容--请记住，站点最多只能分为7个部分。在一个页面上应当尽可能地避免具有超过10个主要链接。

在站点的分部中，副标题和链接的数量可以超过7个，并且子导航或次要导航有时在页面中的出现位置与主要导航不同。

9.3.3 导航

1. 顶部导航 非常流行的方法

2. 左导航 较为少见的选择

3. 顶部和左导航 结合使用顶部导航和左导航，其中顶部导航用于主要导航，左导航用于次要导航或者子导航。图9-9给出了这样的示例，该示例来源于eBay.com，它的顶部实际上具有两个导航集，左边的子导航取决于用户所在的部分。

4. 底部导航 通常应当避免将主要导航链接放置在页面的底部，因为如果不使用框架(框架将使页面的编写变得复杂--建议仅在内容确实需要框架时才使用它们)或者CSS定位特性(CSS定位特性仅被最新的浏览器支持)，则无法保证它们在页面加载时可见。

5. 右导航 少会发现通常右边的列用于额外的内容或到站点其他部分的链接，这些对于用户的导航来说并不重要。例如，电子商务商铺可能会在右边的列中包含一系列到相关产品或者添加到商铺的最新项的链接；这些都是为站点用户添加的额外功能，对于导航来说不是必须的功能。

9.3.4 主页面

主页面不应当仅介绍公司市场营销部门希望介绍的每周或每月营销成绩。主页面不应当只是他们的广告栏，而必须也能够解决站点主要访问者的需求。例如，市场营销部门可能希望推出一款新产品，而访问站点的大多数顾客希望找到一种较早的、更可靠的产品。如果这些用户无法在站点中找到他们想要的信息，则市场营销部门无法最大化推广他们的产品。在用户的需求和公司的需求之间进行平衡非常重要--并且用户应当具有更高的优先级。

因为访问者趋向于浏览页面而不是阅读所有内容，所以所有题头和链接名都应当以重要的关键字开头，这样有助于用户理解该部分或链接的作用。

注意：

补充说明一下，曾经多次有客户要求我创建flash动画，用于在用户到达站点的主页面之前播放。但是，这些所谓的醒目页面通常不被赞成使用，无论动画多么令人印象深刻，因为它们阻碍用户查看希望看到的内容。

9.3.5 内容页面 

内容页面是大多数站点的主要部分；在新闻站点中，内容页面可以包含一些文章；在电子商务站点中，内容页面可以包含每一件产品的细节。内容页面显示内容的方式应当使用户容易阅读信息。

本章前面已经提到，如果具有多个产品或服务，则为每一项所提供的信息应当一致。如果处理的是衣服，访问者应当能够快速并方便地了解这款衣服具有的不同颜色和大小。可以通过将类似的信息放置在每个页面的相同位置来实现该操作。根据这种思想，实际上仅需要设计一个文章页面或者产品页面，所有其他页面应当遵循该模板。

不能使页面太拥挤；清晰的表示能够使用户将注意力集中于内容。即使有大量的信息需要填充在页面上，也需要确保不同元素之间存在足够的空间。

图像应当与产品、服务或正在讨论的主题相关，如果它们是左对齐或者右对齐，并且文本环绕在它们周围，则通常看上去更加美观。在图像和它们周围的文本之间也应当存在间隔(可以使用CSS中的padding特性或margin特性进行设置)。

注意：

应当避免在任何商业站点上使用剪贴画或GIF动画，但是如果需要的话，可以在个人站点上使用它们。虽然跳舞的猫第一眼看上去非常可爱，但是如果它与尝试向用户展现的主题无关，则将会转移站点的实际目标。

当需要展现大量文本时，确保页面中的文本行不要太宽。

确保所有文本被划分为适当的副标题，并且尽可能使用非常短的段落编写专门用于Web的版本。