关注互联网发展
网页设计
根据访问者分辨率,自动调用不同版式CSS的代码
七 8th
虽然现在已经基本淘汰800分辨率了1024已经成为主流,但是随着大屏幕液晶的不断降价,更高的分辨率将会逐步成为主流,为了适应越来越大的分辨率,有时候我们会采用流体布局,但是流体布局有时候也有局限性,下面一段js可以实现根据用户客户端分辨率的不同,调用不同的css代码来实现适应不同分辨率的效果。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | var Swidth = screen.width; var Surl = "http://www.yours.com/"; var Skin = ["cssstyle1.css", "cssstyle2.css"]; var Skintemp; if (Swidth >= 1280) { Surl += "skin_1200"; } else { Surl += "skin"; } for (var i = 0; i < Skin.length; i++) { Skintemp = document.createElement("link"); Skintemp.type = "text/css"; Skintemp.rel = "stylesheet"; Skintemp.href = Surl + "/" + Skin[i]; document.getElementsByTagName("head")[0].appendChild(Skintemp); } |
一个可以多页签切换的JS焦点图代码
三 4th
最近的一个项目,在一个tab的区域,每个tab里面都有一个焦点图(没办法,客户的要求就是这么怪),需要用CSS和js实现。 网上找了好久没找到合适的代码,就自己试着写了一个,代码逻辑不是很清晰,而且只适用于目前的三个tab,每个tab里面有5点焦点图的情况。毕竟是第一次写程序,好在实现了功能。以下是js代码。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | //焦点图 var n=0; var num=1; var c=new Array(0,5,10); function Mea(value){ n=value; if (value<5) { num=1; } else if ( value>4&value<10 ) { num=2; } else if (value>9) { num=3; } v = value-5*(num-1); aunum = "au"+num; setBg(value); plays(v); conaus(v); } function setBg(value){ for(var i=0;i<5;i++) { ii=5*(num-1)+i; document.getElementById("t"+ii+"").className="bbg0"; } document.getElementById("t"+value+"").className="bbg1"; } function plays(v){ try { document.getElementById("au"+num).filters[0].Apply(); var d = document.getElementById("au"+num).getElementsByTagName("div"); for(i=0;i<5;i++)i==v?d[i].style.display="block":d[i].style.display="none"; document.getElementById("au"+num).filters[0].play(); } catch(e) { var d = document.getElementById("au"+num).getElementsByTagName("div"); for(i=0;i<5;i++)i==v?d[i].style.display="block":d[i].style.display="none"; } } function conaus(v){ try { with ("conau"+num){ for(i=0;i<5;i++)i==v?children[i].style.display="block":children[i].style.display="none"; } } catch(e) { var d = document.getElementById("conau"+num).getElementsByTagName("div"); for(i=0;i<5;i++)i==v?d[i].style.display="block":d[i].style.display="none"; } } //tab激活该tab的自动播放 function autorun(m){ for(i=0;i<3;i++){ if(i==num-1){ c[i]=n; } } clearAuto(); if(m==num){ setAuto(); } else{ num=m; n=c[m-1]; setAuto(); } } function clearAuto(){clearInterval(autoStart)} function setAuto(){autoStart=setInterval("auto(n)", 3000)} function auto(){ n++; if(n>5*(num-1)+4)n=5*(num-1); Mea(n); conaus(n-5*(num-1)); } setAuto(); |
然后在tab的每个tab上加上autorun(1);autorun(2);autorun(3)…
全部代码直接看实例页面吧
关于表格的学习笔记
二 17th
今天学习了两篇关于表格的文章,感觉对表格的认识更进一步了,记下此笔记以作分享。
以往设计一个如下表格我都是采用以下代码

