城市漫延 - Web技术http://www.zisai.org/blog/http://www.zisai.org/blog/ 城市漫延--生活+娱乐+工作，我的人生路~~ - RainbowSoft Studio Z-Blog 1.8 Arwen Build 90619zh-CNCopyright Nooker.Com. Some Rights Reserved.Best View 1024*768.Fri, 03 Sep 2010 16:28:32 +0800标准北京时间是多少？wangjinbai@163.com (shadow)http://www.zisai.org/blog/post/329.htmWed, 03 Jun 2009 13:38:49 +0800http://www.zisai.org/blog/post/329.htm 北京标准时间：正在加载北京时间……



]]>Web技术http://www.zisai.org/blog/post/329.htm#commenthttp://www.zisai.org/blog/http://www.zisai.org/blog/feed.asp?cmt=329http://www.zisai.org/blog/cmd.asp?act=tb&id=329&key=f5fce881清除“input”的默认值wangjinbai@163.com (shadow)http://www.zisai.org/blog/post/319.htmMon, 02 Mar 2009 12:59:12 +0800http://www.zisai.org/blog/post/319.htm
]]>Web技术http://www.zisai.org/blog/post/319.htm#commenthttp://www.zisai.org/blog/http://www.zisai.org/blog/feed.asp?cmt=319http://www.zisai.org/blog/cmd.asp?act=tb&id=319&key=1fb80624用“*” “_”来区分 FF &I E7 & IE6wangjinbai@163.com (shadow)http://www.zisai.org/blog/post/301.htmTue, 09 Dec 2008 18:43:19 +0800http://www.zisai.org/blog/post/301.htm今天在调试DIV布局时发现padding 值在FF，IE6和IE7中都都不相同，于是想到了在阿捷的文章里说用“!important”来解决IE和Mozilla的布局差别，可是!important在IE7中也能被识别，FF能识别!important，这就起了冲突。上网搜寻解决办法，各种方法，皆用来试试，最后发现用“*” “_”来区别FF，IE7，IE6，比较好用。IE6支持下划线，IE7和firefox均不支持下划线，IE7能识别“*”，而FF不识别“*”。

于是，我们这样书写，首先什么也不加识别FF，再用“*”来识别IE7，最后用下划线来识别IE6，问题解决了！

例：
div.function li  {
         padding:2px 10px;  /*FF*/
         *padding:1px 0;     /*IE7*/        
         _padding:2px 0;  /*IE6*/
  }

最后要注意的是不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。而其它的浏览器现在我就不考虑了~~~

]]>Web技术http://www.zisai.org/blog/post/301.htm#commenthttp://www.zisai.org/blog/http://www.zisai.org/blog/feed.asp?cmt=301http://www.zisai.org/blog/cmd.asp?act=tb&id=301&key=22713f37常用CSS元素div ul dl dt ol的简单解释wangjinbai@163.com (shadow)http://www.zisai.org/blog/post/287.htmMon, 09 Jun 2008 12:42:21 +0800http://www.zisai.org/blog/post/287.htm几个css元素的简单解释 div ul dl dt oldiv，这个很常见，块级元素，div尽量少用，和table一样，嵌套越少越好

ol 有序列表。
<ol>
<li>……</li>
<li>……</li>
<li>……</li>
</ol>

表现为：
1……
2……
3……

ul 无序列表，表现为li前面是大圆点而不是123
<ul>
<li>……</li>
<li>……</li>
</ul>

很多人容易忽略 dl dt dd的用法
dl 内容块
dt 内容块的标题
dd 内容

可以这么写：
<dl>
<dt>标题</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>

dt 和dd中可以再加入 ol ul li和p

理解这些以后，在使用div布局的时候，会方便很多，w3c提供了很多元素辅助布局。

]]>Web技术http://www.zisai.org/blog/post/287.htm#commenthttp://www.zisai.org/blog/http://www.zisai.org/blog/feed.asp?cmt=287http://www.zisai.org/blog/cmd.asp?act=tb&id=287&key=1e5f229ecss起名表wangjinbai@163.com (shadow)http://www.zisai.org/blog/post/css,name.htmTue, 15 Jan 2008 22:15:17 +0800http://www.zisai.org/blog/post/css,name.htm在Denver的BLOG中发现，以后写时应注意一下~收藏~

