前台设计细节.docx

1、前台设计细节1、关于手型光标（csscursor:hand;）在css中定义cursor:hand;并不能稳定运行，也不是W3C标准，标准的做法cursor:pointer;2、关于style、currentStyle、getComputedStyle样式表分为以下几种：直接写在tag上的为内嵌样式、写在head元素的style标签中的为内部样式、link引入的为外部样式。内嵌样式，可以通过Dom.style.样式名称获取，需要注意的时样式名称是驼峰格式内部样式和外部样式通过style.样式名称是无法获取的，需要通过currentStyle/getComputedStyle来获取，如果硬是使用

2、style的话，你将只能得到一个空值。如果获取样式时，返回的值是“auto”怎么办？使用offset+样式名称（首字母大写）3、样式表的offset、client、scroll和currentStyle属性offsetHeight = borderTopWidth + clientHeight + scrollbarWidth + borderBottomWidth; offsetWidth = borderLeftWidth + clientWidth + scrollbarWidth + borderRightWidth; 元素内部实际可用区域(高) = clientHeight - pa

3、ddingTopWidth - paddingBottomWidth; 元素内部实际可用区域(宽) = clientWidth - paddingLeftWidth - paddingRightWidth; scrollHeight：文章的实际高度，不管是否已经用纵向滚动条浏览过。 scrollWidth：文章的实际宽度，不管是否已经用横向滚动条浏览过。 scrollTop：用纵向滚动条滚过的高度。 scrollLeft：用横向滚动条滚过的宽度。 文章未滚过部分(高) = scrollHeight - scrollTop - clientHeight; 文章未滚过部分(宽) = scrollW

4、idth - scrollLeft - clientWidth; offsetTop： 如果position是absolute，则是相对于body（纵向滚动条滚到最上面，横向滚动条滚到最左面）左上角那个点y轴之间的差。如果是 relative，则是相对于上方或外层元素y轴上的差值。如果是static（position的默认值），则该属性没有意义。 offsetLeft： 如果position是absolute，则是相对于body（纵向滚动条滚到最上面，横向滚动条滚到最左面）左上角那个点x轴之间的差。如果是 relative，则是相对于上方或外层元素x轴上的差值。如果是static（positi

5、on的默认值），则该属性没有意义。 clientTop：等同于borderTopWidth。 clientLeft：等同于borderLeftWidth。 currentStyle： height：等同于clientHeight。 width：等同于clientWidth。 left：等同于offsetLeft。 top：等同于offsetTop。 padding：共有4个，可以单独指定，也可以一起指定。该值是指元素border距元素内可用区域之间的距离。 margin：共有4个，可以单独指定，也可以一起指定。该值是指距相邻/周围元素之间的距离。当元素position为relative时，其4

6、个值分别等同于top、right、bottom和left4、 四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：document.body.offsetHeight (包括边线的宽) 网页正文全文宽：document.body.sc

7、rollWidth 网页正文全文高：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

8、Explorer）、NS（Netscape）、Opera、FF（FireFox）的区别：clientHeight四种浏览器对 clientHeight 的解释都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。offsetHeightIE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。scrollHeightIE、Opera 认为 scrol

9、lHeight 是网页内容实际高度，可以小于 clientHeight。NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。简单地说clientHeight 就是透过浏览器看内容的这个区域高度。NS、FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度，只不过当网页内容高度小于等于 clientHeight 时，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。IE、Opera 认为 offsetHeight 是可视区域 clientHei

10、ght 滚动条加边框。scrollHeight 则是网页内容实际高度。同理clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同，只是把高度换成宽度即可。注：以上也是转的，对自己有点参考而已，有些值要跟据页面方式而定！我用的Ajax就完全没法用上面的方法定高！javaScript窗口属性：网页可见区域宽：document.body.clientWidth网页可见区域高：document.body.clientHeight网页可见区域宽：document.body.offsetWidth (包括边线的宽)网页可见区域高：document.body.offse

11、tHeight (包括边线的宽)网页正文全文宽：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屏幕可用工作区宽度：windo

12、w.screen.availWidth在IE、FireFox、Opera下都可以使用document.body.clientWidthdocument.body.clientHeight即可获得，很简单，很方便。而在公司项目当中：Opera仍然使用document.body.clientWidthdocument.body.clientHeight可是IE和FireFox则使用document.documentElement.clientWidthdocument.documentElement.clientHeight原来是W3C的标准在作怪啊如果在页面中添加这行标记的话在IE中：docum

13、ent.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.docume

14、ntElement.clientWidth = 可见区域宽度document.documentElement.clientHeight = 可见区域高度在Opera中： document.body.clientWidth = 可见区域宽度document.body.clientHeight = 可见区域高度document.documentElement.clientWidth = 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight = 页面对象高度（即BODY对象高度加上Margin高）获取窗口高宽：var w= d

15、ocument.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;

16、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 targetDi

17、v=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:+styleValu

18、e); 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

19、(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

20、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与backgro

21、und-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)、背景图片的大小控制：对于一个好网页来说，

22、最好不要用太大的图片，原因上面也说过了，影响打开网页的速度。我们最好还是用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 ：b

23、ackground-origin ：background-size ：背景尺寸。background-break ： 虽然是有了这些属性，不过现在还没有支持它们的浏览器。真是好苦恼啊。 (4)、背景图片的位置控制：背景图片默认的是左上对齐。但是我们却不想这样子放置，那我们又该怎么办呢。不要着急，激动人心的时刻马上到来，现在，让我们来认识一下background-position、background-position-x与 background-position-y吧。 a.基本语法:background-position : length | lengthbackground-positio

24、n : 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%

25、 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; /*设置纵向坐标，这时相当于垂直居中*/ 对于

26、取值为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 backg

27、round-image: url(d:images04.jpg); background-position: 60px center; background-repeat:no-repeat; /*设置双向坐标，这时相当于距左60像素下*/(5)、多幅背景图片的设置：对于多幅背景图片的设置，我是在超越CSS：WEB设计艺术精髓里看到的。不过，却又让我很遗憾，因为，目前支持一个标签内有多幅背景图片的浏览器太小了，我知道的也只有Apple Safari 。以许你会问，这怎么可能。当你看完这个实例之后，我想你会惊讶，“天啊，CSS3之前都只能给每个元素使用一幅图片。”如果想研究一下的话，就快快安装一

28、个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

29、: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 脚本对应的