采用XHTML和CSS设计可重用可换肤的WEB站点
来源: 时间:06-12-29 点击: 点击这里收藏本文
站点标题区
站点导航(主菜单，次及菜单)
功能区(例如搜索框、用户登陆区)
内容区(文章正文或者文章、产品列表)
页脚(版权和有关法律声明)
然后我们用DIV标签来将这些区块包含起来，类似这样：
<div class="pageHeader">站点标题
</div>
<div class="pageNav">站点导航
</div>
<div class="catalogNav">栏目导航
</div>
<div class="pageContent">文章正文或列表等等
</div>
<div class="pageSearch">查询
</div>
<div class="pageBottom">页脚
</div>
通过CSS的定义，我们可以将这些DIV标签包含的区块放在页面上任何位置，再指定这些块的颜色、字体、边框、背景以及对齐属性等等。如：我们再建立siteLayout.css文件，定义如下：
.pageHeader
（
padding: 10px;
border: 1px solid #666;
height: 100px;
height: 70px;
）
.pageNav
（
padding: 10px;
border: 1px solid #666;
height: 100px;
height: 30px;
）
.catalogNav
（
float: left;
top: 130px;
padding: 10px;
border: 1px solid #666;
width: 20%;
）
.pageSearch
（
float: left;
top: 130px;
padding: 10px;
border: 1px solid #666;
width: 20%;
）
.pageContent
（
float: left;
padding: 10px;
border: 1px solid #666;
height: 400px;
width: 60%;
）
.pageBottom
（
clear: both;
padding: 10px;
border: 1px solid #666;
height: 100px;
height: 70px;
）
如此，我们定义了一个三列的页面布局：顶部自适应页面宽度。中间三列自适应页面。底部自适应页面宽度，当然您也可以将页面定义为中间只有两列等等，您只需要调整layout.css文件即可，这样您可以灵活的修改页面的布局，让页面外观发生根本的变化，而不必动到HTML源文件，这一点对于服务器端生成代码的程序尤为重要。 更多关于CSS布局的资料，请参见：
http://www.w3cn.org/article/layout/2004/55.html
4、定义站点独有的样式
经过以上两步之后，我们已经有了一个大概的页面主题外观，接下来我们要设计站点的细节，比如，对站点导航条我们想使用与普通超链接不一样的样式，如：蓝色、加粗、字体更大、再加上有立体效果的背景图：
把此文章收藏到：
