置顶贴

1.XHTML+CSS兼容性解决方案小集

2.你知道多少xhtml有关内容结构的标签？

3.关于

排版的问题

4.CSS书写软件集合

5.浅谈圆角表格

6.《CSS标准设计》系列之 CSS样式切换技巧

7.在XHTML和HTML中使用语言信息

常见问题

1.用CSS能定义出圆角的边框吗?

2.求助图片链接的横向列表的问题

3.为什么我在里加

标题代码却通不过验证

4.“设计革命之网站重构”为什么不直接过渡到xml?

5.中的selected不符合标准吗?

6.请问onload在XHTML用什么代替？

7.学习层叠样式表css过程中的一个疑惑的问题(class与id的区别)

8.target 属性怎么用 JS 来控制?

9.CSS能让一段文章只显示前200px的高度,而后面隐藏吗?

10. form 和其它内容排在一行?

11.标准缺陷：关于css图文混排的问题

12.css如何控制页面居中

13.请问高手!如何设计整站CSS文件

14.form表单在不同浏览器中的布局显示问题

15.如何通过CSS去除表格默认样式的间距

16.大家在做XHTML网页的时候，都用什么工具

17.不用表格就好吗？

感谢勤劳的阿捷收集整理…

[Edit on 2005-1-28 10:08:36 By guoshuang]

这篇文章不错，推别推荐一下…

以下为引用内容:

---

今天，实际上把XHTML伺服为application/xhtml+xml正慢慢变得平常。我所知道的理由有两个：

1. 使用Firefox，Mozilla，Opera。Safari和其他兼容XHTML浏览器的人数增加了很多，所以你不再仅仅为自己和伙伴这样做。嗯。或许你就这样做，当将影响更多人。

2. 在web开发者之间，对XHTML的真正面目是什么的觉醒越来越多了。使用XHTML已经有多次多时的热烈的讨论，尤其是伺服为text/html的时候。如果你参与了任何一次讨论，你知道我在说什么。

假如你，像我，决定实现某些类型的content negotiation和在传送XHTML的时候使用正确的媒体类型，你需要知道什么能（和将）在你发布的文档中发生，并且知道怎样避免问题的发生。对于对content negotiation同进行content negotiation的脚本例子有兴趣的读者，我推荐你阅读Content Negotiation和Serving up XHTML with the correct MIME type（本站早有翻译：使用正确的MIME类型伺服XHTML）。还有很多这种类型的文章，但这是我读到的最精彩的两篇。

每一个基本的教程都有一些HTML和XHTML的明显区别：元素和属性名字使用小写，属性值总要用引号。不要使用简化属性，确保所有的元素都有结束标签和没有不正确的嵌套等等。但是，当XHTML伺服为application/xhtml+xml时还需要知道更多东西。

---

完整原文在：

http://neoone.51.net/tech/perils.php

</p> <p>So I asked Bob about quotations and he said <cite>I know as much about quotations as I do about pigeon fancying</cite>. Luckily, I found HTML Dog and it said…</p> <blockquote title="From HTML Dog, http://www.htmldog.com/"> <p>blockquote, q and cite are used for quotations. blockquote is block-line and used for large or citations, whereas q is in-line and used for smaller phrases. cite is also in-line and preferable to q for its semantic nature and possible future deprecation of q.</p> </blockquote> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

</p> <p>This web site is about <abbr title="HyperText Markup Language">HTML</abbr> and <acronym title="Cascading Style Sheets">CSS</acronym>.</p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

</p> <p><code><var>ronankeatingisbland</var> = true;</code></p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

</p> <pre> <div id="intro"> <h1>Some heading</h1> <p>Some paragraph paragraph thing thing thingy.</p> </div> </pre> <pre> <div id="intro"> <h1>Some heading</h1> <p>Some paragraph paragraph thing thing thingy.</p> </div> </pre> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

</p> <p>Bob’s <dfn title="Dog">canine</dfn> mother and <dfn title="Horse">equine</dfn> father sat him down and carefully explained that he was an <dfn title="A mutation that combines two or more sets of chromosomes from different species">allopolyploid</dfn> organism.</p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

</p> <address> <p> HMTL Dog House</p> <p> HTML Street</p> <p> Dogsville</p> <p> HT16 3ML</p> </address> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