专栏：column
元素：element
页头：header
登录条：loginbar
标志：logo
侧栏：sidebar
广告：banner
导航：nav
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
滚动：scroll
页面主体：main
内容：content
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guide
服务：service
热点：hot
新闻：news
下载：download
注册：register
状态：status
按钮：btn
投票：vote
合作伙伴：partner
友情链接：friendlink
页脚：footer
版权：copyright
 

]]>Web技术http://www.zisai.org/blog/post/css,name.htm#commenthttp://www.zisai.org/blog/http://www.zisai.org/blog/feed.asp?cmt=272http://www.zisai.org/blog/cmd.asp?act=tb&id=272&key=349e66fd关于DOCTYPEwangjinbai@163.com (shadow)http://www.zisai.org/blog/post/262.htmThu, 06 Dec 2007 22:46:02 +0800http://www.zisai.org/blog/post/262.htm来源：蓝色理想　作者：javapigpig　

DOCTYPE不可怕，但把它拿走，会让你怕了又怕。

最近在蓝色理想转悠，发现很多朋友提出有关DIV+CSS排版问题，以及IE与FF的兼容问题。怎么问的都有，结果就是一个——显示很奇怪，很难调整。我们浏览的大多数网站，或者用Dreamweaver创建一个新的网页文档时，源码的顶部都会有DocType声明，但是很多人没有注意它，甚至在创作时候直接将它删掉，其实这往往就是噩梦的开始。在遵循标准的任何Web文档中，DOCTYPE都是一项必需的元素。它会影响代码验证，并决定了浏览器最终如何显示你的web文档。为了避免DOCTYPE的问题重复出现，我根据手头的资料整理了这篇文档，以备自己及有兴趣的朋友参考。

在默认情况下，FF和IE的解释标准是不一样的，也就是说，如果一个网页没有声明DOCTYPE，它就会以默认的DOCTYPE解释下面的HTML。在同一种标准下，不同浏览器的解释模型都有所差异，如果声明标准不同，不用我说，您自己想就可以了。学习网页标准，浏览器兼容，从哪里开始您自己决定，但是，请认识DOCTYPE：

一、什么是DOCTYPE

DOCTYPE是Document Type（文档类型）的简写，在页面中，用来指定页面所使用的XHTML（或者HTML）的版本。要想制作符合标准的页面，一个必不可少的关键组成部分就是DOCTYPE声明。只有确定了一个正确的DOCTYPE，XHTML里的标识和CSS才能正常生效。

二、DOCTYPE的规则

DOCTYPE声明的写法遵循一定的规则，它指出阅读程序应该用什么规则集来解释文档中的标记。在Web文档的情况下，“阅读程序”通常是浏览器或者校验器这样的一个程序，“规则”则是w3c所发布的一个文档类型定义（dtd）中包含的规则。
每个dtd都包括标记、attributes、properties等内容，它们用于标记web文档的内容；此外还包括一些规则，它们规定了哪些标记能出现在其他哪些标记中。每个web建议标准（比如html 4 frameset和xhtml 1.0 transitional）都有自己的dtd。

以下是从手册上摘抄的规则：

语法：

HTML  顶级元素  可用性 "注册//组织//类型 标签//定义  语言""URL"

可能值：

- 顶级元素：指定 DTD 中声明的顶级元素类型。这与声明的 SGML 文档类型相对应。 HTML 默认。HTML。
- 可用性：指定正式公开标识符(FPI)是可公开访问的对象还是系统资源。 PUBLIC 默认。可公开访问的对象。SYSTEM 系统资源，如本地文件或 URL。
- 注册：指定组织是否由国际标准化组织(ISO)注册。 + 默认。组织名称已注册。
- 组织名称未注册。Internet 工程任务组(IETF)和万维网协会(W3C)并非注册的 ISO 组织。
组织：指定表明负责由 !DOCTYPE 声明引用的 DTD 的创建和维护的团体或组织的名称，即 OwnderID。 IETF IETF。 W3C W3C。
- 类型：指定公开文本类，即所引用的对象类型。 DTD 默认。DTD。
- 标签：指定公开文本描述，即对所引用的公开文本的唯一描述性名称。后面可附带版本号。 HTML 默认。HTML。
- 定义：指定文档类型定义。
　　Frameset 框架集文档。
　　Strict 排除所有 W3C 专家希望逐步淘汰的代表性属性和元素，因为样式表已经很完善了。
　　Transitional 包含除 frameSet 元素的全部内容。
- 语言：指定公开文本语言，即用于创建所引用对象的自然语言编码系统。该语言定义已编写为 ISO 639  语言代码(大写两个字母)。 EN 默认。英语。
- URL：指定所引用对象的位置