- <table width="300px" border="0" cellspacing="0" cellpadding="0">
- <caption>各门派掌门表</caption>
- <thead>
- <tr>
- <th>门派</th>
- <th>掌门</th>
- <th>年龄</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <th>武当</th>
- <td>三丰</td>
- <td>98</td>
- </tr>
- <tr>
- <th>全真</th>
- <td>重阳</td>
- <td>65</td>
- </tr>
- </tbody>
- </table>
今天看了两篇文章:
总结如下:
- tfoot的使用:tfoot标签本来一直知道这个标签,但是很少用到,但是本身一直有一个误区就是写表格的顺序是thead、tbody、tfoot,其实正确的顺序是thead、tfoot、tbody。thead和tfoot要写在tbody前面。
- summary属性:进一步解释这个表格的目的和内容,摘要属性对非可视化浏览器尤为重要,这能帮助它们解说表格的内容。summary属性是加到table里的。
- id和header:同样是对于非可视化浏览器可以使用在th上加id然后在th上加header来使td和th对应。
- abbr属性:当屏幕阅读器遇到一个表格,每一行会把表头连每一个数据单元格一起读出来。如果表头很长,听一遍一遍的读是十分乏味的。通过使用abbr属性,可以给那些长的表头提供简写形式,取代表头的内容。abbr属性是可选的,大部分情况表头还是(或许是应该)比较简短的。
最后,之前的代码可以修改为:
- <table width="300px" border="0" cellspacing="0" cellpadding="0" summary="此表格记录了江湖各门派的掌门和年龄">
- <caption>各门派掌门表</caption>
- <thead>
- <tr>
- <th id="company">门派</th>
- <th id="master">掌门</th>
- <th id="age">年龄</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <th id="wudang">武当</th>
- <td headers="master wudang">三丰</td>
- <td headers="age wudang">98</td>
- </tr>
- <tr>
- <th id="quanzhen">全真</th>
- <td headers="master quanzhen">重阳</td>
- <td headers="age quanzhen">65</td>
- </tr>
- </tbody>
- </table>
网站字体选择研究
二 13th
昨天换了这个主题,跟我想要的感觉很像,就不自己重新做了,但是由于此主题是从wordpress移植过来的,在字体设置方面是按英文网站的样式来做的,做中文站点有很多不足之处,于是就自己修改了下CSS。
主要修改的地方有:
1、将所有11px 10px的字全部改成了12px,因为在中文显示里,12px是能清晰显示汉字的最小字体。
2、将正文的文字由12px改成了14px行距150%,让文章更容易阅读。
3、将标题改为20px黑体normal。改这个位置的时候发现问题了,原字体设置为:
- .post h2 {
- font-family:Verdana,"BitStream vera Sans";
- }
我最先改成
- .post h2 {
- font-family:Verdana,"BitStream vera Sans","黑体";
- }
测试发现,在FF和chrome下显示比较正常,英文用的Verdana字体,中文使用的黑体,但是在IE下则英文是Verdana中文是宋体,但是换个写法
- .post h2 {
- font-family:"黑体",Verdana,"BitStream vera Sans";
- }
则在所有浏览器中中英文都显示的黑体,虽然实现了效果,但是黑体的中英文混排不是很好看,而且这样写后面的Verdana,"BitStream vera Sans"相当于多余的了,于是乎上网搜索资料终于让我找到了一篇关于网页设计文字应用的强文,如下:
[教程] 谈谈网页设计中的字体应用 (1) Font Set
[教程] 谈谈网页设计中的字体应用 (2) serif 和 sans-serif
通读4篇文章,对网页设计的字体应用已经初步有了系统的了解,也明白了产生这个问题的具体原因。因为各浏览器的渲染机制不同对文字渲染又有着各式各样的问题,所以只能采取折中的办法来解决问题,同时通过几篇文章对字体应用了解的增加,最后将字体写成这样:
- .post h2 {
- font-family:Tahoma,Helvetica,"黑体",Sans-serif;
- *font-family:"黑体";
- }
2月16日根据本站情况修改为:
- .post h2 {
- font-size:24px;
- font-weight:normal;
- font-family:‘Microsoft YaHei’,‘微软雅黑’,‘Microsoft JhengHei’,‘华文黑体’,STHeiti,Georgia,‘Times New Roman’,Times,serif;
- }
通过HACK来在FF和chrome中正常显示,在IE6 7中中英文都用黑体显示。
总结:在日常网页设计中,如果只是需要用到系统默认字体,如XP下的宋体,VISTA下的微软雅黑,则只需要写成:
- body {
- font-family:Tahoma,Helvetica,Sans-serif;
- }
即可,系统会自动将中文以默认字体显示。
如果需要用到特殊字体,如前面的黑体,那么可以像最好那样通过HACK来解决,在IE下用黑体,FF和chrome下中文是黑体英文是其它所设置的英文字体。
最后贴上修改后在不同浏览器下的显示效果。

IE6

IE7

FIREFOX3

