我的天

网页里面的select和option，这两个东西估计是在一开始出现网页的时候就已经有。周三的时候我发现option的hover效果是无论如何设置不了的，你可以设置option的颜色或者背景，但是hover上去没有效果。你也可以通过css设置select的hover或者focus。该怎么设置这个option呢？最后发现是无解的，所以我又研究了一下其他人的替代方案，有些很酷的网站，他们用js写了个脚本，在option的上面又覆盖了一层由li和span组成的东西，所以你看到的特效实际上是有那些产生的，而不是option本身。那个效果非常的炫酷，但是你要引入大量的js，也要引入大量的css。漂亮是要有代价的，这是显然的，本来我已经想好，要模仿其中一个，结果却突然想到它的下拉可能就只有几个选项，但我的下拉有可能有十几二十个选项。我选定的那种款式，默认没有滚动条，所以这该怎么办呢？所以我只能放弃。

周四当我搜索的时候，我又发现了一个英文网站里面用了纯css实现了option的hover，之所以可以做到这样，是因为他在select那里使用了onfocus之类的事件。为什么onfocus之后就可以设置option呢？之前option做不到的东西，加入了那些事件以后就变得可以做到了。接下来你就可以在option里面设置你想要的东西。本来我觉得自己有救了，之所以说本来，是因为后来我又发现了一些很无语的现实。

做的这个静态网站，我觉得受众大多数是用手机打开的。虽然可能他们准备资料的时候是在电脑旁，但是要查询资料的时候，估计他们不会先打开个电脑。所以这就意味着这个网站的开发我得兼容手机和PC。select和option的展示方式，不同浏览器不一样，手机和电脑不一样，不同的手机品牌也不一样。非常有可能在PC上的效果已经设置得如我所愿，但实际上到了手机上还是自动套用了手机经典的款式，所以等于做了个寂寞，与其这么大费周章，还不如直接放弃治疗。同一个手机，不同浏览器出来效果不一样；再换一个平板，虽然内核都是Chrome， 但实际上又会有差别。我不知道那些人是如何做到兼容这有一切的，起码对我来说这实在太难了。所以我只能尽量做到在不同的设备上效果都过得去。所以在选择字体大小上应该用什么样的比例，我又研究了一番。如果完全就只是一个PC的网页，设置好我想要的也就可以了，大概差不多也就那些字体大小，但是手机上看到的东西我感觉比PC上看到的小很多，于是我不得不把字体放大，但是放得太大，PC上就像一个搞笑的存在。以前body的font-size我都是用绝对像素。这一次我不得不采用相对单位。PC上点击用的是鼠标，图标再小，你都可以准确按到，但手机上你用的是手指，所以那个按钮必定不能太小。这些矛盾的东西，当你不是真的碰上的时候，是不会想象得出来的。

最后，我感觉大概差不多就那样了，剩下的事情就只是等待最终的数据源。

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

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

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