方法：
针对IE 在<object></object>内加上参数<param name="wmode" value="opaque" />
针对FF 在<embed />内加上参数wmode="opaque"

标准的的Flash插入
<!-- 标准的的Flash插入
设置高度与宽度：
width="400" height="400"
设置路径：
data="style/flash/001.swf" 与 value="style/flash/001.swf"
替代文本或替代图片：
<a href="" title=""><img src="" alt="" /></a> 也可以不要这段
-->
<object type="application/x-shockwave-flash" data="style/flash/001.swf" width="400" height="400">
<param name="movie" value="style/flash/001.swf" />
<a href="style/flash/001.swf"><img src="style/img/001.jpg" alt="Flash动画" /></a>
</object>

不会遮住层的Flash 
<!-- 不会遮住层的Flash
让Flash不档住浮动对象或层的关键属性：
<param name="wmode" value="opaque" />
<embed wmode="opaque"></embed>
-->
<object type="application/x-shockwave-flash" data="style/flash/001.swf" width="400" height="400">
<param name="movie" value="style/flash/001.swf" />
<param name="wmode" value="opaque" />
<embed wmode="opaque"></embed>
<a href="style/flash/001.swf"><img src="style/img/001.jpg" alt="Flash动画" /></a>
</object>

透明的Flash 
<!-- 透明的Flash
让Flash透明的关键属性：
<param name="wmode" value="transparent">
-->
<object type="application/x-shockwave-flash" data="style/flash/001.swf" width="400" height="400">
<param name="movie" value="style/flash/001.swf" />
<param name="wmode" value="transparent">
<a href="style/flash/001.swf"><img src="style/img/001.jpg" alt="Flash动画" /></a>
</object>

（二）FLASH帮助

wmode 属性/参数值Window | Opaque | Transparent

模板变量：$WM

说明
（可选）允许使用 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。

for (var i=0; i<list.length; i++) {
var tmp = new rolinItem(list[i],state);
if (i == 0) tmp.pShow();
}
}

function rolinItem(obj,state) {
var speed = 0.0666;
var range = 1;
var interval;
var tarH;
var tar = this;
var head = getFirstChild(obj);
var content = getNextChild(head);
var isOpen = false;
this.pHidden = function() {
if (isOpen) hidden();
}
this.pShow = show;

var baseH = content.offsetHeight;
content.style.display = "none";
var isOpen = false;

head.onmouseover = function() {
this.style.background = "#EFEFEF";
}

head.onmouseout = mouseout;

head.onclick = function() {
this.style.background = "#EFEFEF";
if (!state.show && !state.hidden) {
if (!isOpen) {
head.onmouseout = null;
show();
} else {
hidden();
}

}
}

function mouseout() {
this.style.background = "#FFF"
}
function show() {
head.style.borderBottom = "1px solid #DADADA";
state.show = true;
if (state.openObj && state.openObj != tar ) {
state.openObj.pHidden();
}
content.style.height = "0px";
content.style.display = "block";
content.style.overflow = "hidden";
state.openObj = tar;
tarH = baseH;

interval = setInterval(move,10);
}
function showS() {
isOpen = true;
state.show = false;
}

function hidden() {
state.hidden = true;
tarH = 0;
interval = setInterval(move,10);
}

function hiddenS() {
head.style.borderBottom = "none";
head.onmouseout = mouseout;
head.onmouseout();
content.style.display = "none";
isOpen = false;
state.hidden = false;
}

function move() {
var dist = (tarH - content.style.height.pxToNum())*speed;
if (Math.abs(dist) < 1) dist = dist > 0 ? 1: -1;
content.style.height = (content.style.height.pxToNum() + dist) + "px";
if (Math.abs(content.style.height.pxToNum() - tarH) <= range ) {
clearInterval(interval);
content.style.height = tarH + "px";
if (tarH != 0) {
showS()
} else {
hiddenS();
}
}
}

}
var $ = function($) {return document.getElementById($)};
String.prototype.pxToNum = function() {return Number(this.replace("px",""))}
function getFirstChild(obj) {
var result = obj.firstChild;
while (!result.tagName) {
result = result.nextSibling;
}
return result;
}

function getNextChild(obj) {
var result = obj.nextSibling;
while (!result.tagName) {
result = result.nextSibling;
}
return result;
}
//]]>
</script>
 </head>
