<![CDATA[木子屋 - HTML/CSS]]> http://www.mzwu.com/ zh-cn PBlog2 v2.4 木子屋 http://www.mzwu.com/images/logos.gif http://www.mzwu.com/ 木子屋 http://www.mzwu.com/article.asp?id=2488 <![CDATA[css让页面制作更简单]]> dnawo@sohu.com(dnawo) Wed,02 Jun 2010 11:50:10 +0800 http://www.mzwu.com/default.asp?id=2488

一个div加css即可完成上边的效果：

复制内容到剪贴板程序代码 程序代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>css</title>
    <style type="text/css">
    div
    {
        border-top:1px solid #6B90DA; background-color:#EBEFF9; width:200px; height:22px; /* 外观:长,宽,边框 */
        font-size:15px; font-weight:bold; /* 文本样式 */
        padding-left:3px; line-height:22px; /* 对齐方式 */
    }
    ul
    {
        list-style-type:none;
        margin:0;
    }
    </style>
</head>
<body>
<div>酷站导航</div>
<ul>
<li>1.<a href="http://www.mzwu.com/">木子屋</a></li>
<li>2.<a href="http://www.163.com/">网易</a></li>
<li>3.<a href="http://www.baidu.com/">百度</a></li>
</ul>
</body>
</html>

相比之下，用table来实现同样的效果则麻烦许多。div+css的优势不仅是让页面更简洁、更直观、可维护，而且还大大简化了页面制作过程，页面制作人员更轻松了。]]> http://www.mzwu.com/article.asp?id=2302 <![CDATA[border:none;与border:0;的区别]]> dnawo@sohu.com(dnawo) Wed,25 Nov 2009 22:38:22 +0800 http://www.mzwu.com/default.asp?id=2302
性能差异：

【border:0;】把border设为“0”像素虽然在页面上看不见，但按border默认值理解，浏览器依然对border-width/border-color进行了渲染，即已经占用了内存值。

【border:none;】把border设为“none”即没有，浏览器解析“none”时将不作出渲染动作，即不会消耗内存值。

兼容性差异：

兼容性差异只针对浏览器IE6、IE7与标签button、input而言，在win、win7、vista 的XP主题下均会出现此情况。

【border:none;】当border为“none”时似乎对IE6/7无效边框依然存在，如下例：

HTML代码


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]



【border:0;】当border为“0”时，感觉比“none”更有效，所有浏览器都一致把边框隐藏，如下例：

HTML代码


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]



总结：

对比border:0;与border:none;之间的区别在于有渲染和没渲染，感觉他们和display:none;与visibility:hidden;的关系类似，而对于border属性的渲染性能对比暂时没找测试的方法，虽然认为他们存在渲染性能上的差异但也只能说是理论上。

如何让border:none;实现全兼容？只需要在同一选择符上添加背景属性即可，如下例：

HTML代码


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]



对于border:0;与border:none;个人更向于使用,border:none;，因为border:none;毕竟在性能消耗没有争议，而且兼容性可用背景属性解决不足以成为障碍。]]> http://www.mzwu.com/article.asp?id=2290 <![CDATA[IE6.0下PNG显示灰色背景解决方法]]> dnawo@sohu.com(dnawo) Tue,10 Nov 2009 09:47:31 +0800 http://www.mzwu.com/default.asp?id=2290

如图所示，在IE6.0下PNG会有一个灰色的背景，但Firefox、Opera显示都是正常的，其原因是Microsoft的IE6.0(IE7已经支持)以下没有把PNG的Alpha 通道打开，造成透明PNG图片的效果出不来。解决方法是使用css滤镜：

复制内容到剪贴板程序代码 程序代码
<div style="width:100%;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='report.png')"></div>

]]> http://www.mzwu.com/article.asp?id=2222 <![CDATA[IE对CSS样式表的限制和解决方案]]> dnawo@sohu.com(dnawo) Tue,15 Sep 2009 01:02:19 +0800 http://www.mzwu.com/default.asp?id=2222
1.使用link标记

