webrebuild.org第四届年会——金秋四城联动

完美去除IE下flash虚框

2007年07月18日 | HTML/CSS

点此下载

只需加载这个js即可，不用修改任何html代码

flash代码示例：

html
<object type="application/x-shockwave-flash"  data="test.swf" style="">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="test.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
</object>
已有 0 条评论

(X)HTML Strict 下的嵌套规则

2007年07月11日 | HTML/CSS

译者注：时间匆忙没有来得及细细研究，希望可以讨论并且完善说明部分（现在说明并不是很全面）。

下面是一份在 HTML 4 Strict 和 XHTML 1.0 Strict 下必须遵守的标签嵌套规则，比如你不能在 < a > 里面再嵌入一个 < a > 这样的约定。

说明：

* 为了方便读者阅读，本文中的标签使用了大写（根据 XHTML 的规则，元素名必须小写，比如 < html > 而不应是 < HTML >）
* 小写的单词表明一组或一系列 HTML 标签
* 每一项条目（标签）后都跟随一组标签列表，如果没有这个列表，那么表明该条目（标签）内部不允许包含任何标签。这意味着该条目内部只能包含纯文本内容（#PCDATA，见下文）。如果注明 (empty)，这意味着该条目内部不允许包含任何形式的内容。
* #PCDATA 的意思是“parsed character data”，即纯文本内容（不包括任何 HTML 标签，但是转义内容可以存在，比如 ä 和 ä）
* CDATA 的意思是“character data”，这意味着不包括转义内容的纯文本内容，详细内容可以参考CDATA Confusion
* excluding … 意即不得直接或者间接的包含所列的元素
(X)HTML Strict 下的嵌套规则

注1. 以上内容基于 [HTML 4.01 Specification] 的 Strict DTD。

注2. 对于 XHTML 1.0，基本上一致，不同点如下：

* 对于 < script > 和 < style > 的内容，在 HTML 4 里是 CDATA 而在 XHTML 里是 #PCDATA
* 在 XHTML 中，< table > 标签后可以紧跟一个 < tr >，而在 HTML 4.01 里，不允许这样，不过 < tbody > 标签又是可以省略的。意思就是说，如果代码中的 < table > 后紧跟 < tr >，对于 HTML 4.01，会隐性的生成一个 < tbody > 标签，而在 XHTML 里面就没有。这会影响到样式表使用 tbody 作为选择器。

原文地址：junchenwu.com

已有 0 条评论

Web Accessibility工具条

2007年07月01日 | HTML/CSS

Web Accessibility工具条
是针对IE/WIN用户提供的一个试用工具的控制面板
FF可以用Web Developer Extension插件~

Vision Australia

AIS亲和信息解决方案

点此下载Web Accessibility1.2中文版

已有 0 条评论

权威系列 电子书下载

2007年06月30日 | HTML/CSS

1、《CSS权威指南》大小:19.25MB

http://www.nilaiwen.com/study/css.rar

http://www.geekso.com/attachment/CSSqw.rar

2、《Javascript权威指南（第四版）》大小:19.92MB

http://www.nilaiwen.com/study/JavaScript.rar

http://www.geekso.com/attachment/JavaScript4.rar

3、《html和xhtml权威指南（第五版）》大小:64.80MB 镜像下载

http://www.ddup.com.cn/EBook/ShowSoftDown.asp?UrlID=1&SoftID=145

4、《网站重构 – 应用Web标准进行设计》大小:20.06MB 镜像下载

http://www.king-js.com/nimg/wzcg.pdf

已有 0 条评论

好文.

2007年06月29日 | HTML/CSS

清除浮动
Roger Johansson-Clearing FLoated Images inBody Text

How to Clear Floats Without Structural Markup

CSS HACK
Strategies for Long-Term CSS Hack Management

CSS调整图片大小/切割
Experiments
with wide images

JS给组件定位准确的绝对位置
Shaun Inman-AbsolutelyPositive

W3C表格规范定义
www.w3.org/tr/html401/struct/tables.html
www.456bereast-reet.com/archive/200410/bring_on_the_tables

已有 0 条评论

XHTML guide to semantic

2007年06月27日 | HTML/CSS

http://blue-anvil.com/archives/guide-to-semantic-mark-up
有时间再翻

已有 0 条评论

ie5+ PNG Fix

2007年06月25日 | HTML/CSS

原文：http://www.twinhelix.com/css/iepngfix/

下载ie5+PngFix
在TwinHelix的基础上作出修改：
如果background设置了repeat属性(repeat-x/repeat-y/repeat)
则AlphaImageLoader属性sizingMethod的值为“scale”，否则为“crop”
(查看全文»)

已有 5 条评论

相同结构的40种CSS布局

2007年06月15日 | HTML/CSS

从blank那里淘来的
http://blog.html.it/layoutgala/
2列液态收缩的问题困扰着..
有时间看看了：http://blog.html.it/layoutgala/LayoutGala32.html

已有 0 条评论

纯CSS的图片展示效果

2007年04月05日 | HTML/CSS

原文：http://bbs.blueidea.com/thread-2728504-1-1.html
然后还在回帖中看到一个更强的：http://www.cssplay.co.uk/menu/lightbox.html

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”zh” lang=”zh”>
<head profile=”http://www.w3.org/2000/08/w3c-synd/#”>
<meta http-equiv=”content-language” content=”zh-cn” />
<meta http-equiv=”content-type” content=”text/html;charset=gb2312″ />

