2012-07
4

前所未有地想学好javascript

By xrspook @ 17:36:37 归类于: 烂日记

试图强行理解点点的mars教程,未果。一些东西是前台的,一些东西是后台的,前台的我明白怎么着,但后台的,我可以怎么办呢?不只是.js还有.json等等。我的瓶颈是一点都不知道它们到底何去何从,非常想插一脚,但不知道怎么插。

前所未有地,我觉得我真的非常有必要学习javascript了!深入地!

很久很久以前我就接触那玩意,但当时它给我的印象是用来在网页上玩花俏的,javascript和php不一样,php是服务器层面的,javascript是网页层面的。但现在,点点的模板核心mars是基于javascript开发的,也就是说那些不是花俏,只要你想得出来的功能都得通过js给服务器再返回数据。当js对我来说从华丽派转为实力派后,我必须的把这玩意拿下了!

昨天下载了VirtualBox,也下载了WIN7IE9的gho,但今天才发现VB不认识gho,于是只好重新下iso。那个传说中的WIN7IE9系统正在虚拟机里安装中。速度嘛,我不能说很慢了。经历过非ghost版的XP安装,神马都不能说慢鸟。从前安装一个XP就要起码2小时啊!

有时我真的怀疑如果我去读计算机专业现在会不会更牛X呢?还是,我在计算机方面现在展示出来的成绩只是我内在蛮劲的一个表现?可以在计算机方面展示,也可以在其它方面展示?可能吧,大概吧,也许吧,因为貌似我很想做到的事一般不会完全没结果,即便结果是mal而不是bueno,绝大多数情况下,结果不会mal的,因为对我来说我只允许mal是过程,mal后要继续努力,所以最终,你懂的。

什么才能让我绝望呢?不知道呢。有些东西会负面影响我,但睡一觉醒来以后,大部分都不复存在了。随着时间的推移,越发淡薄。

我年轻,我有时间、有精力,所以我要学习,去达到目标、实现梦想。

2012-07
3

解决了IE9下的神奇filter黑背景

By xrspook @ 21:06:42 归类于: 烂日记

追求梦想是一个永不止步的过程,正是因为期间的不容易才让一切变得不是一般的有趣。

昨天发现了IE8的问题,我开始拼死地想做IE9的网页测试。最后,我装了微软的Vitural PC 2007,虽然,那个玩意说不兼容Home Edition,然后我下载了Win7-IE8的镜像文件,在解压过程中波折重重,其中包括首先把硬盘的东西移走,然后修改临时文件夹到最后的得知解压文件大小为近9GB的时候我不得不把原来FAT32的磁盘在数据没有备份的情况下格式化为NTFS。冒了很大的风险,经历N多困难,最后当我能在虚拟机里运行出英文版Win7的时候,那个激动啊!因为我下载的是IE8,需要升级为IE9。首先我需要解决的问题就是我必须让虚拟机上网,好不容易在NAT模式下自动匹配IE上网了,用了很长时间我才明白到这样的IE9升级可以说是不可能完成的任务。

我甚至要狠心装一个虚拟机去测试网页啊!我为什么要这样呢?因为从Goolge的分析数据看来,浏览我网站的人中有40%来自IE9,我必须照顾IE9的效果,同时,在中国,IE8以下是盛行的,所以,IE6-9是我必须面对的问题。

幸好,有网友做我的坚实后盾,帮我在IE9下刷新测试。谢谢他!但,如果可以选择的话,我希望一个人能把这些测试工作都完成好。

都说IE9不理会IE从前一直使用filter,事实证明不然!IE9会CSS3,但IE9没有把filter视而不见,而是偷偷地继续调用了那个滤镜。特别,当CSS3和滤镜同时在一个class里设定的时候,它两种都用上了!恰逢,我今天用到的是CSS的垂直翻转效果。

IE9下CSS3是这么表述的:-ms-transform:translateX(-100%) rotate(-90deg);-ms-transform-origin:right top;

IE9以下的IE版本,filter是这么表述的:filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

只使用filter,IE9下是这个效果。

CSS3和filter都出现在同一个class里,IE9下是这个效果。

只使用CSS3,IE9下是这个效果。

于是,谁还敢说IE9对filter完全没feel呢?如果真的没feel,应该像Chrome或Firefox那样鸟都不鸟,但显然不是。

昨天的问题有解决思路了——精准的浏览器选择!

我一直都觉得应该把代码都写在class里,当遇到IE9的时候kill掉一些。但无论我用filter:;,filter:-;,filter:none;等都无济于事,可能filter根本只能enable和disable。后来,点点的工程师提醒了我,减法不行的话,我可以用加法!我不一定要把代码全部都写在class里,遇到IE9减去,我可以直接不在class里写filter,而当遇到IE9以下IE时再加上!

哇咔咔,就是这个思路了!

所以最终,我在主体class里去掉了filter,在文件头加上了这么一段hack。

1
2
3
4
5
<!--[if lte IE 8]>
	<style type="text/css">
		.stitch_active > h2,.stitch_header > h2{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}
	</style>
< ![endif]-->

地球终于被拯救了!!!!在写这段hack的时候出过一个笑话,我把“lte”写成了“Ite”,幸好被点点工程师发现了!尼玛,lI1(小写L、大写i、数字一)在某些字体下真的很难分辨的说。“lte”的意思是小于或者等于。

累并快乐着真好!

2012-07
2

KO了Principe模板IE8下的黑边问题

By xrspook @ 22:36:50 归类于: 烂日记

对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)的文件。

哎~~~ 玩网页设计,我容易么我~~~

2012-07
1

Principe点点模板隆重上线

By xrspook @ 21:48:49 归类于: 烂日记

参观、挑刺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出自己的特色。

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

2012-06
30

利用hover嵌套显示div

By xrspook @ 23:59:09 归类于: 烂日记

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

昨天的台风严重坑爹,我们很傻冒地“严阵以待”,但是,今天早上发现啥事都没有,就赶紧跑路了。但前天沿江高速发生爆炸,封闭了,我们被迫兜了好大一个圈回广州。足足花了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解决问题,不是有所有问题都一定能这般解决,但这次,我成功了。

不屈不挠,自己也能成为挽救自己的英雄!

© 2004 - 2024 我的天 | Theme by xrspook | Power by WordPress