复制内容到剪贴板程序代码 程序代码
<link rel="stylesheet" type="text/css" href="sheet.css" />

2.使用style元素

复制内容到剪贴板程序代码 程序代码
<style type="text/css">
body{background:#fff;}
h1{font-size:2em;}
</style>

3.使用@import指令

复制内容到剪贴板程序代码 程序代码
<style type="text/css">
@import url(sheet1.css);
@import "sheet2.css";
</style>

4.使用style属性的内联样式(inline style)

复制内容到剪贴板程序代码 程序代码
<p style="color:#f00;">这是红色的字</p>

在实际应用中，使用style属性的内联样式是不推荐使用的，XHTML1.1已经将其标准为不建议使用，原因很简单这种方式不比font标记强多少，削弱了CSS集中控制整个文档外观的优点。前3种方式利用了link标记和style标记，在IE(包括IE6、IE7和IE8 beta1)中有如下限制：

1.文档中只有前31个link或style标记关联的CSS能够应用。

从第32个开始，其标记关联的CSS都将失效。IE的官方文档All style tags after the first 30 style tags on an HTML page are not applied in Internet Explorer也提及这个限制，包括在使用.xsl的.xml文件也有这个限制。但是似乎写错了数量。

2.一个style标记只有前31次@import指令有效应用。

从第32个@import指令开始忽略。

3.一个css文件只有前31次@import指令有效应用。

从第31个@import指令开始忽略。

4.IE中每个style标签或css文件的选择符个数不能超过4095。

5.@import指令下层叠限制不能超过4层

在IE下通过@import指令引入css文件时，第5层会失效。这个限制来自Cascade limit via @import rule。实际上，由于浏览器对多层嵌套的支持不完善，所以即使不得已使用了@import指令引入CSS文件，也不要超过2层。

IE对CSS的限制在绝大部分情况下是不会遇到的，即使遇到最佳的解决方案也应该是手动或者通过后端程序对CSS文件和响应的标记进行合并，最小化的http请求数是优化页面呈现的第一原则。

在IE中，可以通过document.styleSheets对象（Firefox、Opera9和Safari3.1都支持）修改内联和嵌入样式的值。该对象仅在文档包含style或link元素时可用，其实用document.styleSheets.length就可以看出IE下这个值最大是31。下面是利用Javascript来合并link和style标记来解决IE下的限制：

复制内容到剪贴板程序代码 程序代码
var fnMergeStyleSheet = function(){
if(!document.styleSheets){
    return;
}
var aSheet = document.styleSheets,
    aStyle = document.getElementsByTagName('style'),
    aLink  = document.getElementsByTagName('link');
    if(aStyle.length + aLink.length < 32 || !aSheet[0].cssText){
        //document.styleSheets.cssText 只有IE支持
        return;
    }
    var aCssText = [],aCloneLink = [];
    //把style标签中的样式存入，然后删掉该标签，但保留第一个
    //因为由getElementsByTagName方法返回值是nodeList，所以删除时循环用倒序
    for(var i=aStyle.length-1;i>-1;--i){
        var o = aStyle[i];
            aCssText.push(o.innerHTML);
            if(i>0){
                o.parentNode.removeChild(o);
            }
    }
    //在IE中只有在31之内的link标签才能通过其styleSheet.cssText获取样式
    //无法的获取复制到一个数组aCloneLink中
    for(var i=aLink.length-1;i>-1;--i){
       var o = aLink[i];
          if(o.getAttribute && o.getAttribute('rel')==='stylesheet'){
               if(o.styleSheet){
                  aCssText.push(o.styleSheet.cssText);
               }else{
                   aCloneLink.push(o.cloneNode(true));
               }
               if(i>0){
                   o.parentNode.removeChild(o);
               }
          }
    }
    var oHead = document.getElementsByTagName('head')[0];
    //通过前面的删除，前31个link或者style标记最多只剩下2个
    //通过重新增加link节点的方法激活其styleSheet属性，从而获取样式
    for(var i = aCloneLink.length-1;i>-1;--i){
        var o = aCloneLink[i];
        oHead.appendChild(o);
        aCssText.push(o.styleSheet.cssText);
        oHead.removeChild(o);
    }
   //把所有的样式都复制给第一个标签
    aSheet[0].cssText += aCssText.join('');
}

上面仅仅是一个简单的粗糙的解决方案，可以改进的地方还有：

1.没有考虑media这个属性，如果有多个media应该分别合并，当然更没有考虑link标记的rel="alternate stylesheet"带来的影响。但我更建议通过@media指令把相应的样式写在同一个文件中，至少可以减少HTTP连接数。

2.没有解决@import指令31次限制的问题，其实可以提取其href值然后进行激活处理。但是实际应用在建议用link标记来替代@import指令，因为在IE中@import指令相当与把link标记写在文档的底部，会导致在IE5/6页面加载时瞬间无样式问题，学名叫“Flash of Unstyled Content”（简称为FOUC）的bug，当然可以通过在文档头中放一个link或script元素可以避免这个bug。

3.一般来讲页面之所有出现大量的link或者style标签很可能有很多是相同的，可以在aCssText合并前除掉相同的项，减少代码量。

如果不用DOM中已存在的样式元素直接通过cssText属性添加样式代码，而是创建一个新的样式元素来添加，一定要注意先把新建的样式元素先添加到DOM中，然后再通过cssText属性添加样式代码。反之，其添加的样式代码似乎先被IE6的样式解析器解析后才添加，这样!imporant和hack都将失效。请看例7。不建议通过添加新的样式元素的方式来添加新的样式，这样很容易达到IE的限制条件。]]> http://www.mzwu.com/article.asp?id=2205 <![CDATA[在页面中给swf添加链接]]> dnawo@sohu.com(dnawo) Thu,20 Aug 2009 10:42:23 +0800 http://www.mzwu.com/default.asp?id=2205
HTML代码


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