<style>

dl {
position:absolute;
width:240px;
height:170px;
border:10px solid #eee;
}
dd {
margin:0;
width:240px;
height:170px;
overflow:hidden;
}
img {
border:1px solid black
}
dt {
position:absolute;
right:3px;
top:50px;
}
a {
display:block;
margin:1px;
width:20px;
height:20px;
text-align:center;
font:700 12px/20px “宋体”,sans-serif;
color:#fff;
text-decoration:none;
background:#666;
border:1px solid #fff;
filter:alpha(opacity=40);
opacity:.4;
}
a:hover {
background:#000
}
</style>

<dl>
<dt><a href=”#a” title=”">1</a><a href=”#b” title=”">2</a><a href=”#c” title=”">3</a></dt>
<dd>
<img src=”http://farm1.static.flickr.com/80/251133988_e0b8174060_m.jpg” alt=”" title=”" id=”a” />
<img src=”http://farm1.static.flickr.com/6/76318014_e50414fe42_m.jpg” alt=”" title=”" id=”b” />
<img src=”http://farm1.static.flickr.com/48/172522117_410a1e87c1_m.jpg” alt=”" title=”" id=”c” />
</dd>
</dl>

扩展应用：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”zh” lang=”zh”>
<head profile=”http://www.w3.org/2000/08/w3c-synd/#”>
<meta http-equiv=”content-language” content=”zh-cn” />
<meta http-equiv=”content-type” content=”text/html;charset=gb2312″ />

<style>

dl {
position:absolute;
width:240px;
height:170px;
border:10px solid #eee;
}
dd {
margin:0;
width:240px;
height:170px;
overflow:hidden;
}
dt {
position:absolute;
right:1px;
}

ul {
margin:0;
padding:0;
width:260px;
height:170px;
list-style:none;
background:url(“http://bbs.blueidea.com/attachments/2006/11/10/arrowb_kJrcZheJmiIF.gif“) no-repeat 75% 20px;
border:1px solid #ccc
}
#b {
background-position:75% center
}
#c {
background-position:75% 86%
}
li {
width:205px;
height:27px;
font:12px/27px “宋体”,sans-serif;
white-space:nowrap;
overflow:hidden;
}
dt a {
display:block;
margin:1px;
width:30px;
height:56px;
text-align:center;
font:700 12px/55px “宋体”,sans-serif;
color:#fff;
text-decoration:none;
background:#666;
}
dt a:hover {
background:orange
}
</style>
<dl>
<dt><a href=”#a” title=”">新闻</a><a href=”#b” title=”">娱乐</a><a href=”#c” title=”">体育</a></dt>
<dd>

<ul id=”a”>
<li>·<a href=”" title=”">国际新闻国际新闻国际新闻</a></li>
<li>·<a href=”" title=”">国际新闻国际新闻国际新闻</a></li>
<li>·<a href=”" title=”">国际新闻国际新闻国际新闻</a></li>
<li>·<a href=”" title=”">国际新闻国际新闻国际新闻</a></li>
<li>·<a href=”" title=”">国际新闻国际新闻国际新闻</a></li>
<li>·<a href=”" title=”">国际新闻国际新闻国际新闻</a></li>
</ul>

<ul id=”b”>
<li>·<a href=”" title=”">娱乐新闻娱乐新闻娱乐新闻</a></li>
<li>·<a href=”" title=”">娱乐新闻娱乐新闻娱乐新闻</a></li>
<li>·<a href=”" title=”">娱乐新闻娱乐新闻娱乐新闻</a></li>
<li>·<a href=”" title=”">娱乐新闻娱乐新闻娱乐新闻</a></li>
<li>·<a href=”" title=”">娱乐新闻娱乐新闻娱乐新闻</a></li>
<li>·<a href=”" title=”">娱乐新闻娱乐新闻娱乐新闻</a></li>
</ul>

<ul id=”c”>
<li>·<a href=”" title=”">体育新闻体育新闻体育新闻</a></li>
<li>·<a href=”" title=”">体育新闻体育新闻体育新闻</a></li>
<li>·<a href=”" title=”">体育新闻体育新闻体育新闻</a></li>
<li>·<a href=”" title=”">体育新闻体育新闻体育新闻</a></li>
<li>·<a href=”" title=”">体育新闻体育新闻体育新闻</a></li>
<li>·<a href=”" title=”">体育新闻体育新闻体育新闻</a></li>
</ul>
</dd>
</dl>

已有 1 条评论

IE 特有注释(hack)

2007年04月05日 | HTML/CSS

IE特有注释格式：

html
<!--[if *condition IE *version]>contend<![endif]-->

*condition 值说明：

  • gt: greater than，选择条件版本以上版本，不包含条件版本
  • lt: less than，选择条件版本以下版本，不包含条件版本
  • gte: greater than or equal，选择条件版本以上版本，包含条件版本
  • lte : less than or equal，选择条件版本以下版本，包含条件版本

ex.:

html
<!--[if lt IE 7.0]>IE7.0以下可见（不包括ie7.0）<![endif]-->
已有 1 条评论
3/3123