前台设计细节.docx

1、 关于手型光标（csscursor:hand;）在css中定义cursor:hand;并不能稳定运行，也不是W3C标准，标准的做法cursor:pointer;2、 关于style、currentStyle、getComputedStyle样式表分为以下几种：直接写在tag上的为内嵌样式、写在head元素的style标签中的为内部样式、link引入的为外部样式。内嵌样式，可以通过Dom.style.样式名称获取，需要注意的时样式名称是驼峰格式内部样式和外部样式通过style.样式名称是无法获取的，需要通过currentStyle/getComputedStyle来获取，如果硬是使用style的话，你将只能得到一个空值。如果获取样式时，返回的值是“auto”怎么办？使用offset+样式名称（首字母大写）3、 样式表的offset、client、scroll和currentStyle属性offsetHeight = borderTopWidth + clientHeight + scrollbarWidth + borderBottomWidth; offsetWidth = borderLeftWidth + clientWidth + scrollbarWidth + borderRightWidth; 元素内部实际可用区域(高) = clientHeight - paddingTopWidth - paddingBottomWidth; 元素内部实际可用区域(宽) = clientWidth - paddingLeftWidth - paddingRightWidth; scrollHeight：文章的实际高度，不管是否已经用纵向滚动条浏览过。 scrollWidth：文章的实际宽度，不管是否已经用横向滚动条浏览过。 scrollTop：用纵向滚动条滚过的高度。 scrollLeft：用横向滚动条滚过的宽度。 文章未滚过部分(高) = scrollHeight - scrollTop - clientHeight; 文章未滚过部分(宽) = scrollWidth - scrollLeft - clientWidth; offsetTop： 如果position是absolute，则是相对于body（纵向滚动条滚到最上面，横向滚动条滚到最左面）左上角那个点y轴之间的差。如果是 relative，则是相对于上方或外层元素y轴上的差值。如果是static（position的默认值），则该属性没有意义。 offsetLeft： 如果position是absolute，则是相对于body（纵向滚动条滚到最上面，横向滚动条滚到最左面）左上角那个点x轴之间的差。如果是 relative，则是相对于上方或外层元素x轴上的差值。如果是static（position的默认值），则该属性没有意义。 clientTop：等同于borderTopWidth。 clientLeft：等同于borderLeftWidth。 currentStyle： height：等同于clientHeight。 width：等同于clientWidth。 left：等同于offsetLeft。 top：等同于offsetTop。 padding：共有4个，可以单独指定，也可以一起指定。该值是指元素border距元素内可用区域之间的距离。 margin：共有4个，可以单独指定，也可以一起指定。该值是指距相邻/周围元素之间的距离。当元素position为relative时，其4个值分别等同于top、right、bottom和left4、 四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：document.body.offsetHeight (包括边线的宽) 网页正文全文宽：document.body.scrollWidth 网页正文全文高：document.body.scrollHeight 网页被卷去的高：document.body.scrollTop 网页被卷去的左：document.body.scrollLeft 网页正文部分上：window.screenTop 网页正文部分左：window.screenLeft 屏幕分辨率的高：window.screen.height 屏幕分辨率的宽：window.screen.width 屏幕可用工作区高度：window.screen.availHeight 屏幕可用工作区宽度：window.screen.availWidthIE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）的区别：clientHeight四种浏览器对 clientHeight 的解释都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。offsetHeightIE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。scrollHeightIE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。简单地说clientHeight 就是透过浏览器看内容的这个区域高度。NS、FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度，只不过当网页内容高度小于等于 clientHeight 时，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。同理clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同，只是把高度换成宽度即可。注：以上也是转的，对自己有点参考而已，有些值要跟据页面方式而定！我用的Ajax就完全没法用上面的方法定高！javaScript窗口属性：网页可见区域宽：document.body.clientWidth网页可见区域高：document.body.clientHeight网页可见区域宽：document.body.offsetWidth (包括边线的宽)网页可见区域高：document.body.offsetHeight (包括边线的宽)网页正文全文宽：document.body.scrollWidth网页正文全文高：document.body.scrollHeight网页被卷去的高：document.body.scrollTop网页被卷去的左：document.body.scrollLeft网页正文部分上：window.screenTop网页正文部分左：window.screenLeft屏幕分辨率的高：window.screen.height屏幕分辨率的宽：window.screen.width屏幕可用工作区高度：window.screen.availHeight屏幕可用工作区宽度：window.screen.availWidth在IE、FireFox、Opera下都可以使用document.body.clientWidthdocument.body.clientHeight即可获得，很简单，很方便。而在公司项目当中：Opera仍然使用document.body.clientWidthdocument.body.clientHeight可是IE和FireFox则使用document.documentElement.clientWidthdocument.documentElement.clientHeight原来是W3C的标准在作怪啊/TR/xhtml1/DTD/xhtml1-transitional.dtd如果在页面中添加这行标记的话在IE中：document.body.clientWidth = BODY对象宽度document.body.clientHeight = BODY对象高度document.documentElement.clientWidth = 可见区域宽度document.documentElement.clientHeight = 可见区域高度注：在IE中“可见区域”基本不认可body，而必需使用documentElement！在FireFox中：document.body.clientWidth = BODY对象宽度document.body.clientHeight = BODY对象高度document.documentElement.clientWidth = 可见区域宽度document.documentElement.clientHeight = 可见区域高度在Opera中： document.body.clientWidth = 可见区域宽度document.body.clientHeight = 可见区域高度document.documentElement.clientWidth = 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight = 页面对象高度（即BODY对象高度加上Margin高）获取窗口高宽：var w= document.documentElement.offsetWidth;var h=document.documentElement.offsetHeight;完整的代码（自己写的：张伟） get style properties across different browser #test position: absolute; top:auto; left: auto; width: 190px; height: 28px; padding-left: 10px; border-color: bisque; border-width: 1px; border-style: groove; color: #7fffd4; font-weight: bold; font-size: 24px; #targetDiv position: absolute; top:85px; left: 200px; width: 300px; height: 28px; padding-left: 10px; border-color: bisque; border-width: 1px; border-style: dotted; color: #9900ff; font-weight: bold; font-size: 24px; function runTest() var targetDiv=document.getElementById(targetDiv); var testDiv=document.getElementById(test); targetDiv.innerHTML=top is +getOffPixel(getStyle(testDiv,left); function getStyle(element,styleName) var styleValue; if(element.style & element.stylestyleName!=) styleValue=element.stylestyleName; alert(style:+styleValue); else if(element.currentStyle) /IE & Maxthon ie & FireFox ie styleValue=element.currentStylestyleName; alert(currentStyle:+styleValue); else if(window.getComputedStyle) /Maxthon & FireFox styleValue=window.getComputedStyle(element).getPropertyValue(styleName); alert(computedStyle:+styleValue); if(styleValue=auto) styleValue=elementoffset+changeToUpper(styleName)+px; return styleValue; function changeToUpper(styleName) return styleName.charAt(0).toUpperCase()+styleName.substring(1).toLowerCase(); function getOffPixel(pixel) return parseInt(pixel.substring(0,pixel.indexOf(px); A Div For Test 5、label中的for属性 官方解释：sets or retrieves the to which the given label object is assigned 要将label绑定到其他的控件，请将label元素的for属性设置为与该控件的ID相同，将label绑定到控件的name属性毫无用处。但是，要提交表单，你必须为label元素所绑定到的控件制定name。 如果用户单击label，则会先触发label上绑定的onclick事件，然后触发由for属性所指定的控件上的onclick事件。6、背景元素定位CSS控制背景图片：(1)、背景图片的导入：background与background-image。body background:url(d:images04.jpg)或者body background-image:url(d:images04.jpg)(2)、背景图片的显示方式： background-repeat，取值：repeat : 默认值。背景图像在纵向和横向上平铺no-repeat : 背景图像不平铺repeat-x : 背景图像仅在横向上平铺repeat-y : 背景图像仅在纵向上平铺body background:url(d:images04.jpg);background-repeat:no-repeat(3)、背景图片的大小控制：对于一个好网页来说，最好不要用太大的图片，原因上面也说过了，影响打开网页的速度。我们最好还是用PS或者FireWorks处理一下。不过既然我提到了，我们也不防用CSS来实现图片大小的控制。 我想很多人会自然而然的用上如下代码：bodybackground-image:url(d:images04.jpg);width:350px;height:350px; 呵呵，想法是好的，因为它只是控制BODY的大小。补充：W3C于9月10发布了一篇名为CSS Backgrounds and Borders Module Level 3的应文章，里面为CSS的背景加上了几个我们从未见的属性：background-clip ：background-origin ：background-size ：背景尺寸。background-break ： 虽然是有了这些属性，不过现在还没有支持它们的浏览器。真是好苦恼啊。 (4)、背景图片的位置控制：背景图片默认的是左上对齐。但是我们却不想这样子放置，那我们又该怎么办呢。不要着急，激动人心的时刻马上到来，现在，让我们来认识一下background-position、background-position-x及 background-position-y吧。 a.基本语法:background-position : length | lengthbackground-position : position | positionbackground-position-x : length | left | center | rightbackground-position-y : length | top | center | bottomb.语法取值:length :百分数 | 由浮点数字和单位标识符组成的长度值。position : top | center | bottom | left | center | right c.示例：body background-image: url(d:images04.jpg); background-position: 50% 50%; background-repeat:no-repeat; /*设置双向坐标，这时相当于完全居中*/body background-image: url(d:images04.jpg); background-position-x: 50%; background-repeat:no-repeat; /*设置双向坐标，这时相当于水平居中*/body background-image: url(d:images04.jpg); background-position-y: 50%; background-repeat:no-repeat; /*设置纵向坐标，这时相当于垂直居中*/ 对于取值为length | top | center | bottom我只写下面三个例子。body background-image: url(d:images04.jpg); background-position: top right; background-repeat:no-repeat; /*设置双向坐标，这时相当于右上*/body background-image: url(d:images04.jpg); background-position: 50% center; background-repeat:no-repeat; /*设置双向坐标，这时相当于中下*/body background-image: url(d:images04.jpg); background-position: 60px center; background-repeat:no-repeat; /*设置双向坐标，这时相当于距左60像素下*/(5)、多幅背景图片的设置：对于多幅背景图片的设置，我是在超越CSS：WEB设计艺术精髓里看到的。不过，却又让我很遗憾，因为，目前支持一个标签内有多幅背景图片的浏览器太小了，我知道的也只有Apple Safari 。以许你会问，这怎么可能。当你看完这个实例之后，我想你会惊讶，“天啊，CSS3之前都只能给每个元素使用一幅图片。”如果想研究一下的话，就快快安装一个SAFARI浏览器吧。对我而言，我相信，这是发展的趋势。总之一句话，谁解释CSS能力越强，它就将是发展的潮流，谁俱有完美的WEB准标，谁就是明日浏览器之星。 代码如下：body background-image:url(d:mypic001.png),url(d:mypic002.png);url(d:mypic003.png);url(d:mypic004.png);background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,repeat-x,repeat-y,repeat-x,repeat-y,background-position:top left,top right,bottom right,bottom left,top left,top right,bottom right,bottom left;7、去除a标签获取焦点后的虚线框 当一个链接得到焦点时，默认会有个虚线框。如图：在 Firefox 里可以用 -moz-outline:none; 或者 outline:none; 来将其去掉。a:focus outline:none;-moz-outline:none;如果你用过 Safari 和 Chrome会发现，当输入框得到焦点时边框会出现阴影效果。如果想去掉阴影效果也可以用 outline 属性。input,textarea outline:none;言归正传，刚刚说的是 Firefox ，现在说说 IE。首先比较遗憾，还没有找到通过 CSS 去掉 IE 链接虚线框比较好的解决办法。所以只能用一个替代的办法，就是 a 标签的 hidefocus 属性(这个属性是 IE 独有的)。链接注意：JS 脚本对应的属性名是：hideFocus。对应的 JS 代码应该是：xxx.hideFocus = true;还有一种不推荐的办法。就是让链接得到焦点的时候失去焦点。链接这种办法很管用，但过于暴力，最好不要用了。方法一：在链接处加入语法如：文字链接 这里是链接文字 图片链接 不难看出，onfocus=”this.blur()”语法必须是放在href里的。方法二：方法一的缺点是每个链接都得加上那么一句语法，那么有没有一句搞定的呢当然有了，就是这个方法二咯就是使用JS语法来删除所有链接虚线，方法是在与之间加入下面语法window.onload=function()for(var ii=0; iidocument.links.length; ii+)document.linksii.onfocus=function()this.blur()方法三：在区之间加代码function bluring()if(event.srcElement.tagName=”A”|event.srcElement.tagName=”IMG”) document.body.focus();document.onfocusin=bluring;linka blr:expression(this.onFocus=this.blur()局部控制link1link1link1link1全局控制CSS实现(实践可用)ablr:expression(this.onFocus=this.close(); /* 只支持IE，过多使用效率低 */ablr:expression(this.onFocus=this.blur(); /* 只支持IE，过多使用效率低 */a:focus -moz-outline-style: none; /* IE不支持 */8、float属性注意点第一：float元素的父元素不能指定clear属性。MacIE下如果对float元素的父元素使用了clear属性，周围的float元素布局就会混乱。这是MacIE的著名bug。第二：float元素务必指定width属性。另外在指定元素是尽量使用em而不是px作单位。1em等于小写e在当前系统中的大小。第三：float元素不能指定margin和padding属性。IE中对float显示制定了margin和padding时产生bug，但是可以在float元素内部嵌套一个div来设置margin和padding，也可以使用hack方法第四：float元素的宽度之和要小于100%。某些较老版本的浏览器无法显示，因此请保证宽度值和小于99%。9、子元素相对父元素定位 子元素 position:absolute; 父元素 position:relative;父元素必须指定height属性，否则如果有多行子元素的话（如下图），所有的子元素会重叠在一起。10、超链接中的空格或回车换行 先看两段代码的比较： 对应的效果图：很明显，第一张图的后面你会发现一个横杠，这就是第一段代码中在a标签中使用了回车换行造成的，同样在a标签中也不能使用空格。所以建议以后再使用a超链接标签时一定不要出现空格和回车换行。11、html中的块状元素和内联元素块状元素：address, blockquote, center, dir, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul, li, dd, td, form, caption, col, colgroup, tfoot, tbody, thead, dl.块级元素的分类 块级元素按照其应用于结构还是内容分为三种：结构化块状元素，终端块状元素，多目标块状元素。 一.结构化块状元素 这类元素用于构造文档的结构，一个好的文档结构对于搜索引擎和应用其他技术（如JavaScript）都是十分有利的。它们没有语义上的含义，仅仅划分出了文档的组织方式，并没有体现文档的内容。 主要的结构化块状元素 * * * * 支持结构化的元素 * * * * * * * * * 二.终端块状元素 这类元素用于从结构转向内容，它们拥有语义上的含义，能够表明内容的性质。终端块状元素属于结构的终点，它们不能再包含其他块级元素，只能包含文本或行级元素。 终端块状元素 * . * * * * * 三.多目标块状元素 所谓多目标指的是可以自由的扩展或嵌套文档的结构，以可以终端的形式出现。当多目标块状元素以结构化的方式使用时就含有结构化的内涵，以终端的形式使用就含有语义的内涵。 多目标块状元素既可以包含块状元素，也可以包含内容（文本与行级元素的组合为内容），但不能同时包含两者。应该把内容放在块状元素中。块状元素不应作为行级元素与文本的兄弟元素，受HTML校验器的限制，目前还没办法检验出此种情况，但是应该避免。 多目标块状元素 * * * * * * 在谈论CSS布局时，我们需要提前知道一些东西。对于html各种标签/元素，可以从块的层面做一个分类：要么是block(块元素)，要么是inline(内联元素)： block元素的特点： * 总是另起一行开始； * 高度，行高以及顶、底边距都可控制； * 宽度缺省是它所在容器的100%，除非设定一个宽度。 inline元素的特点： * 和其它元素都在一行上； * 高度，行高以及顶、底边距不可改变； * 宽度就是它所容纳的文字或图片的宽度，不可改变。 下面对它们的性质及应用做进一步说明： 块元素(block element) 通常作为其它元素的容器，它可以容纳内联元素和其它块元素。 我们知道默认情况下，块元素会顺序以每次另起一行的方式往下排，而通过CSS控制其样式，我们可以改变这种默认布局模式，把块元素摆放到你想要的位置上 去。需要指出的是，table标签也是块元素的一种，基于table表格和基于CSS+DIV的布局，在使用者看来除了页面载入速度的差别（table在 所有内容元素加载完成后才显示），没有其它的差别。但是从页面的源代码来看，这种差异就非常大了。基于良好结构理念设计的CSS布局源码，至少能让没有 web开发经验的用户很容易找到连续的页面内容。从这个角度来说，CSS layout code应该有更好的美学体验。 我们可以把模块化的DIV想象成一个个box，然后把它们按自己的意愿排列组成完整的内容，网页布局设计就是遵循了同样的模式。 块元素(block element) HTML标签分类明细 * address - 地址 * blockquote - 块引用 * center - 举中对齐块 * dir - 目录列表 * div - 常用块级容易，也是css layout的主要标签 * dl - 定义列表 * fieldset - form控制组 * form - 交互表单 （只能用来容纳其它块元素） * h1 - 大标题 * h2 - 副标题 * h3 - 3级标题 * h4 - 4级标题 * h5 - 5级标题 * h6 - 6级标题 * hr - 水平分隔线 * isindex - input prompt * menu - 菜单列表 * noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容 * noscript - 可选脚本内容（对于不支持script的浏览器显示此内容） * ol - 排序表单 * p - 段落 * pre - 格式化文本 * table - 表格 * ul - 非排序列表 内联元素(inline element) 一般都是基于语义级(semantic)的基本元素，只能容纳文本或者其它内联元素。 为了比较明确的表现出 block 与 inline 的区别，我们可以利用它们各自的代表元素div和span的演示进行说明： XXXXXXXXX Thiss a DIV layout XXXXXXXXX div另起一行，它的形状不受内部文字的影响 XXXXXXXThiss a span layoutXXXXXXX 所有元素在一行，span刚好包容文字 内联元素(inline element) HTML标签分类明细 * a - 锚点 * abbr - 缩写 * acronym - 首字 * b - 粗体(不推荐) * bdo - bidi override * big - 大字体 * br - 换行 * cite - 引用 * code - 计算机代码(在引用源码的时候需要) * dfn - 定义字段 * em - 强调 * font - 字体设定(不推荐) * i - 斜体 * img - 图片 * input - 输入框 * kbd - 定义键盘文本 * label - 表格标签 * q - 短引用 * s - 中划线(不推荐) * samp - 定义范例计算机代码 * select - 项目选择 * small - 小字体文本 * span - 常用内联容器，定义文本内区块 * strike - 中划线 * strong - 粗体强调 * sub - 下标 * sup - 上标 * textarea - 多行文本输入框 * tt - 电传文本 * u - 下划线 * var - 定义变量 可变元素 是基于以上两者随环境而变化的，它的基本概念就是根据上下文关系确定该元素是块元素还是内联元素。一旦确定了它的类别，它就遵循块元素或者内联元素的规则限制。 可变元素 HTML标签分类明细 * applet - java applet * button - 按钮 * del - 删除文本 * iframe - inline frame * ins - 插入的文本 * map - 图片区块(map) * object - object对象 * script - 客户端脚本 但 是通过CSS，我们可以摆脱上面表格里HTML标签归类的限制，自由地在不同标签/元素上 应用我们需要的属性。例如，我们可以对块元素 ul 标签加上 display:inline 属性，让原本垂直的列表水平显示，这在我们设置Blog导航条时得到了广泛应用；我们也完全可以把内联元素 cite 加上 display:block 这样的属性，让它也有每次都从新行开始的属性。12、a:hover属性不起作用a:hover 使用时有严格的顺序：aa:linka:visiteda:hovera:active另外在给a定义css样式时，尽量不要将a当做div使用，从而定义他的高、宽等属性，因为这样很容易导致超链接的区域过大，光标还没放到超链接上时，就已经变成的手型。13：textarea在浏览器中禁用拖动和固定大小HTML 标签 textarea 在大部分浏览器中只要指定行（rows）和列（cols）属性，就可以规定 textarea 的尺寸，大小就不会改变，不过更好的办法是使用 CSS 的 height 和 width 属性,但是Chrome,Safari和FireFox渲染的效果不同，可以拖动右下角图标改变大小。但是过分拖动大小会影响页面布局，使页面变得不美观。可以通过添加如下两个样式禁用拖动，固定大小： 1：彻底禁用拖动（推荐）resize:none;2：只是固定大小，右下角的拖动图标仍在width:200px;height:100px;max-width:200px;max-height:100px;14：fieldset和legend标签 a simple validate form demofieldset：可以在表单内造成类似tab选项卡的效果legend：此选项卡的标题15：png图片透明部分在浏览器下显示黑色边框解决： ba