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

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

点击数:36802013-10-24 09:51:38 来源: 海盈网络

字号变化所导致的问题

由于绝对定位将会把元素移出常规文档流,所以在某些情况下,文字将变得过长,甚至遮盖住其他元素。若使用的是如Firefox之类的可动态设置字体大小的浏览器,就能很清楚地看到页面底部的列表部分在字号改变时发生的变化。

虽然目前来说这块区域还没有应用样式,但是如果现在不着手处理的话,也就意味着在未来埋下一颗定时炸弹。我们能会注意到,前面我们将#linkList元素的top属性设置为0.将其定位于页面顶部;之后又设置了480px的padding-top值,将其移动到下方。这个padding的设置可以使作品列表区域暂时位于页面中其他元素的下方,方便我们设计页面。但从本质上说-它和列表内部的div元素定位却没有任何关系,因为这些元素实际上都是通过绝对定位来控制的:

#lselect, #larchives, #lresources {
position: absolute;
text-align: left;
padding: 5px;
}
#lselect .t{
width: 1590px;
top: 46em;
background-color: #E8E9CF;
}
#larchives {
width: 300px,
top: 49em;
left: 75px;
}
#lresources {
width: 800px;
left: 400px;
top: 49em;
}
可以看到,由于div的定位都是以em.而不是px为单位,所以它们的顶端位置会随着字体大小的改变而同样发生变化,这也就避免了重叠问题。而在继续设置如下规则之后,作品列表和作品存档区域将出现在页面底部,如图7-2-8所示:

#lselect ul, #larchives ul, #lresources ul {
margin: 0px;
padding: 0px;
}
#lselect h3 {
margin: 0 l0px 0 0;
color: #555F44;
font-size: 8pt;
float: left;
font-weight: bold;
}
#lselect li {
color:#000000;
list-style-type: none;
float: left;
border-left: 4px solid #F8F8EE;
padding: 0 5px;
}
#lselect a:link, #lselect a:visited {
border: none;
text-decoration: none;
font-size: 8pt;
font-weight: bold;}
#lselect a:hover, #lselect a:active {
text-decoration: underline;
}
#lselect a.c, #lselect a:link.c , #lselect a:visited,c {
color: #422222;
font-weight: normal;
}

7.2.4 探索一切可能

回顾Radio Zen的设计过程:只不过是简单地通过为body元素应用了固定背景,就实现了调板和移动元素之间的有趣交互。可见,只要悉心研究CSS,即使一些简单的CSS样式也能给用户带来相当独特的视觉体验——Radio Zen就是其中一个让人称道的尝试o CSS更多的纷繁复杂的特性始终敞开着大门,等待我们进一步去发掘。


本文为《CSS禅意花园》连载系列,版权归原作者及出版社所有,请勿用于商业目的活动,我们谨向原作者及CSS禅意花园网站表示敬意。
海盈网站工作室采用标准的DIV+CSS布局制作各类型企业、行业网站,同时提供手机网站制作网站维护等全方位专业服务,欢迎咨询。


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