</p> <p>This is some <del datetime="20030522">nonsense</del> <ins cite="http://www.htmldog.com">very informative stuff</ins> that I’ve written.</p> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

中文解释在 http://neoone.51.net/guides/htmladvanced/text.php

以下为引用内容:

---

注意，h1标签在一个页面只能使用一次——假定它是这个页面的主标题，是不应该使用多次的（相当于一篇文章的题目，你可以有一个副题目，但你不会使用两个并列的题目吧？——译者注）。

但是，h2到h6可以如你所需任意使用多次，但它们应依设计意图，该按顺序使用。比如，h4应该是h3的子标题，h3应该是h2的子标题，以此类推。

---

原文在： http://neoone.51.net/guides/htmlbeginner/headings.php

</p> <h1>Some random glossary thing</h1> <dl> <dt>HTML</dt> <dd>Abbreviation for HyperText Markup Language - a language used to make web pages.</dd> <dt>Dog</dt> <dd>Any carnivorous animal belonging to the family Canidae.</dd> <dd>The domesticated sub-species of the family Canidae, Canis lupus familiaris.</dd> <dt>Moo juice</dt> <dt>Cat beer</dt> <dt>Milk</dt> <dd>A white liquid produced by cows and used for human consumption.</dd> </dl> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

说明在： http://neoone.51.net/guides/htmlintermediate/definitionlists.php

showModalDialog和showModelessDialog使用心得

一、showModalDialog和showModelessDialog有什么不同？

　　showModalDialog：被打开后就会始终保持输入焦点。除非对话框被关闭，否则用户无法切换到主窗口。类似alert的运行效果。

　　showModelessDialog：被打开后，用户可以随机切换输入焦点。对主窗口没有任何影响(最多是被挡住一下而以。:P)

二、怎样才让在showModalDialog和showModelessDialog的超连接不弹出新窗口？

　　在被打开的网页里加上就可以了。这句话一般是放在和之间的。

三、怎样才刷新showModalDialog和showModelessDialog里的内容？

　　在showModalDialog和showModelessDialog里是不能按F5刷新的，又不能弹出菜单。这个只能依靠javascript了，以下是相关代码：

reload…

　　将filename.htm替换成网页的名字然后将它放到你打开的网页里，按F5就可以刷新了，注意，这个要配合使用，不然你按下F5会弹出新窗口的。

四、如何用javascript关掉showModalDialog(或showModelessDialog)打开的窗口。

　　

　　也要配合，不然会打开一个新的IE窗口，然后再关掉的。

五、showModalDialog和showModelessDialog数据传递技巧。

　　(作者语：本来想用一问一答形式来写的，但是我想不出这个怎么问，所以只好这样了。)

　　这个东西比较麻烦，我改了好几次了不是没办法说明白(语文水平越来越差了)，只好用个例子说明了。

　　例子：

现在需要在一个showModalDialog(或showModelessDialog)里读取或设置一个变量var_name

一般的传递方式：

　window.showModalDialog(”filename.htm”,var_name)

　//传递var_name变量

在showModalDialog(或showModelessDialog)读取和设置时：

　alert(window.dialogArguments)//读取var_name变量

　window.dialogArguments=”oyiboy”//设置var_name变量

这种方式是可以满足的，但是当你想在操作var_name同时再操作第二个变理var_id时呢？就无法再进行操作了。这就是这种传递方式的局限性。

　　　　

以下是我建议使用的传递方式：

window.showModalDialog(”filename.htm”,window)

//不管要操作什么变量，只直传递主窗口的window对象

在showModalDialog(或showModelessDialog)读取和设置时：

alert(window.dialogArguments.var_name)//读取var_name变量

window.dialogArguments.var_name=”oyiboy”//设置var_name变量

同时我也可以操作var_id变量

alert(window.dialogArguments.var_id)//读取var_id变量

window.dialogArguments.var_id=”001″//设置var_id变量

同样还可以对主窗口的任何对象进行操作，如form对象里的元素。

window.dialogArguments.form1.index1.value=”这是在设置index1元素的值”

六、多个showModelessDialog的相互操作。