结果链接并不起作用，应该是swf在浏览器中具有很高的优先级，页面中的元素都被遮挡住了。Google了下，据说将<a>改为<button>有用，测试了下：

HTML代码


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

在IE6、IE7、IE8、FF3.0、Opera9.6、Chrome2.0下均能打开链接，但在IE8、Opera9.6、Chrome2.0中显示有些问题：



修改了下button的padding属性，IE8、Opera9.6、Chrome2.0显示总算正常了：

HTML代码


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

美中不足的是页面上点击swf时会有个下沉的动作，有人建议禁用button，在button外再加个链接：

HTML代码


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

遗憾的是在FF3.0、Opera9.6不支持！

代码注意事项：

·button的长宽必须和swf长宽一致；
·button的border属性必须设置成none，padding属性设置为0，background属性设置为none；
·swf的wmode属性必须设置为Opaque或Transparent；]]> http://www.mzwu.com/article.asp?id=2080 <![CDATA[K750c访问WAP站老出错：所访问的页面出错 请选择另一链接]]> dnawo@sohu.com(dnawo) Mon,01 Jun 2009 15:31:21 +0800 http://www.mzwu.com/default.asp?id=2080
复制内容到剪贴板程序代码 程序代码
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card title='木子屋'>
<a href="http://www.mzwu.com/wap.asp">进入WAP版</a>
</card>
</wml>

最终修改如下：

复制内容到剪贴板程序代码 程序代码
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card title='木子屋'>
<p>
<a href="http://www.mzwu.com/wap.asp">进入WAP版</a>
</p>
</card>
</wml>

把页面内容放在<p>和</p>之间即可，真是奇怪的问题。

------------------------------------------------
2010-03-24补充：当页面中使用了form、span、div标签时，也是单独在k750上测试出错。]]> http://www.mzwu.com/article.asp?id=2078 <![CDATA[从宜家的家具设计讲模块化]]> dnawo@sohu.com(dnawo) Sat,30 May 2009 22:48:32 +0800 http://www.mzwu.com/default.asp?id=2078
去过宜家的同学应该都有注意到，宜家的家具基本都是组合的，可拆装。模块化的特点也是这样，可以组合，相对独立，在需要的时候可以很方便的加上。那怎么写可以基本实现这种方式呢？给个简单的例子：

