在云彼方

一直以来都希望以严格的标准来要求自己写出标准的网页，为此也去研读过W3school的教材，学习过了XML、XSLT、XHTML、HTML5、CSS，但是总感觉对CSS的了解不够深入，只是知道怎么用，但是对某些项目的具体定义依然感觉很模糊，还是需要更多的深入了解，了解它的内核，让自己成为一个浏览器，如果我是个浏览器，我应该如何解释这样一段的CSS呢？只有自己解释出来的东西和实际情况一致，我相信这个才是一种真正的理解了。于是为了这个，还是找了不少的CSS方面的教材，这本《CSS彻底研究》就是其中一本了。 书中有很多可以说让我茅塞顿开的地方，于是还是摘录一下了： CSS中允许使用@import "other.css";这样的语句来导入式引用其他的CSS，但是这样引用的CSS将会在页面加载完成之后再次加载可能会导致页面出现“闪烁”的情况。 善于使用嵌套选择器可以减少无用Class的出现。 CSS定义层叠的情况下优先级顺序：一个元素定义了两个类别样式，此二个样式互相冲突时，以写在前面的那个为主。比如：<div class="a b"></div>，发生冲突时，最后显示的结果应该是a的样式，无论定义CSS的时候把a和b何者先定义。其他的情况还是ID>Class>类别，定义两次的时候后定义的更优先。 宽度Width和高度height的定义是内容的宽度和高度，也就是Content的宽度和高度，但是盒模型实际的高度等于内容+内边距+边框+外边距，也就是Content+Padding+Border+Margin。 颜色简写的含义：#369=#336699 对于可以上下左右顺序定义的属性值的解释（比如Padding: 0 0 1px 1px），如果只定义一个，那么就是四周，如果定义两个，第一个是上下，第二个是左右，如果定义三个，那么第一个是上，第二个是左右，第三个是下。 旧版本的IE Border下的背景无法显示出来，但是所占的位置是存在的。 背景色或者背景图显示的范围是Content+Padding+Border Margin值存在垂直塌陷情况，也就是垂直相邻的两个盒模型之间的的实际Margin值从二者之间较大的Margin值（上面的margin-bottom和下面的margin-top...

使用CSS之前先清零保持各浏览器的一致性是个好主意... 于是就有了清零代码: /*CSS代码清零*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } /* remember to define focus styles! */ :focus { outline: 0; } /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } /* tables still need 'cellspacing="0"' in...

之前一直没怎么在意头像的问题,今天突然注意到头像并不是按照原图大小而显示的,更加无语的是,明显采用了浏览器自带的缩图的算法,导致图像非常的模糊,不过大概的估算了一下,发现右边栏就算是在1024的状态下也是可以容纳头像全图的,于是开始决定修改模版,把头像大小还原. 很容易的就找到了头像的模板代码部分: <a expr:href='data:userUrl'><img class='profile-img' expr:alt='data:photo.alt' expr:height='data:photo.height' expr:src='data:photo.url' expr:width='data:photo.width'/></a> 很明显了,其中 data:photo.height=图像高度 data:photo.width=图像宽度 修改为了指定的数值之后,我发现了一个问题.. 嗯,名字给顶到一边去了..orz 没办法,决定让它换行下来,结果无论我加多少BR也好,纹丝不动... 没辙了,虽然这台笔记本没有DOM查看器,我也只能装一个了...结果很快在Dom Inspector下看到,它显示名字采用的是一个P行,然后是固定显示的,IMG文件浮动在它上面,难怪怎么都无法让它换行... 于是照搬了下面的那个Class,把 <dt class='profile-textblock'><data:displayname/></dt> 中的profile-data改成了和下面显示签名一样的profile-textblock,于是,完美的下来了...如此简单. 预览了一下,效果还算凑合,起码比最初缩图看的感觉皱巴巴的强太多了... 另,补充一句,更新了小裤裤的Blog地址,之前把他的废宅子的地址给链接上了,这回终于链接上了新的豪宅,虽然在IE6下显示的布局很Shock,不过更加Shock的还是他的新宅的名字了....让我不由的想起了隆和肯....仰望...

比如昨天调教Blogger的模板中的CSS,其实只是去掉几个虚线框和更换一下title的图片,但是却意外的发现在Blogger的CSS中很少直接指定hight值,绝大多数都是用Padding和Margin来撑起来全部的页面,让页面可以随着字数的变化而变化,不至于把原有的高度撑开.... 在处理浮动问题上,也是很小心的注意到了IE和FF的不同,利用一些小的hack来解决比如/* */:/**/,而在我之前的程序中,很多时候重复定义了太多的东西,比如定义了padding和margin,又把high和width定的死死的,导致文字改变了的时候就把原有的布局撑开了,直接导致FF和IE下的显示出现截然不同,毕竟你无法规范每个浏览器在处理违规的操作上的不同,你只能把各种的可能性都考虑在自己所限定的范围内.这个应该就是Blogger的Web Designer的思考的方式吧. 但是唯一有个小问题就是:为什么我昨天只是改动了了一点布局而已,在"页面元素"这个栏目中的"博客帖子"一栏就变得无比的巨大,甚至全屏了,我确定我的CSS并未改动太多啊,只是改动了三个宽度值和Title的Padding值而已...虽然功能并未太多的改变,但是总感觉不爽的样子....不过算了,可能是程序本身的BUG了,外观显示没有问题就行了- -