为了获得正确的DOCTYPE声明，关键就是让dtd与文档所遵循的标准对应。例如，假定文档遵循的是xhtml 1.0 strict标准，文档的doctype声明就应该引用相应的dtd。另一方面，如果doctype声明指定的是xhtml dtd，但文档包含的是旧式风格的html标记，就是不恰当的；类似地，如果doctype声明指定的是html dtd，但文档包含的是xhtml 1.0 strict标记，同样是不恰当的。

三、选择什么样的DOCTYPE

如上例所示，XHTML 1.0中有3种DTD（文档类型定义）声明可以选择：过渡的（Transitional）、严格的（Strict）和框架的（Frameset）。这里分别介绍如下。

1．过渡的

一种要求不很严格的DTD，允许在页面中使用HTML4.01的标识（符合xhtml语法标准）。过渡的DTD的写法如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2．严格的

一种要求严格的DTD，不允许使用任何表现层的标识和属性，例如<br/>等。严格的DTD的写法如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

3．框架的

一种专门针对框架页面所使用的DTD，当页面中含有框架元素时，就要采用这种DTD。框架的DTD的写法如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

使用严格的DTD来制作页面，当然是最理想的方式。但是，对于没有深入了解Web标准的网页设计者，比较合适的是使用过渡的DTD。因为这种DTD还允许使用表现层的标识、元素和属性，比较适合大多数网页制作人员。

四、需要注意的问题

没什么特别的，就是一定要将DOCTYPE声明放在XHTML文档的顶部，上面哪怕多个HTML注释标记都不行。

最好示例代码也加上DOCTYPE，否则效果会有差异。

]]>Web技术http://www.zisai.org/blog/post/262.htm#commenthttp://www.zisai.org/blog/http://www.zisai.org/blog/feed.asp?cmt=262http://www.zisai.org/blog/cmd.asp?act=tb&id=262&key=ab222813纯CSS代码实现翻页wangjinbai@163.com (shadow)http://www.zisai.org/blog/post/249.htmWed, 30 May 2007 23:38:03 +0800http://www.zisai.org/blog/post/249.htm蓝色理想


<!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>
</head>
<body>
<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://www.blueidea.com/articleimg/2007/03/4549/1.jpg" alt="" title="" id="a" />
<img src="http://www.blueidea.com/articleimg/2007/03/4549/2.jpg" alt="" title="" id="b" />
<img src="http://www.blueidea.com/articleimg/2007/03/4549/3.jpg" alt="" title="" id="c" />
</dd>
</dl>
</body>
</html>

]]>Web技术http://www.zisai.org/blog/post/249.htm#commenthttp://www.zisai.org/blog/http://www.zisai.org/blog/feed.asp?cmt=249http://www.zisai.org/blog/cmd.asp?act=tb&id=249&key=1b2d771f细线SELECTwangjinbai@163.com (shadow)http://www.zisai.org/blog/post/246.htmFri, 11 May 2007 00:13:22 +0800http://www.zisai.org/blog/post/246.htm效果：



代码：
<span style="border:1px solid #000000; position:absolute; overflow:hidden;" >
<select style="margin:-2px;">
<option>1111</option>
<option>11111111111111</option>
<option>111111111</option>
</select></span>

]]>Web技术http://www.zisai.org/blog/post/246.htm#commenthttp://www.zisai.org/blog/http://www.zisai.org/blog/feed.asp?cmt=246http://www.zisai.org/blog/cmd.asp?act=tb&id=246&key=fcaacb15好用的IFRAME代码wangjinbai@163.com (shadow)http://www.zisai.org/blog/post/239.htmTue, 03 Apr 2007 22:15:40 +0800http://www.zisai.org/blog/post/239.htm<BODY style="margin:0;padding:0;overflow:hidden;">
<iframe id="iframe" width="0" height="0" scrolling="Auto" frameborder="0" marginwidth="0" marginheight="0" ></iframe>
<SCRIPT LANGUAGE="JavaScript">
var f= document.getElementById("iframe");
f.src="http://www.nooker.com";
f.width="100%";
f.height="100%";
</SCRIPT>
</BODY>

]]>Web技术http://www.zisai.org/blog/post/239.htm#commenthttp://www.zisai.org/blog/http://www.zisai.org/blog/feed.asp?cmt=239http://www.zisai.org/blog/cmd.asp?act=tb&id=239&key=49ace366CSS样式表：详细介绍IE7新支持的选择器wangjinbai@163.com (shadow)http://www.zisai.org/blog/post/233.htmMon, 19 Mar 2007 23:54:37 +0800http://www.zisai.org/blog/post/233.htm
　　注意，选择器包括现行的符号，“>”,“+”和空格（后代选择符），涉及到子选择器，相邻兄弟选择器，后代选择器，统称为选择符。