<body>
<ul class="rolinList" id="rolin">
  <li>
    <h2>网页代码站1</h2>
    <div class="content">
      <p>最专业的代码下载网站 - 致力为中国站长提供有质量的代码！<br />
        <br />
        <a href="http://www.webdm.cn/" target="_blank">http://www.webdm.cn/</a></p>
    </div>
  </li>
  <li>
    <h2>网页代码站2</h2>
    <div class="content">
      <p>最专业的代码下载网站 - 致力为中国站长提供有质量的代码！<br />
        <br />
        <a href="http://www.webdm.cn/" target="_blank">http://www.webdm.cn/</a></p>
    </div>
  </li>
  <li>
    <h2>网页代码站3</h2>
    <div class="content">
      <p>最专业的代码下载网站 - 致力为中国站长提供有质量的代码！<br />
        <br />
        <a href="http://www.webdm.cn/" target="_blank">http://www.webdm.cn/</a></p>
    </div>
  </li>
  <li>
    <h2>网页代码站4</h2>
    <div class="content">
      <p>最专业的代码下载网站 - 致力为中国站长提供有质量的代码！<br />
        <br />
        <a href="http://www.webdm.cn/" target="_blank">http://www.webdm.cn/</a></p>
    </div>
  </li>
  <li>
    <h2>网页代码站5</h2>
    <div class="content">
      <p>最专业的代码下载网站 - 致力为中国站长提供有质量的代码！<br />
        <br />
        <a href="http://www.webdm.cn/" target="_blank">http://www.webdm.cn/</a></p>
    </div>
  </li>
  <li>
    <h2>网页代码站6</h2>
    <div class="content">
      <p>最专业的代码下载网站 - 致力为中国站长提供有质量的代码！<br />
        <br />
        <a href="http://www.webdm.cn/" target="_blank">http://www.webdm.cn/</a></p>
    </div>
  </li>
</ul>
</body>
</html>

IE Bug修正

1- Bug修正：IE双倍Margin bug

- 元素是浮动的-并且给元素一个和浮动同一个方向的margin-结果显示两倍的指定margin大小。这个方法非常简单。所有您需要做的就是添加一个display: inline规则到你的浮动元素。所以，你只是把例如这样的代码：

#content {
    float: left;
    width: 500px;
    padding: 10px 15px;
    margin-left: 20px; }

改为如下代码 :

#content {
    float: left;
    width: 500px;
    padding: 10px 15px;
    margin-left: 20px;
    display:inline;
}

2- 克服盒模型hack

- 如果你想给任一div指定宽度，不要指定padding或margin。只要另建一个内部(嵌套)的没有宽度的div并设定其padding和margin来替代。所以，不要这样做：

#main-div{
width: 150px;
border: 5px;
padding: 20px;
}

这样做:

#main-div{
width: 150px;
}
#main-div div{
border: 5px;
padding: 20px;
}

3-IE无视min-height属性

- min-height属性在firefox下表现很好但是IE却无视了它，IE的height就像FF的min-height.注意：IE7没有这个bug。

/* 对主流浏览器 */
.container {
width:20em;
padding:0.5em;
border:1px solid #000;
min-height:8em;
height:auto;
}
/* 对IE浏览器 */
/*\*/
* html .container {
height: 8em;
}
/**/

4- Min-Width for IE

-一个IE的min-width缺陷的修正。

块级元素居中

5-块级元素居中

- 有很多种方法可以使块级元素居中；选择哪种方法取决于你的百分比大小设置或使用更绝对的数值。

整个页面内容居中：

body{
text-align: center;
}
#container
{
text-align: left;
width: 960px;
margin: 0 auto;
}

6-使用CSS垂直对齐

- 如果你想知道怎么才能正确的实现垂直对齐，只需要简单的为你的文本指定和容器等高的line-height。

#wrapper {
	width:530px;
	height:25px;
	background:url(container.gif) no-repeat left top;
	padding:0px 10px;
}
#wrapper p {
	line-height:25px;
}

栏目问题

7- 你的CSS栏目被搞乱的最大原因

-一个容易理解的就如何解决普遍的CSS栏目的问题的有用的图解和代码片断的文章.

8- 扩大的盒子Bug

- 当您尝试创建一个两列浮动的布局， IE浏览器将创建一个“浮动下降” ，这是由于在一个固定宽度的浮动DIV内存在超出宽度的内容，这些内容必须融入布局中的一个特定位置。这片文章详述了几种可能的替代方法。

CSS 定位

9- 理解CSS定位Part 1

-一系列很有趣的文章，这些文章不仅包括定位，还包括包括定义布局的属性，比如display和float ，和对CSS3 布局模型的一个预览。第一部分将会介绍定位和display属性。 Part1, Part2, Part3 将会带给你对定位的更深的理解.

10- relative和absolute有什么不同?

- 对于刚开始使用CSS的人来说，无论相对行为还是绝对定位都是非常令人沮丧的。这个问题的答案将会让你的迷惑变的清晰些。

#redSquare
{
position: relative;
bottom: 40px;
right: 40px;
}

显示这样:

11-HangTab(固定标签)

- 在浏览器边缘创建一个固定的标签(即使内容居中)。查看Panic’s website for their software Coda.

#hang_tab {
position: absolute;
top: 7px;
left: 0px;
width: 157px;
height: 93px;
}

CSS 浮动概念

12- CSS 浮动原理：你应该知道的事情

- SmashingMagazine 浏览几十个相关文章，并选择了在用float开发基于CSS的布局时你应该牢记的最重要的东西。

<div> <!-- float container -->
<div style="float:left; width:30%;"><p>Some content</p></div>
<p>Text not inside the float</p>
<div style="clear:both;"></div>
</div>

13- Floatutorial: CSS float的简单教程

- Floatutorial带你查看浮动元素的基本原理，例如图片，下拉菜单，下一个和返回按钮，相册，内部列表和多列布局。

14- 清除浮动- 正确的方法

- 清除浮动可以说是CSS开发中的一个最令人沮丧的方面，最佳方法之一是在您的网站上使用EasyClearing .

/* EasyClearing http://www.positioniseverything.net/easyclearing.html */
#container:after
{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

#container
{display: inline-block;}

/* Hides from IE-mac \*/
* html #container
{height: 1%;}

#container
{display: block;}
/* End hide from IE-mac */

更简单的圆角实现

15- 迈克询问CSS圆角建议

- “最简单的方法是使用一个大的gif图片，然后我将给我的盒子编码”

<div class="roundBox">
  <p>beautifully-encapsulated paragraph</p>
  <div class="boxBottom"></div>
</div>

“并给它添加背景”

.roundBox {
  background:transparent url(roundBox.gif) no-repeat top left;
  width:340px;
  padding:20px;
}
.roundBox .boxBottom {
  background:white url(roundBox.gif) no-repeat bottom left;
  font-size:1px;
  line-height:1px;
  height:14px;
  margin:0 -20px -20px -20px;
}

同样 Askthecssguy 介绍了 Google Analytics中使用的技术, 他是通过在每个角留下1px的边框来实现圆角的效果，这是一种不用静态图片实现圆角的新方法。你可以在这里查看一个示例.

16-3 个简单的步骤实现圆角

- Alen Grakalic研究了通过三个步骤来编写一个固定宽度的圆角布局. 他也创建了一个 demo .

CSS表单问题

17- 创建伟大的网页表单的技巧

- Cris Coyer和我们分享了浮动标签，:focus伪类，使用建议等技巧。他同样建立了又好又简单的联系表单, 他首先将它发布在这里.

label {
	float: left;
	text-align: right;
	margin-right: 15px;
	width: 100px;
}

18- 简洁而纯粹的CSS表单设计

- 对于的CSS爱好者来说，本教程表述了一个如何设计纯粹的CSS表单而不使用HTML表格的建议。你可以在这里抓取代码.

19-用javascript自动填充文本输入框

- 有时候，我们需要向用户解释他们理应填写文本输入框。当没有标签可以显示，一个通用的解决方案是，把一些占位符文本放在文本框中，并让它当标签来用。本教程介绍了一种很好的解决办法，并启用JavaScript ，label 元素是隐藏的，而且input 元素的title 属性值被复制到value 属性. 如果已禁用JavaScript ，标签显示在被留空的文字输入框的上面。一个简单的演示，您可以在这里看到演示.

值得检验的css技巧

20- 跨浏览器的用背景图的水平线

- 你或许想使用一个定制的图片来创建一个跨浏览器的水平线作为内容的分隔。

div.hr {
background: #fff url(myhrimg.gif) no-repeat scroll center;
height: 10px
}
div.hr hr {
display: none
}

你的代码可以像这样:

<div class="hr"><hr /></div>

为什么要设置favicon图标：

以图像形态显示，比文字显示更能加深浏览者的记忆和印像。

可以塑造网站的品牌。这也是在网站推广的范畴之内，

可以让浏览器的收藏夹中除显示相应的标题外，还以图标的方式区别不同的网站。

给人以更专业的感觉。

如何设置网页图标

如何设置：

制作一个16×16像素的图像（logo），也可以制作一个200×200像素的图像或更大，然后等比列缩小为16×16像素，（200×200像素方便制作，favicon的规格一般为16×16像素）

可以用相关软件把jpg格式转换成ico图标格式。

我是用在线生成的，这样方便快捷。

1、打开 http://www.chami.com/html-kit/services/favicon/

2、页面里有个浏览按钮，点击找到你刚才做的图像（logo）.

3、点击 Generate FavIcon.ico 按钮提交

4、稍等片刻后，你的favicon.ico将会自动生成，可以点击旁边的保存按钮将favicon.ico下载到本地。

5、上传favicon.ico文件到网站根目录下

6、最后在网页首面HTML的<head>……</head>标签之间插入代码：<link rel="shortcut icon" href="favicon.ico">

样式

我们继续说iUI这个框架。这个框架所做的事情，就是提供iPhone Friendly的交互方式与样式。为了简单起见，我们先来说说样式方面，iUI提供的不仅仅是一个CSS文件，基于这个CSS文件你所创建的页面能够符合iPhone的人机界面指引，并且看起来的效果贴近iPhone原生的应用程序，从而降低用户学习门槛，避免你自己设计的Web应用对iPhone操作不友善（例如按钮不够大，手指难以点击）。

交互

至于交互方面，iUI提供一个基于page的换页导航机制。这里所说的page不是一个Web页面，而是一个<body />内的顶级DOM元素，每一个这样的DOM元素都可以作为一个page，同一时间上仅显示一个page。页面上的所有链接，要么导致page转跳，要么导致整个页面转跳。这种转跳有如下几种情况。

转跳

如果链接的href指向的是一个锚点，例如#somePage，那么iUI就会在页面中寻找id="somePage"的page对象，然后进行转跳。

如果链接的href指向的是站内地址，例如/somePage.html，那么iUI就会使用AJAX的方法加载/somePage.html的内容并追加到<body />内，注意，/somePage.html必然是一个文档片段而不可能是完整的XHTML文档，否则把<html />追加到<body />下就是错误的了。追加的内容内可以有多个page，如果其中一个有selected="true"的属性，那么接下来将显示该page，否则显示追加内容中的第一个page。

最后一种情况是指向站内地址，但是有target="_replace"属性。iUI在看到target="_replace"属性后，就会知道该<a />所在的page内直属元素要被删除，并且替换为目标页面的内容。在这里用CSS来解释一下所谓的直属元素，body > ul#somePage > li > a[target="_replace"]，这里<li />就是<ul id="somePage />的直属元素了。这种转跳通常用于曾亮加载，例如iPhone内置的Mail打开邮箱后自动加载50封邮件，点击more之后再加载50封，Web界面上就可以通过这种方式实现——一个<ul />内包含51个<li />，前面50个对应50封邮件，最后一个<li />包含<a target="_replace" />的more链接，目标页面就是下50封邮件的<li />。

在转跳的时候，iUI提供了一种很好看的效果，你能够看到当前page从屏幕左边移出去，新的page从屏幕右边移进来，好像PowerPoint的某种幻灯片切换动画那样。如果添加了axis="y"属性，page还能够子底向下滚动。

历史记录

AJAX式的页内内容更新不是不好，问题就在于浏览器无法自动保存历史记录，导致前进后退按钮实效。iUI已经解决了这个问题，上述3种转跳中的前两种iUI都会自动创建新的hash以便创建历史记录，hash默认就是#_pageId的形式，如果当前显示的page没有id，那么hash就按照增量自动分配id。

在拥有历史记录之后，用户就可以通过浏览器的后退按钮向前翻页了，此时相当于加载前面的page，iUI知道这是一个后退操作，就会提供反向的滚动效果（自左向右或自上向下）。

如果我访问页面的顺序是A > B > C > D > B，那么历史记录会如何呢？历史记录会变成A > C > D > B，也就是说第一次访问B时B从历史记录中删除并重新添加到最前的位置了。

演示

说了那么多，我们来看看iUI的实战效果吧！又是Facebook或者Digg的iPhone版？不是，我们来看看自己利用iUI开发一个小应用的效果以及成本如何。就在上个周末，我花了不到20小时做了个名为iBaidu的小东西，自动抓取Baidu的搜索结果与排行榜并以iPhone friendly的方式显示出来。以下是发布到YouTube的演示视频：

服务器端使用的技术是Ruby on Rails以及ASP.NET。为什么需要ASP.NET？这是一个很郁闷的问题，因为Baidu是基于GBK的，而RoR的编码转换能力其若无比，我懒得花时间去寻找适合的转码库，因此直接拿了ASP.NET来做抓去代理，抓取的时候顺便做一下编码转换。如果不是编码问题，那么只需要RoR就能轻松完成任务。

小结

在这篇文章中，我们已经看到了如果使用RoR搭配Prototype，不好意思，iUI才对，要设计一个iPhone friendly的Web应用程序是多么地容易，开发过程也相当敏捷。如果你喜欢iPhone开发系列的文章，欢迎订阅：

• Cat in Chinese (feed)
• Cat in dotNET (feed)

      无AJAX交互
　　第一种我们要看的交互，是完全不运用 javascript，这其中一个例子就是GMail。GMail的iPhone版其实就是由普通的GMail移动版修改过来的，界面上更贴近桌面版GMail了，然而交互性并没有如何提高，每一个点击都对应一次刷新，没有任何AJAX可言。
　　事实上，不用任何AJAX效果并不会让你的iPhone Web App低人一等，如果有人讥笑你的运用没有引入任何AJAX功能，你可以直接跟他说“GMail也没有”。因此，如果你在开发的流程 中决定不把任何时间投入到AJAX有关 技能的研究，这是没疑问 的，确保你的服务器响应速度，并且交互设计得当，那就行了。
　　以服务器端为中心的AJAX
　　接下来我们看看另外一些运用 ，例如之前说到的多个 ，就拿最基本 的AppMarks来说说吧。首先，运用 User Agent Switch修改 你的FireFox的user-agent属性，伪装为iPhone，然后打开AppMarks，并且打开Firebug。接着点 Menu -> Add -> Browse，看到出现AJAX请求了吧？猜猜这个请求是什么类型的，面向内容（传输更新上去的XHtml）、面向脚本（传输执行 更新操作的 JavaScript）还是面向数据（传输更新有关的JSON）？答案是——面向内容的！
      这可是Web App哦，不是一般带有一点点AJAX的网页哦，我们要MVC，我们要“先进”的面向数据，为什么要“落后”的面向内容呢？至今为止，我们能够看到的大部分iPhone Web APPS，都将MVC保留在服务器端了，客户端唯一须要知道的就是内容更新，不存在任何的客户端MVC模型。暂时我还没看到有面向脚本或者面向数据的，如果你见到有运用这样做了，请告诉我。
　 　我们继续说MVC的事情。现在大多运用 的设计方式是这样的：每一个应拥有一个view framework，然后每一次点击所作的操作就是切换view。例如刚才说到的AppMarks，从Menu进入Add是一个view切换，不过因为 Add这个view的内容是固定的，因此一早就包含在页面里，不用AJAX请求直接加载就行了。另外一种情况，就是好像加载Browse那样，是须要 AJAX把view请求过来才能加载的。除了切换view，我们还须要 action，例如提交数据就一定须要 action的。说到这里，感觉是不是和 RoR或者类似框架扯上联系 了？事实上，RoR，或者类似框架，确实很适合用来做iPhone Web Apps。
　　以客户端为中心的AJAX
　　那么除了RoR，我们还有别的选择吗？我们可以选择运用一些客户端框架来实现类似的效果。这样说吧，类似RoR那样每一个view都是一个模板，但不是rhtml，而是普通的html，没有复杂逻辑，点击连接后不是由RoR引擎调在服务器端用rhtml，而是客户端自己直接拦截了链接点击并用 AJAX的要领 去请求该html然后更新内容。这样一个框架，可以在Wrox的Professional iPhone and iPod toUCh Programming : Building Applications for Mobile Safari一书中见到。这本书写着2008年1月出版，但实际上已经出版，并且可以下载源代码。我暂时还没办法买到这本书，但源代码中就包括了这样一个客户端框架。
      然而，这种以客户端为中心的做法并没有真实 在客户端引入一个MVC，它只是基本 地把服务器端的MVC裁减掉了，服务器端只能基本的发送内容或响应提交，因此只适用于比上面的以服务器端为中心的模型更基本 的情景。如果你正在编写的运用不涉及大量的提交操作，或者根本就是Web1.0站点 ，我的意思是，单向传递信息不接受任何用户提交的站点，那么这种轻量级的模型就非常适用了。
　　小结
　　在这次的文章里，我们介绍了三种多见 的iPhone Web Apps交互方案，没有哪一个是绝对更好或者更坏的，按照你当前开发的运用做出选择吧。将来我们写文章深入探讨其中的一些实现细节，或者是交互模式，但前提是我先完成了多个 iPhone Web Apps。