非常不错的一个CSS+DIV布局参考...基本上列举了所有的基础应用,由此也可以看到很多布局的特色和要点~ http://www.purecss.cn/article.asp?id=83 以上是中文版.这里是英文原版: http://blog.html.it/layoutgala/

一直在捣鼓IE 6.0下的表现问题,因为盒模型的问题结果导致IE 6和IE 7显示效果不同. 结果是:IE 7=FF 2=Opera 9.2的显示效果,IE 6是独立独行... 试过了N种CSSHack甚至IE才能识别的CSS选择器,结果发现...无效... 加上还需要远程求人帮忙调试,真是痛苦无比,到最后才发现这个地方: http://browsers.evolt.org/?ie 基本上涵括了全部版本的IE浏览器的绿色版下载...调试者的福音啊~ 解决了调试困难的问题,开始专注于表现问题.. 试过了无数的方法,理论上其实用!important属性就应该可以搞定的,因为IE 7已经修正了这个属性了,理论上它的表现应该是等同于FF了,但是实际中我发现,他的表现竟然和IE 6一样的...半拉子糟糕.. 什么叫半拉子糟糕,意思就是说可以识别,但是还是没用...比如: div{ color: #FFF !important; color: #000; } 在IE 7和IE6中均识别为#000,而FF和Opera可以顺利识别为#FFF 但是如果这样写: div{ color: #FFF !important; } div{ color: #000; } 那么,在IE 6和IE7中均识别为#FFF... 呵呵,可能专业人士要发话了,"这怎么可能!",但是我发现就是可能的,在处理XHTML的时候确实没有这个问题,但是在处理XSL的时候...就变成了这样的半拉子状况.. 而且类似*+HTML,*DIV,_#,*HTML,这类的可以用在HTML中的Hack统统在XSL中失效了... 绞尽脑汁没结果的状况下,我决定利用已知的BUG,把IE 7和IE 6的表现统一,然后再用important属性来区分IE系列和其他浏览器...结果,把宽度改为100%,把float属性去掉,用margin居中...竟然就OK了...然后对FF使用important让width变为auto...世界就这样和谐了... 简直是无语...白白浪费了我一个晚上的时间...

这次是关于Tab标准化布局的心得...之前发现怎么样也无法吧表格之间的间隙去掉,无论怎么样做出来的都是双线的表格,后来发现原来是要这样解决: tab的属性: border-collapse:collapse; border-color:#999999; 内部表格的属性: border: 1px solid #999999; 这样就OK了,还害得我捣鼓半天.. 还有就是关于PHP直接echo出XML文件的问题,现开始直接echo怎么都无法输出XML文档,输出格式都是正确的,但是浏览器并不识别为XML,后来终于发现...原来是Header的原因.只要在PHP的输入头文件修改Header就好了,语句是: header('Content-Type: text/xml'); 这样就不需要PHP 4.x的版本打开一些特殊的XML类来生成类了,直接echo就好了,但是解析还是存在问题就是了...不过解析也可以用正则来完成的...具体可以查看IBM站的这帖,写的很基础 http://www.ibm.com/developerworks/cn/opensource/os-xmldomphp/ 现在所需要做的就是实现鼠标移动到对应表格之后的浮动效果了... 结果找到这么一个站: http://www.dyn-web.com/ 实在是太强大了...orz JS原来还可以实现这么多功能...我算是开了眼界了...以后看来需要恶补一下JS的编写了..orz 不过美中不足的是,有加密....不允许使用在非Localhost的站点上..不过JS最多也就是一个16进制的加密而已,随便就搞定了,上网,找了一个JS的16进制转换器,OK了~ 这个是存档,下载这张图片然后把扩展名改为RAR即可解压.. 另外就是在XSL中加载JS文件和直接写入JS的问题.. 加载要使用: <script src="'"></script> 而直接写入JS需要: <script langauge="'"> <![CDATA[ ..................... ]]> </script> 有些地方会画蛇添足的给中间再加上XSL的注释,但是这样的话FF反到不能识别了(FF是矫枉过正..内...