2008-05-9 上午 - html/css/xml/xsl, JS/Ajax/AS - CSS
今天看了aoao的blog，学到了这一招，和大家分享一下。
<!– /* window.onload=function(){ document.getElementById(“test2″).innerHTML=”传说中滴JS测试者。如果你看到我，那JS也生效了”; } <!– */ <!– #test1,#test2{border:3px #000 solid;padding:5px;color:#123456;background-color:#ccc;} strong{color:red;}
在网上运行时还要通过程序输出个“*/*”的头，不然MIME不对有的浏览器不干活。PHP的是这样：
<?header(’Content-type: */*’);?>
理论上在服务器上指定某种后缀的MIME是“*/*”应用也行得通，不过我没有试。把JS跟CSS写在同一个文件特别适合第三方调用的那种，虽然文件大了一点，但能少了一半的请求数，帅帅滴。补充说明，直接这样使用会是两个200的，要节省还要涉及到服务器配置，最少我还不知道单程序可以实现的。
如果你有兴趣，那么复制代码。测试一下。怎么样？神吧！其实也没什么，只是充分利用了注释符。不过还真未曾想到还有此一招。佩服佩服！
No Comments »
2008-05-8 下午 - html/css/xml/xsl - CSS - overflow
今天晚上闲了，去了一些大的门户网溜达了一圈，发现了一个仅 IE6会存在的问题（暂时仅发现IE6），在某些区块上，我的鼠标中键居然失效了。很郁闷，一开始还以为自己的鼠标有问题了。后来一想不对劲，怎么就光在这个网站上就会产生呢？html肯定有问题，这就让我想到了之前在一篇文章里面看到了对overflow这个家伙的一些唠叨。
网页另存为一下。仔细一看，这个让我鼠标中键失效的区块的确实加了overflow这个家伙的，我去掉它以后，再次预览，问题得以解决。看来这个家伙不能乱用噢。
我又立刻去网上查了相关的资料。确有此事，而且问题还不仅仅只有一个。
另外存在的一个问题即，导致键盘的Tab键也不听使唤啦！这下用键盘浏览网页的朋友可就麻烦了（我们不排除会有用键盘操作的用户）。
我要说的是，我一直以来不喜欢用到这个家伙，几乎不用，除非在必须要用到区块滚动条的时候才用（为了节省面积，或者说是版式布局上的需要）。
最后，这个其实只是一个很微小的问题，你可以不在乎。如果你注重用户体验及WEB标准，那么就转变一下自己的观点吧，虽然这个家伙很好用，也的确有时候帮忙不少。
No Comments »
2008-04-19 下午 - html/css/xml/xsl - CSS - float
早之前就已经用过这个方法清楚浮动，但一直以来都不喜欢这样用，有点担心其兼容性。一般喜欢利用一个div元素清楚浮动，习惯问题吧，不过这样也确实简单明了！其实用这个方法也算不上很糟糕吧!偶尔也用用overflow。前段时间看了一篇关于overflow的文章，明白了这个属性要慎用，不到必要的时候还是不用为妙！结果就得出一个这样的结论，一般情况下还是利用伪类清除浮动，某些特殊的地方可以利用一个div元素来处理，尽量避免用到overflow。
下面就来讲讲“伪类清楚浮动”如何应用吧！
<style type=”text/css”>
<!–
.f1{float:left; border:1px #000000 solid; margin:2px;}
.clear:after{ content:”.”; display:block; height:0; font-size:0; clear:both; visibility:hidden;}
.clear{ min-height:1px;}
*html .clear{ height:1px;}
.bbc { border:3px solid #ccc; width:200px; margin:0px auto; text-align:center;}
.bbc dl { text-align:center; padding:0px; margin:0px;}
.bbc dl dt { float:left;}
.bbc dl dt dd { float:left; text-align:left; width:100px;}
.bbc ul { text-align:left; padding:0px; margin:0px;}
.bbc ul li { list-style:none; padding:0px; margin:0px;}
–>
</style>
<div class=”bbc”>
<dl class=”clear”>
<dt><img src=”1.jpg” width=”96″ height=”96″ border=”0″ alt=”" /></dt>
<dd>我和旁边的图片都是带上浮动这个武器的哦！</dd>
</dl>
<ul>
<li>我要试试clear这个家伙到底能搞定这两个带上浮动武器的家伙！</li>
</ul>
</div>
关键就在：
.clear:after{ content:”.”; display:block; height:0; font-size:0; clear:both; visibility:hidden;}
.clear{ min-height:1px;}
*html .clear{ height:1px;}
由于IE的兼容，加了后两句。给其设置了最小高度。现在差不多了吧！
这个可是一个很重要的知识点哦！
No Comments »
2008-03-8 上午 - html/css/xml/xsl - CSS - width
让一个层有个最小宽度，但不局限于这个宽度
min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个<div> 放到 <body> 标签下，然后为div指定一个类：
这样写CSS吧：
#container{
min-width: 600px;
width:e­xpression(document.body.clientWidth < 600? “600px”: “auto” );
}
第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。
No Comments »
2008-01-21 下午 - html/css/xml/xsl - CSS
使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则如下：
颜色
16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：
#000000可以缩写为#000;#336699可以缩写为#369;
盒尺寸
通常有下面四种书写方法:
property:value1; 表示所有边都是一个值value1；
property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2
property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3
property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left
方便的记忆方法是顺时针，上右下左。具体应用在margin和padding的例子如下：
margin:1em 0 2em 0.5em;
边框(border)
边框的属性如下：
border-width:1px;
border-style:solid;
border-color:#000;
可以缩写为一句：border:1px solid #000;
语法是border:width style color;
背景(Backgrounds)
背景的属性如下：
background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;
可以缩写为一句：background:#f00 url(background.gif) no-repeat fixed 0 0;
语法是background:color image repeat attachment position;
你可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值，默认值为：
color: transparent
image: none
repeat: repeat
attachment: scroll
position: 0% 0%
字体(fonts)
字体的属性如下：
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:”Lucida Grande”,sans-serif;
可以缩写为一句：font:italic small-caps bold 1em/140% “Lucida Grande”,sans-serif;
注意，如果你缩写字体定义，至少要定义font-size和font-family两个值。
列表(lists)
取消默认的圆点和序号可以这样写list-style:none;,
list的属性如下:
list-style-type:square;
list-style-position:inside;
list-style-image:url(image.gif);
可以缩写为一句：list-style:square inside url(image.gif);
No Comments »
2008-01-21 下午 - html/css/xml/xsl - CSS
今天一早，像往常一样的去上班。进了公司的门，打开电脑，给自己倒了一杯热开水，便开始工作。
这时问题就发生了，我打开我昨天写好的一个页子，发现面貌全非，我都快不认识它了，呵呵。赶紧查找原因，一头钻进了一行一行的代码，眼花了，虽然写的代码可读性还不算很差，时不时还会有个注释，但是代码太多太长了…
我又再次检查了一遍连接样式表的语句，最后我甚至把样式表直接嵌入到页面的<head>中,但是还是不行。一次又一次的测试刷新。情绪开始有点急躁….
没办法只有全部还原，回到最初起点。
再次打开样式表，发现代码比平时的要略大。我明白了，完全明白了。编码问题。页面是UTF-8，而样式表却是GB2312，这样怎能不出西西。好在问题得到解决……
白白浪费了我一个钟头的时间啊，我亲爱的时间啊！
希望大家以后在碰到类似问题时也要注意先看样式表与页面的编码。问题虽小，但越小的问题就越容易疏忽。
No Comments »
欢迎订阅我的博客