CHROME
Acid2 Browser Test
十一 14th
恕我火星了,今天才知道有Acid2 Browser Test这个东西,动手测试了一下手头的浏览器,IE8 FF3 谷歌浏览器都正常FF2和IE7及以下版本都不正常。
上网搜索了一下
Acid2 Browser Test
Acid2 is a test page, written to help browser vendors ensure proper support for web standards in their products. Please take the Acid2 test!
If you’d like more in-depth information about the Acid2 test, we’ve provided a detailed technical guide that explains how the test works.
Note: Some 827 people (rough estimate, contents may have settled during shipping) have written to point out that the CSS used in the test is invalid. This is deliberate, as a means of exposing the ability of user agents to handle invalid CSS properly.
Note: When taking the test, you should use the default settings of the browser you are testing. Changing the zoom level, minimum font size, applying a fit-to-width algorithm, or making other changes may alter the rendition of the Acid2 page without this constituting a failure in compliance. (Added 21 July 2006)
更深层次的研究放在以后吧,工作先
详解CSS的优先权(ZT)
十一 14th
原文出处:http://www.planabc.net/2008/05/06/css_specificity/
看这篇文章之前,对这个问题一直没深入研究,导致有时候遇到一些问题会很麻烦,看到这篇文章让我茅塞顿开,转帖回来保存一下以便今后复习。
发现很多朋友对 CSS 的优先权不甚了解,规则很简单。需要说明的一点,如果你的样式管理需要深层判断 CSS 的优先权,更应反思自己的 CSS 代码,是否合理?是否优化?
CSS2.1 中规定了关于 CSS 规则 Specificity(特异性)的计算方式,用一个四位的数字串(注:CSS2 中是用三位)来表示,最后以 Specificity 的高低判断 CSS 的优先权。
Specificity 具体的计算规则:
- 元素的 style 样式属性,加 1,0,0,0。
- 每个 ID 选择符(#id),加 0,1,0,0。
- 每个 class 选择符(.class)、每个属性选择符(例 [attr=”"] )、每个伪类(例 :hover),加 0,0,1,0。
- 每个元素或伪元素(例 :firstchild)等,加 0,0,0,1。
- 其他选择符(例 全局选择符 *,子选择符 >),加 0,0,0,0。
最后逐位相加数字串,得到最终的 Specificity 值,按照从左到右的顺序逐位比较。
除了 Specificity 还有一些其他规则:
- !important 声明的规则高于一切,如果 !important 声明冲突,则比较优先权。
- 如果优先权一样,则按源码中“后来者居上”的原则。
- 由继承而得到的样式属性不参与 specificity 的计算,低于一切其他规则(例 全局选择符 * )。
范例分析:
h1 {color: red;}/* 只有一个普通元素加成,结果是 0,0,0,1 */body h1 {color: green;}/* 两个普通元素加成,结果是 0,0,0,2 *//*0,0,0,1 小于 0,0,0,2 ,后者胜出*/
h2.grape {color: purple;}/* 一个普通元素、一个class选择符加成,结果是 0,0,1,1*/h2 {color: silver;}/*一个普通元素,结果是 0,0,0,1 *//*0,0,1,1 大于 0,0,0,1 ,前者胜出*/
html > body table tr[id=”totals”] td ul > li {color: maroon;}/* 7个普通元素、一个属性选择符、两个其他选择符(子选择符 >),结果是0,0,1,7 */li#answer {color: navy;}/* 一个ID选择符,一个普通选择符,结果是0,1,0,1 *//*0,0,1,7 小于 0,1,0,1,后者胜出*/
举国同悲,一条CSS代码把网页变黑白
五 19th
加在CSS里面网页就可以变黑白的了,但是FLASH还是彩色
IETester多IE版本共存的解决方案
五 14th
用WEB标准设计网页最麻烦的可能就是在各浏览器里面的兼容性问题,其中IE的各版本兼容性问题又是最头疼的,多版本IE共存一直是个难题,现在好了,有了IETester,可支持支持IE5.5——IE8,可以基本满足所有这方面的需求了(IE5,IE4就算了吧。。。)截止到09年8月最新版本0.3.5已经可以支持win7了
下载地址:http://www.my-debugbar.com/ietester/install-ietester-v0.3.5.exe

div层总是被flash层遮盖的解决方案
五 9th
在网页设计中经常由于客户的种种需求,而需要DIV层和FLASH的交互,但是往往DIV都被FLASH遮盖住了。
过去参与的一个项目:http://www.digitalwuhan.gov.cn/index.html(该网站问题多多就不说了,各位就不用批网站的问题了,现在只讨论本论题。)
顶部的flash就涉及此问题,具体是怎么解决的呢?因为今天看到有人提出此问题,就把解决方案拿出来分析一下。
先看该网站的FLASH加载代码:
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" name="red1" width="1003" height="218" align="middle" id="red1">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="images/top_blue.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="bgcolor" value="#ffffff" />
<embed src="images/top_blue.swf" quality="high" wmode="transparent" bgcolor="#ffffff" width="1003" height="218" name="red1" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
主要起作用的就是用红色和绿色标注的这两句,其中红色的<param name="wmode" value="transparent" />这句主要用于IE下的效果实现,绿色的wmode="transparent"则是Firefox下效果实现的代码。
附加资料:
关于wmode属性资料:
(可选)允许使用 Internet Explorer 4.0 中的透明 Flash 内容、绝对定位和分层显示功能。此标记/属性仅在带有 Flash Player ActiveX 控件的 Windows 中有效。
"Window"在 Web 页上用影片自己的矩形窗口来播放应用程序。"Window"表明此 Flash 应用程序与 HTML 层没有任何交互,并且始终位于最顶层。
"Opaque" 使应用程序隐藏页面上位于它后面的所有内容。
"Transparent"使 HTML 页的背景可以透过应用程序的所有透明部分显示出来,并且可能会降低动画性能。
"Opaque windowless"和"Transparent windowless"都可与 HTML 层交互,从而允许 SWF 文件上方的层遮蔽应用程序。这两种选项之间的差异在于"Transparent"允许透明,因此,如果 SWF 文件的某一部分是透明的,则 SWF 文件下方的 HTML 层可以透过该部分显示出来,而"opaque"则不会显示。
如果忽略此属性,默认值为 Window。仅适用于 object。
最后更新:2009-2-16