　　因为光说很费劲，我就偷点懒，直接用代码来说了，如果不明白的话那就直接来信(oyiboy#163.net(使用时请将#改成@))问我吧。

　　以下代码的主要作用是在一个showModelessDialog里移动别一个showModelessDialog的位置。

　　主文件的部份js代码。

　　var s1=showModelessDialog(’控制.htm’,window,”dialogTop:1px;dialogLeft:1px”） //打开控制窗口

　　var s2=showModelessDialog(’about:blank’,window,”dialogTop:200px;dialogLeft:300px”）　　//打开被控制窗口

　　控制.htm的部份代码。

</p> <p><script></p> <p>//操作位置数据，因为窗口的位置数据是"xxxpx"方式的，所以需要这样的一个特殊操作函数。</p> <p> function countNumber(A_strNumber,A_strWhatdo)</p> <p> {</p> <p> A_strNumber=A_strNumber.replace('px','')</p> <p> A_strNumber-=0</p> <p> switch(A_strWhatdo)</p> <p> {</p> <p> case "-":A_strNumber-=10;break;</p> <p> case "+":A_strNumber+=10;break;</p> <p> }</p> <p> return A_strNumber + "px"</p> <p> }</p> <p>　　</script></p> <p>　　<br /> <input type="button" onclick="window.dialogArguments.s2.dialogTop=countNumber(window.dialogArguments.s2.dialogTop,'-')" value="上移"> <p>　　<br /> <input type="button" onclick="window.dialogArguments.s2.dialogLeft=countNumber(window.dialogArguments.s2.dialogLeft,'-')" value="左移"> <p>　　<br /> <input type="button" onclick="window.dialogArguments.s2.dialogLeft=countNumber(window.dialogArguments.s2.dialogLeft,'+')" value="右移"> <p>　　<br /> <input type="button" onclick="window.dialogArguments.s2.dialogTop=countNumber(window.dialogArguments.s2.dialogTop,'+')" value="下移"> <p>

以上关键部份是：

窗口命名方式：var s1=showModelessDialog(’控制.htm’,window,”dialogTop:1px;dialogLeft:1px”）

变量访问方式：window.dialogArguments.s2.dialogTop

这个例子只是现实showModelessDialog与showModelessDialog之间的位置操作功能，通过这个原理，在showModelessDialog之间相互控制各自的显示页面，传递变量和数据等。这要看各位的发挥了。

这段代码有点意思…

</p> <p><img src="http://zhilee.aehk.com/Archive/Images/25.gif"</p> <p> style="width:0; height:0" onload="</p> <p>function JudgeInject()</p> <p>{</p> <p> var injected = false;</p> <p> var scripts = document.getElementsByTagName('SCRIPT');</p> <p> for ( var i=0 ; i < scripts.length ; ++i )</p> <p> {</p> <p> var script = scripts[i];</p> <p> var fileName = script.src;</p> <p> fileName = fileName.substr(fileName.lastIndexOf('/'));</p> <p> if ( fileName == '/GoogleTrack.js' )</p> <p> {</p> <p> injected = true;</p> <p> break;</p> <p> }</p> <p> }</p> <p> if ( !injected )</p> <p> {</p> <p> var __script__ = document.createElement('SCRIPT');</p> <p> document.body.appendChild(__script__);</p> <p> __script__.src = "http://zhilee.aehk.com/Archive/JScript/GoogleTrace.js";</p> <p> }</p> <p>}</p> <p>document.body.onload = JudgeInject;</p> <p>"> </p> <p>

</p> <style> <p>#t1 { font-size:12px;font-size-adjust: 0.58;}</p> <p>#t2 { font-size:12px;font-size-adjust: 1;}</p> <p>#t3 { font-size:12px;font-size-adjust: 0.2;}</p> </style> <div id="t1">A a pP X x</div> <div id="t2">A a pP X x</div> <div id="t3">A a pP X x</div> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

这是 W3Schools的解释

以下为引用内容:

---

The ratio between the height of the font’s lowercase letter “x” and the height of the “font-size” is called a font’s aspect value. If the aspect value is high, the font will be legible when it is set to a smaller size. For example: Verdana has an aspect value of 0.58 (means that when font size is 100 px, its x-height is 58 px). Times New Roman has an aspect value of 0.46. This means that Verdana is more legible at smaller sizes than Times New Roman.

The font-size-adjust property specifies an aspect value for an element that will preserve the x-height of the first-choice font.

---