　　一个较好的方法

　　在我们研究选择符之前，弄清楚他们的不同和为什么它们是好东西的原因是个不错的主意。原因很简单，它减少网页的“class-itis”弊病。主要原因就是“class-itis”在目前网页中非常普遍，直到现在，我们拥有了为建立配合CSS选择器而存在而且支持完美的后代选择符，即两个选择器之间空格。

　　当使用后代选择符，右边的一个元素选择器是被选择的，不管左边的元素选择器标签有几个。举例，p a{color:red;}，意思是段落里面的所有链接都是红色。这非常有用，也是一类相当广泛的选择组合。

　　代表性的class-itis的级数像下面一样。首先，你使用一个非常好的干净的html结构运用简单的CSS样式构建标题、段落等等。然后有人告诉你每个div块第一段里文本颜色需要红色。你不能仅改变目标段落的样式，因为那可能影响全部，所以你被迫命名一个特殊class应用在第一段。

　　于是数十次相同的要求在后面继续，结果就形成了class-itis现象。为什么说这样是糟糕有害的？因为这和font标签比起来没什么区别。当然，classes允许无穷的花样，但是紧随其后就是无穷的混乱，或可能更快胜于随后。

　　举个例子，假设你已经给所有第一段加上class属性，而且一切都好。现在你被告知，首两段需要样式，不仅是第一个。为使用正确class完成目的，你必须确信第二段的每个都有专用的class。最后，这样的习惯导致源代码里到处都是class，感觉像新旧两个样式在打斗冲突，让人头痛。

　　如果我们只针对CSS讲这样未必不好，实际上“运用下列样式到每个div块第一段和第二段里面。”这样的情况发生了，最新的CSS选择符允许我们耍点小聪明就可办到。

　　回顾复习下

　　让我们复习一些术语。W3C CSS2.1 规范解释了选择器（selectors）和选择（combinators）：

　　“一个选择器是用选择符连接起来的一个或更多的选择器。选择符包括：空格，‘>’和‘+’。空格可能出现在一个选择符和简单的选择器之间。”一个简单的选择器可以是一种类型选择器或是通用选择器跟随零或者更多属性选择器，ID选择器或者伪类，在任何顺序。

　　第一个支持的选择符（也经常被称作选择器，这是唯一正确的部分）是子选择符。在简单的选择器之间指定“>”符号。一个简单的例子，#leftcol>p{color:blue;}，意思是#leftcol下面所有子段落文本颜色是蓝色。

　　但是如果#leftcol有一个DIV，而且DIV还有一个段落，#left>p选择器不会使这个段落里的文本变成蓝色，因为子选择符，不像频繁使用的后代选择符，只选择直接的孩子，不是“>”符号的左边元素任何深度的嵌套后代。

　　另外一个新支持的选择符将是相邻选择符，使用"+"符号。子选择符可以指向另外一个元素的子部，相邻选择符可以指向跟随的元素，但与前面的元素独立。例子，h2+p {color:blue;}，跟随h2元素后面段落的文本颜色为蓝色。

　　现在你明白选择符怎么工作，我们开始研究复杂联合元素，看看我们能不能不使用class达到目的。
]]>Web技术http://www.zisai.org/blog/post/233.htm#commenthttp://www.zisai.org/blog/http://www.zisai.org/blog/feed.asp?cmt=233http://www.zisai.org/blog/cmd.asp?act=tb&id=233&key=67f8283a