复制内容到剪贴板程序代码 程序代码
<div class="mode-a">
  <h3>模块化Demo</h3>
  <p>模块化结构的例子。</p>
</div>

对应的CSS可以这么写：

复制内容到剪贴板程序代码 程序代码
.mode-a{...}
.mode-a h3{...}
.mode-a p{...}

其中“mode-a”就是这个模块的名称，表示这是名为“a”的模块，现在这个模块可以被放到你所需要的地方。既然是做模块，就不会只有一个，我们再加一个“mode-b”：

复制内容到剪贴板程序代码 程序代码
<div class="mode-b">
  <h3>模块化Demo</h3>
  <div>
    <h4>模块化的特点：</h4>
    <ul>
      <li>相对独立</li>
      <li>可移植性高</li>
    </ul>
  </div>
</div>

对应的CSS可以这么写：

复制内容到剪贴板程序代码 程序代码
.mode-b{...}
.mode-b h3{...}
.mode-b div{...}
.mode-b h4{...}
.mode-b ul li{...}

实际应用中大多需要加一些classname来减少类定义的复杂度，这个例子比较简单，但足以说明模块化的特点。上面两个模块可同时被使用到一个或多个页面中。

在宜家的卖场中，也许你也注意到了，基本是以设计师来划分商品区的，特别是那些小件的商品。模块化后的代码也可以被分配给不同的人进行编写，提高效率。当然要实现这种方式，我们也需要做些工作，如模块的命名规范、模块中哪些地方是需要留接口的等等。如上面的例子中可以约定的就有：命名以“mode”开头，模块标题使用h3标签。这样不管是哪个人写出来的模块都可兼容项目中的页面。

看到这你可能会发现，既然上面已经约定了模块固定的结构，每个模块的样式定义中所写的这一部分不就是冗余的吗？是的。如果已经形成相关的约定，这部分的样式定义可以被提出来放到项目的公共定义中，减少代码的冗余。如上面的例子可以变成：

复制内容到剪贴板程序代码 程序代码
/* =S global */
h3{
/* 第一种写法 */
...
}
.mode-a h3,
.mode-b h3{
/* 第二种写法 */
...
}
/* =E global */
/* =S mode-a */
.mode-a{...}
.mode-a p{...}
/* =E mode-a */
/* =S mode-b */
.mode-b{...}
.mode-b div{...}
.mode-b h4{...}
.mode-b ul li{...}
/* ==E mode-b */

不知你有没注意到宜家那些小件的商品，往往可以组合到不同的其它商品上面。这也带出了模块化的另一个话题：模块中的模块。即在模块中可以存在其它的模块，也很好理解，就像我们做网站的时候，整个页面的结构就像是一个大的模块，而上面所讲的例子就是模块中的模块了，只不过我们把这个定义缩小一层。上面例子中对h3的定义，就可以看成是一个模块，它在“mode-a”、“mode-b”两个模块中都出现，并且结构表现相对固定。

OK，这只是对一个标签的定义，如果不只一个标签呢？我们重新改下例子：

复制内容到剪贴板程序代码 程序代码
<div class="mode-b">
  <div class="mode-a">
    <h3>模块化Demo</h3>
    <p>模块化结构的例子。</p>
  </div>
  <div class="cont">
    <h4>模块化的特点：</h4>
    <ul>
      <li>相对独立</li>
      <li>可移植性高</li>
    </ul>
  </div>
</div>
<div class="mode-c">
  <div class="mode-a">
    <h3>模块化Demo</h3>
    <p>这个是“模块中的模块”的例子。</p>
  </div>
  <div class="cont">
    <h4>模块中的模块：</h4>
    <p>模块“mode-a”就是一个模块中的模块。</p>
  </div>
</div>


