当前位置:海盈网站工作室 >> 新闻中心 >> 设计前沿

CSS禅意花园 - 重构 - Radio Zen(一)

点击数:32472013-10-20 12:00:31 来源: 海盈网络

用固定的背景图像实现类似收音机频道调节器的效果

Marc van den Heuvel从他的老式收音机中获得了作品的灵感。通过使用固定背景图像,他模拟除了带有活动指针的频道调节器的效果。由于页首的位置需要改变,且指针也要能够水平移动,所以作者采用了少见的水平滚动布局。

除此之外,van den Heuvel还采用了带有强烈视觉张力的retro字体,加之老式收音机的背景与泛黄的整体色调,让真个作品散发出一种怀旧的气息。

7.2.1 构建基础


除了页首图像之外,Radio Zen在实现过程中只运用了很少的图像资源(图7-2-1),而作品中水平滚动的布局则主要依赖于CSS的定位技术。
和很多其他设计师一样,van den Heuvel在开始之前就隐藏了页面两个头部中的文字。因为这些文字最终会用背景图像替代,所以现在理所当然应该将其隐藏:

#pageHeader hl span, #pageHeader h2 span{
display: none;
}


这样做的另一个目的是为将加入顶部的收音机频道调节器预留出空间(图7-2-2)o这里我们并没有列出所有的样式代码,读者可在原始的CSS文件中获得。

布局框架

在Radio Zen中,多数元素使用了绝对定位,这就意味着此类元素将被排除于文档流之外。而其他在文档流之内的元素并不能知晓绝对定位元素的始末位置,以致元素之间有可能会发生重叠。眼下的解决方法只能是将这些元素的边缘相互对齐,相关的定位规则如下:

#quickSummary {
position: absolute;
right: Opx;
text-align: left;
width: 165px;
height: 340px;
top: 95px;
padding-top: 40px;
}
#preamble {
position: absolute;
left: lOpx;
text-align: right;
width: 165px;

【责任编辑:(Top) 返回页面顶端