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

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

点击数:33912014-03-02 12:19:19 来源: 海盈网络

7.3.5 转到页脚

在中心部分顺利完成之后,我们现在需要将页脚部分布置到正确的位置。页脚的内容非常简单,仅仅是一些用于验证的链接和一具装饰性的牛头骨而已:


#footer {
text-align: center;
background: transparent url (bottom*gif) no-repeat top
left;
height: 37px;
margin: Opx -200px Opx -68px;
padding-top: 88px;
}
#footer a:link, #footer a:visited {
margin-right: 20px;
}

注意到样式中使用了负的左右外边距,让页脚能够更好地置于包含它的元素中。

7.3.6 绝对定位

还记得先前的#container div使用的是相对定位么?这里的链接列表却在相对定位的#container div中使用了绝对定位:
#linkList {
position: absolute;
top: 207px;
right: 6px;
width: 181px;
}

这条样式会将列表布局在正文旁边。和相对定位不同的是,绝对定位以定位容器元素为参照设置位置。若没有定位容器的话,绝对定位酌元素会以根元素html为参照。

着想实际感受一下该效果,可以暂时将相对定位的属性从#container div中移除。

绝对定位的本质是这样的:一个绝对定位元素会参照它的定位容器元素来定位,如果没有定位容器元素,则会以html根元素为参照。但由于设置了相对定位,绝对定位的#linkList就会定位在该元素内。所以一旦将#container div的position属性的值重新设为relative.,就会再次回到我们期望中的布局。

7.3.7 修饰链接的样式

解决完#linkList的定位问题,我们可以开始考虑链接的样式了。第一步需要做的就是将列表的内外边距设为0:
#linkList ul {
margin: Opx;
padding: Opx;
}

航条的进一步精确配置铺平了道路。接下来的代码设置了单个列:

List li {
st-style-type: none;
ckground: transparent url (li-bg.gif) repeat top
dding: 8px 6px 8px 6px;
rgin : Opx;
rder-top: 1px solid #5D4831;
rder-bottom: lpx solid #221609;
display: block;
}

这些额外的对链接的标题、色彩、内外边距的设置为整个作品添加了不少有趣的细节,这些代码同样可以在CSS源文件中找到。

7.3.8 完成

外边距是控制文字和图像最有效的I具。相对定位也能让我们在元素中加入绝对定位的子元素,从而有效地处理那些棘手的布局问题。本节中的South of the Border就用简单直观的样式表现出了极其生动的主题,这也从一个侧面证明了CSS的强大功能。


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

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