/* =S mode-a */
.mode-a{...}
.mode-a h3{...}
.mode-a p{...}
/* =E mode-a */
/* =S mode-b */
.mode-b{...}
.mode-b h4{...}
.mode-b .cont{...}
.mode-b .cont ul li{...}
/* =E mode-b */
/* =S mode-c */
.mode-c{...}
.mode-c h4{...}
.mode-c .cont{...}
.mode-c .cont p{...}
/* =E mode-c */

从上面可以看到，“mode-a”是一个独立的模块，当它作为“mode-b”和“mode-c”的一部分时，就成了模块中的模块了。抛下砖，希望能引出更多相关的讨论。]]> http://www.mzwu.com/article.asp?id=2020 <![CDATA[CSS精确控制背景图像显示位置]]> dnawo@sohu.com(dnawo) Tue,21 Apr 2009 03:19:08 +0800 http://www.mzwu.com/default.asp?id=2020
·将众多图标做到一个文件中能减少客户端对服务器端的请求次数；
·一次性将图片下载到本地，页面显示许多图标或是做些图片翻转效果时能马上显示图片，减少等待时间；



上边这张图来源于淘宝网，下边我们看下如何通过CSS控制在不同位置显示出不同的图案：

HTML代码


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

下边我们着重说下background-position这个属性，它用于设置或检索对象的背景图像位置，其值通常有三种形式：

复制内容到剪贴板程序代码 程序代码
background-position:top left;
background-position:0px 0px;
background-position:20% 10%;

前面两种都是精确指定了背景图左上角相对于其容器的坐标(容器左上角坐标(0,0))，但第三种方式就不是这么理解了，它是指背景图片的(20%,10%)坐标将和容器的(20%,10%)坐标重叠(如下图示)：



使用百分数定位时，其实是将背景图片的百分比指定的位置和容器的百分比位置对齐。也就是说，百分数定位是改变了背景图和容器的对齐基点。不再像使用像素和关键词定位时，使用背景图和容器的左上角为对齐基点。例如 background-position: 20% 10%; 就是将背景图片的 20% 10% 这个点，和容器的  20% 10% 这个点对齐。]]> http://www.mzwu.com/article.asp?id=1978 <![CDATA[CSS区分IE5/IE5.5/IE6.0/IE7.0/FF]]> dnawo@sohu.com(dnawo) Sat,04 Apr 2009 22:31:11 +0800 http://www.mzwu.com/default.asp?id=1978
HTML代码


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

上边例子中<div>的背景色在IE各个版本及FF中均不相同！这主要是由于不同的浏览器或是同一浏览器的不同版本对CSS的支持及解析结果不一样，以及CSS优先级的关系共同作用而引起的，下表中列出了不同浏览器对CSS解析的一些不同：

]]> http://www.mzwu.com/article.asp?id=1837 <![CDATA[Js动态添加样式]]> dnawo@sohu.com(dnawo) Wed,10 Dec 2008 16:52:14 +0800 http://www.mzwu.com/default.asp?id=1837
复制内容到剪贴板程序代码 程序代码
<script type="text/javascript">
//添加页面样式
function addStyle(content)
{
    var style;
    if(document.all)    //IE
    {
        style = document.createStyleSheet();
        style.cssText = content;
    }
    else
    {
        style = document.createElement("style");
        style.type = "text/css";
        //style.innerHTML = content;//Safari、Chrome 下innerHTML只读
        style.textContent = content;
    }
    try{document.getElementsByTagName("head")[0].appendChild(style);}catch(e){}//IE Error:不支持此接口
}
//添加外部样式
function includeStyle(url)
{
    var style = document.createElement("link");
    style.type = "text/css";
    style.setAttribute("rel","stylesheet");
    style.setAttribute("href",url);
    document.getElementsByTagName("head")[0].appendChild(style);
}
addStyle("#div1{background-color:#CC99FF;width:200px;height:100px;}");
includeStyle("http://www.mzwu.com/style/global.css");
</script>

参考文章

动态增加CSS，兼容任意浏览器：http://www.rainic.com/blog/index.php/183]]>