我的天

对Principe在IE8下的PNG黑边效果我耿耿于怀！（Chrome、Firefox等完美支持的表示毫无压力）

虽然，我知道这是IE9之前的硬伤！在IE9之前的IE7和IE8虽然已经支持了PNG的透明功能，但它是通过偷偷调用fliter滤镜实现的，这个bug在于，如果你再使用其它滤镜，那么PNG的透明滤镜就歇菜了。

昨天花了不少时间在这里，未果。我一直觉得这是CSS的问题，但实际上，这纯粹是万恶IE的问题。

为什么我的滑动标题会出现黑框呢？

这个滑动标题栏的XHTML是这样的

1
2

<span class="stitch_header"><h2><span>{$text.title}</span><b class="text-icon"></b></h2></span>									
<span class="stitch_active"><h2><span>{$text.title}</span><b class="text-icon"></b></h2></span>

部分CSS是这样的

1
2
3

.stitch_active > h2,.stitch_header > h2 {color:#FFF;text-shadow:0 1px 0 rgba(0,0,0,0.5);font-weight:440;z-index:2;position:absolute;top:0;left:5px;width:450px;font-family:arial, serif;font-size:24px;-webkit-transform:translateX(-100%) rotate(-90deg);-webkit-transform-origin:right top;-moz-transform:translateX(-100%) rotate(-90deg);-moz-transform-origin:right top;-o-transform:translateX(-100%) rotate(-90deg);-o-transform-origin:right top;transform:translateX(-100%) rotate(-90deg);transform-origin:right top;filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);margin:0;}
.stitch_active > h2 b,.stitch_header > h2 b {display:inline-block;position:absolute;top:5px;left:5%;text-align:center;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);}  
.text-icon {background:url(http://x.libdd.com/farm1/5b7f4a/4a3b11a7/text-icon.png) no-repeat top left;width:32px;height:32px;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://x.libdd.com/farm1/5b7f4a/4a3b11a7/text-icon.png');}

解释一下哈，为了把这个标题栏打竖显示为现在的样子，这里做了2个翻转，一个翻转是逆时针90度（rotation=3），一个翻转是顺时针90度（rotation=1）。不知道翻转是神马？请这边学习。然后呢，逆时针的用在了h2，顺时针的用在了控制icon图标的b。也就是说在load到png之前已经有2个滤镜了，png的默认IE滤镜必须的失效。肿么办呢？

我用了一个非常笨的办法，在每个icon PNG那里手动加上滤镜，且把b的顺时针转向功能禁止掉，改用在PS里直接把图片顺时针翻转90度。

代码类的，即在.text-icon里面加上filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’http://x.libdd.com/farm1/5b7f4a/4a3b11a7/text-icon.png’)，这么一来就是强制在load这个png的时候用滤镜了。

至于为什么要把b的翻转禁止掉而用PS图片翻转呢？因为b优先于.text-icon，即便我在后者里设置了强制滤镜，b的滤镜还是优先，于是还是黑边。

PS下的翻转太简单了

翻转前

翻转后

人肉看，当然觉得别扭，但整体效果，那是必须的好。

有图有真相！

于是，终于，在IE8下，Principe的icon图标算是正常了，内牛满面。

今天下午网友才提醒我Principe在IE9下显示怪异，这主要是IE9不支持filter但却不像Chrome和Firefox那样不加理会，而是自作主张搞了一些神马出来。

老天啊～～～ 试问一个不用IE的人怎么会知道这些问题呢！更杯具的是，单位的电脑是XP，XP无法安装IE9，我家里有WIN7可以安装IE9（现在是IE8），也有XP，能考察IE8。为什么，为什么，为什么现在才告诉我事实这么残酷呢？？？泪奔～～～

已经下载虚拟机，已经下载WIN7+IE8（可升级为IE9）的文件。

哎～～～ 玩网页设计，我容易么我～～～

参观、挑刺Principe点点模板请猛击这里——http://adelrio.diandian.com/

在开始准备这篇日志之前，我只把我的新点点模板称呼为The Stitch，他Tumblr模板的名字，但现在他有了新名字——Principe。准确的写法应该是“Príncipe”，西班牙语，“Prince”的意思。为什么？哈哈，因为我赋予了他一个深蓝色+黄色星星的背景。在做这个背景的时候我毫不犹豫联想到《小王子》了！于是，直接把这个模板命名为“王子”就好！

这就是我点点的新模板——Principe！

狡猾的我翻到了某页，上面显示的主题是WWE PPV Money In The Bank 2012的海报少年，用这个做Principe的缩略预览图再适合不过了，哇咔咔～～～

有对比有真相，这里是《小王子》的各类作品图片。

从左到右分别是图书、音乐剧和电影。

我的背景么，用的是200*400重复平铺的深蓝色星星图。

今天早上找了1个多小时的PS自定义图形了～～～ 我的首选是古典式的花纹，但没办法，那玩意很难完美拼接。要完美拼接只能找一些本来就比较散乱的图形，最终我到了这些星星，谢天谢地！

19寸宽屏，分辨率1440*900，Firefox 13.0.1下的效果。

没有滚动条，为了这个我尝试了不少次哦。东西简洁清晰明了，但主页的那个主要滑动显示效果不失华丽。

这个模板是修改自Tumblr的The Stitch模板，但又他自己的特色，比如说在IE下的效果更正常了。又比如说增加了实用的层效果。

其中一个层效果在顶部导航栏的“标签搜索”那里。

当鼠标移到那个标签上面的时候左边会显示搜索框架，这样的处理使得搜索标签和其它导航标签看上去更一致，因为呢，如果你使用的是IE9以下的IE，那囧啊。但这样，就“遮丑”了。

第二个层效果我用在列表正文旁边左上方的“关于模板”里。

当鼠标移动到上面会显示出这个模板的信息。这就是我昨天介绍的div-div-a功能。

模板信息本来是绝对固定在模板底部不受滑动条影响的，但因为我的文章页显示方式修改了，那样的设计显然不靠谱。所以我直接把那个抹掉，用现在这种层的方式显示。那玩意不是人人都在意，所以，有心人才会去稍微留意一下。这个修改让模板更浑然一体。

我不喜欢xrspook制造，我喜欢xrspook创造，但我不可能任何层面都非常优秀，所以，有时只能屈服于MOD，但即便如此，也要show出自己的特色。

你感受到我正能量爆发中的小宇宙么？

罪过，今天晚上本打算和妈一起去医院然后再自己回来的，结果太用心研究点点模板以至于妈什么时候走的我都不知道……

昨天的台风严重坑爹，我们很傻冒地“严阵以待”，但是，今天早上发现啥事都没有，就赶紧跑路了。但前天沿江高速发生爆炸，封闭了，我们被迫兜了好大一个圈回广州。足足花了2个小时！虽然路上没有塞车，但用时却是平时的2倍多。

我对省人民医院没什么好感。就像我不崇拜大明星一样，我也不崇拜大医院。那个楼陈旧啊，那个房间陈旧啊，病房小到了一个境界，而那些病床配套的椅子更是历史悠久。或许在我懂事以后我不知道很烂很烂的病房到底是怎么个模样的吧，我看太多米国医务剧了，我看太多香港医务剧了，我只接触过一个广医二院新盖不久的住院楼。

外婆这次是去换心脏起搏器，要做那玩意的手术，通常医院极快就有床位了，前提是你的手术没啥风险，比如说你年纪不大，你没啥并发症神马的。因为，一个1小时的手术，单是那个起搏器本身就已经得花两万到是几十万不等了，不知道这其中的水分有多少，但几天的住院期，一小时的手术就能不知道赚多少，因为起搏器这东西医保是不包的，即便能报销，也只是一点点，所以…… 生命本来是非常宝贵的东西，但无意中却跟臭钱扯上关系，那可真是让人不快。但是，如果能挽救生命，花再多的钱又算什么呢，毕竟钱没有了，还能重新赚回来，生命没有了，绝对没有TAKE TWO了！

今天晚上花了很多时间去研究到底可不可以用一个div的hover属性触发出另外一个div，用div-a-div是肯定能做到的，但这样话，第二个div就不能嵌套a了，因为这是一个错误的写法。但如果用div-div-a的话，就完全没问题。

经过N多次的尝试，我觉得这是一个position:absolute/relative以及display:block/none使用的问题。有例子，有真相

1
2
3
4
5
6
7
8

/*CSS部分*/
 
#side{position:absolute;left:-48px; top:40px;width:50px;display:block;}
#side-tabs {background:url(http://x.libdd.com/farm1/5b7f4a/fbba4837/slide-bg.jpg);text-align:center;padding:5px;font-size:16px;display:block;color:#ccc;position:absolute;}
#side-tabs:hover .side-panel{top:0;left:50px;position:absolute;display:block;width:300px;z-index:25;}
#side-tabs .side-panel{background:url(http://x.libdd.com/farm1/5b7f4a/fbba4837/slide-bg.jpg);left:50px;width:300px;height:40px;display:none;position: absolute;padding:5px;word-wrap:break-all;line-height:1.5em;text-align:left;font-size:small;}
#side-tabs .side-panel a{color:#ffffff;}
#side-tabs .side-panel a:hover{color:#ccc;}

1
2
3
4
5
6
7
8

<!--XHTML部分-->
 
<div id="side">
	<div id="side-tabs">关于模板
		<div class="side-panel">Designed by <a href="http://blog.etcetradesign.net" title="Theme Creator Site">Idraki Muhamad</a><br />Modified by <a href="http://www.xlanda.net/">xrspook</a>
		</div>		
	</div>	
</div>

最重要的是要通过hover被显示的div必须position:absolute，且在非hover的设置下为display:none。利用hover引出第二层div的首层div必须设置为display:block/inline-block，position可以是absolute或者relative。

我不懂js和jQuery，所以我一直在努力研究只用XHTML和CSS解决问题，不是有所有问题都一定能这般解决，但这次，我成功了。

不屈不挠，自己也能成为挽救自己的英雄！

能在今天基本完成Stitch模板并挂到点点网上测试我已经很高兴了！

很多时候我都是网上才做网页，但实际上这不好，我以为我的精神状态还OK，但其实一点都不OK，所以经常都会兜圈，犯错误。记得之前我用了0.5-1个小时都解决不了的东西，大白天我用了5分钟就解决掉了，这不是幻觉！只是脑袋在健康的状态下更好使罢了，开夜车并不能解决问题，只会把很多本来不复杂的东西搞得很糟糕。

Stitch是一个Tumblr的模板。用了起码5个以上的js，用了起码2个css，用了N多个适应各种浏览器的hacker。然后呢，主题CSS，我减肥了，另外一个，原封不动，至于js们，我全部粘一个里面了。到底原作者是怎么想的呢？外链引用那么多的文件。

关于这个Stitch模板，我的点点化主要体现在它的实用性。原模板非常不介意在高约400px的窗口里展示内容，于是这使得人家阅读很困难，文字还好一点，遇到大图片，我真那个去，横着竖着都有丑陋的滚动条，情何以堪，而且如果要看视频的话，视频的高度估计就只有300px，高清视频也烦恼啊，这么小的窗口！原模板的列表页和文章页采用了同样的框架高度，所以你在列表页费劲地看某些东西即便进入文章页也难逃厄运。所以在这里，我大刀阔斧地把文章页改了，改成了常规模式。列表页你怎么折腾那毕竟只是预览，但文章页，必须的看得舒服啊！

华丽和实用是应该共存的。

欢迎大家猛击帮忙测试我点点化的Stitch模板——http://xlanda.diandian.com/

但实际上，修改Stitch我的本意是用在http://adelrio.diandian.com/啦，但在技术完全成熟之前，我不会贸然改版。

截图是必须的，这里就只放最特色的列表页了。

文字页面，我用的是系统自动生成/人工设定的summary。

单图页面，我把字符自动截断设定为20，为什么这么少呢？因为单图有时我真的只写一点点东西呢。

多图页面，只放首张图片及标题。

视频页面，播放器宽度设定为445px，高度刚刚能放完一整个土豆或者优酷播放器。当然了，文章页的播放器宽度是860px的！

音频页面，默认放专辑的图片及播放器，宽度设置为一致的，也就是257px。

点点还有链接页面，但DESTINY IS REAL里我印象中没有单纯链接的资源，所以也就不截图了。

明天要想想办法解决IE9以下无法支持CSS3的问题，这导致了我所有的圆角和半透都无法在IE显示，莫大的杯具！我痛恨老掉牙的IE！！！！！

昨天在麻涌的SPAR超市shopping归来突然冲动要把灯牌的事给了结了。黑色KT空白板我已经从家里带到单位快2周了，但却一直没动手。昨晚，我要为灯牌封上背板！因为，我从超市里买了2排劲量AA电池，一共10个。封板之前当然要做循例的测试。劲量真厉害！跟那些电力被我玩得差不多的普通碳性555没得比。开关打开，不是幻觉，整个办公室都被照亮了！但我发现头一天做的板有一半亮度有问题，这只能是某个或某些导线松动了。之前一直不敢拆，但经历过几周的焊接练习后，我已经非常大胆了。把之前的封口胶封板拆掉，然后对所有导线进行检查加固。我比从前更淡定，不是一般的纯熟。

加固重新封口胶封板后当然是测试。当然是留痕迹。

对头，劲量很厉害！这个比我之前照的亮度更均匀了！当然，还有一些灯不在一个集体的角度上，但那些，掰掰就好。

你能feel到星光熠熠吗？

我用的是白色5mm圆头超高亮LED，但如果照相的ISO用得足够高，快门和光圈得当，灯牌后面的黄色珠光纸是能反映出来的！这就是ADR，白色/金色！

然后，我用双面胶和KT板盖住了恐怖的线路。把他们装到了凡客的B1包装盒里。哈哈，一共7层KT板，5，mm厚一个，刚好装满凡客的盒子，没有空位，不需要塞什么东西防止位移。

在到上海之前，我不打算再打开了，要有faith，要对我自己有faith，要对我的作品有faith！

所以今天，我没有再碰电烙铁，转攻点点的模板。

网页设计是很伤神的，时间如流水般消逝。但今天我总算有点成绩，大体做到了自己想要的效果，明天的任务是美化和减肥。除了Javascript，我能把XHTML和CSS弄得妥妥的！我不是个艺术家，但我是个经验丰富的实用主义。

等待我明天的点点模板好消息吧！今天就不截图了。

每天都充实，真好！