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

CSS禅意花园 - 重构 - 南部边境(二)

点击数:35342013-11-09 21:00:06 来源: 海盈网络

相对定位让设计者能够在定位某元素的同时,仍保证其位于常规文档流中。这和使用如绝对定位等其他定位方式有很大的差别,我们将很快提到。


以前,我们的目标是创造一个在视觉上囊括所有其他元素的容器——#containero而既然现在已成功设定了#container的样式(详细样式可在CSS源文件中看到),我们即可着手为其中的子元素设置更多的样式了(图7-3-2)。


7.3.3 驾驭文本


当然,现在的首要任务就是把位于#conta.ner中的文本拉回到容器范围内。我们可以通过为各个div元素设置外边距来实现该目的:
#intro {
margin:0px;
}
#quickSummary, #preamble {
margin: 0px 200px 0px 68px;
}
#pageHeader {
margin: 0px;
}
#supportingText {
margin:0px 200px 0px 68px;
}


上面代码中定义的这些外边距即可将文本拉至容器的范围内(图7-3-3)。

7.3.4加上标题


添加图形化的标题,尤其对于#pageHeader中的hl来讲,将大大有助于平衡文字和标题的整体视觉效果:
#pageHeader h1 {margin: 0px 0px 0px 0px; background: transparent url(top.gif) no-repeat top left; width: 655px; height: 206px; }

图7-3-4显示了#pageHeader中hl样式所设置的体现主题的背景图像。
这里我们摘录了一部分标题的样式,用来说明这部分是如何通过设置外
边距、背景图像和长宽来有效装载图像和文字的:
#preamble h3 {background: transparent url(chl.gif) no-repeat top left; margin: l0px 0px 5px 0px; width: 388px; height: 44px;}
h3 {
background: transparent url(ch4.gif) no-repeat top left;
margin: 10px 0px 5px 0px;
width: 388px;
height: 44px;
}
#requirements h3 {
background: transparent url(ch5.gif) no-repeat top left;
margin: 10px 0px Spx 0px;
width: 388px;
height: 44px;
}
现在标题部分和页面其他部分协调得非常不错(图7-3-5)。
这里我们再查看蓝色边框的样式:
#benefits {
border-bottom: lpx dashed #8095AF;
}
#preamble {
border-bottom: lpx dashed #8095AF;
}

这样设置之后,边框将呈点划线状,起到分割各个文字块的作用(图7-3-6)。


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

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