Opera

Sea Flower 给人借去了，所以抽点时间做个新的首页。

最近一直在看JavaScript的教程，但是进步很慢。羡慕人家页面上竖着放的一排小标签做导航很久了，但是因为技术不到家，不会用JS脚本生成，只好用CSS来达到相同视觉效果。唉……不知道什么时候能真正不必再眼馋人家的东西……

那排竖着放置的小标签使用了图片替换技术——添加一个空白的 span 标签，然后通过 position 定位覆盖住下面的文字链接。HTML代码如下——

貌似我所有的导航标签的HTML部分都长这个样子……不过想想也对，CSS才是控制视觉效果的部分么，哦呵呵呵……下面是相应的CSS——


ul#nav {
position: relative;
top: 0;
left: -29px;
float: left;
}
#nav li {
display: block;
width: 24px;
height: 50px;
margin: 5px 0;
position: relative;
overflow: hidden;
}
#home a span {
background: url(”../images/home.gif”) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
#blog a span {
background: url(”../images/blog.gif”) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
#gallery a span {
background: url(”../images/gallery.gif”) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
#KDr2 a span {
background: url(”../images/KDr2.gif”) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
#about a span {
background: url(”../images/about.gif”) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
#home a:hover span, #blog a:hover span, #gallery a:hover span, #KDr2 a:hover span, #about a:hover span {
background-position: -24px 0;
}

小标签们的背景图都是这个样子，
标签
这样做的好处是可以减少不必要的加载时间，鼠标移动到标签上的时候不会出现闪烁。

这样做当然是有点麻烦，但是从可用性角度去讲，这样可以使无法加载CSS或者图片的人也能没有任何障碍的访问网页。不信的可以去掉页面的CSS看看，一样知道我要表达的东西是什么。

至于为什么要叫这次的首页为 Opera，不是要给那个浏览器做广告。只是前阵子听Vitas的 Opera #2 次数比较多，很喜欢，于是就借用一下咯……

另外，5月了，毕业设计到了要冲刺的时候，可能很长时间都不会更换首页和blog皮肤。有好的想法的话，我愿意把它们都藏在心里，而不是跟毕业设计争时间……

Tags: