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

CSS禅意花园 - 重构 - Hedges(二)

点击数:26062013-10-16 10:46:39 来源: 海盈网络

7.1.2 打造主体

下一步就是隐藏复杂的头部元素,以免它们影响到创建主体部分的分栏

hl span, h2 span, h3 span, #quickSummary p.p span {
display: none;
}
这样,Mear就完成了主内容区的定义,可他在主内容区中三栏设计中却遇到了麻烦-Mear发现禅意花园预先定义的标签还不够灵活——可以看到,在主栏中有#preamble和#supportingText两个标签,但这它们却缺少一个可供统一设置样式的共同的父元素。所以我们只能分别定义其样式,并努力让它们在视觉上保证融合:

#preamble {
position: relative;
left: 195px;
padding-bottom: Opx;
width: 400px;
#supportingText {
position: relative;
left: 195px;
padding-bottom: Opx;
border-bottom: 2px solid #363;
width: 400px; }

可以看到,每个区块的宽度都设置为400像素,并且用195像素的左偏移以形成中间一栏。当然使用margin-left也能产生相同的偏移效果,只是源代码中使用了当前的方法而已o在完成这个步骤之后,效果如图7-1-3所示。

接下来要把工具条移动到合适的位置。左侧的列表现在处于页面的底端,因此我们可以借助绝对定位将其挪动到页面上部。

#linkList {
position: absolute;
top: 200px;
left: 0;

width: 120px;
margin: 75px O 0 580px;
font-size: 800/u;
text-align: right;
#quickSummary p.p2
position: absolute;
top: 25em;
right: 15px;
width: 120px;
margin: 0;
font-size: 93%;
text-align: center;
padding-bottom: 90px;
background: url("barrow.gif") no-repeat bottom; }

上述CSS设置为作品中的多个元素均应用了样式。例如,为#linkList设置了宽度,并且将其移至页面上部,#container的左侧。还用相同方法将两个标有#quickSummary的段落移至页面的右侧(作为改进,可以为两个段落的父元素#quickS ummary设置部分定位属性以减少冗余代码)。完成以上步骤后,显示效果将如图7-1-4所示。

7.1.3 图像处理中的诀窍

到目前为止,整个布局的框架已经完成。接下来要考虑的就是更为直观的图形区块的处理o Mear先从页首部分开始,他以一行重复的树木作为背景,而后在树木的上方手工绘制出站点标题。这里我们先从相对简单的背景图案人手:
body {
margin: 0;
padding: 0;
background: #FFF url("bg_tree.gif") repeat-x left top;
color: #888;
text-align: left; }
在上面这段代码中.Mear为现有的body样式添加了背景图像,且将background属性设置为repeat-xo简单修改之后,图像即可如我们所愿地水平伸展。



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

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