采用XHTML和CSS设计可重用可换肤网页

新客网 XKER.COM 2006-09-26 来源：收藏本文

　　/*文中的样式表语法中的"("及")"为示例所用,因为blog每次保存花括号都出现错误。请在使用时改为正确的符号*/

　　BODY
　　(
　　background: url(images/bg_page.jpg);
　　font: 10pt verdana,arial,;
　　margin-top: 0px;
　　margin-left: 0px;
　　margin-right: 0px;
　　margin-bottom: 0px;
　　)
　　H1, H2, H3, H4, H5, H6
　　(
　　border-bottom: solid 1px #ccc;
　　margin: 1em 0;
　　)
　　TD
　　(
　　font: 10pt;
　　)
　　A:link
　　(
　　color: #057AE0;
　　text-decoration: none;
　　)
　　A:visited
　　(
　　color: #057AE0;
　　text-decoration: none;
　　)
　　A:hover
　　(
　　color: #009900;
　　)
　　A:active
　　(
　　color: #009900;
　　)

　　这样的一个样式文件，可以适用于任何一个网页，只要添加引用我们都可以立刻看见效果。

　　由于样式表的继承规则是外部的标签样式会保留下来继承给这个标签所包含的其他标签。事实上，所有在标签中嵌套的标签都会继承外层标签指定的属性值，有时会把很多层标签的样式叠加在一起，例如在body标签中定义了字体大小，那么div、p等标签也会继承一样的字体大小，如果在P标签中又定义了字体颜色，那么P标签中的文字既具有body标签的字体大小又有P标签的字体颜色。需要注意的是，table标签不会继承body的字体大小设定，所以在上面的样式表中，我们单独来定义td的样式。

　　3、定义好页面的结构布局

　　很多时候，我们在制作网页时总是从视觉出发，先用Photoshop或者Fireworks画出来、思考页面的配色，做一些很炫的效果，很精美的图片，再切割成小图。然后通过编辑HTML将所有设计变成页面。

　　然而，有视觉的缺陷的人，不能理解这些颜色或者效果。PDA、移动电话和屏幕阅读机上也无法解析这些效果。

　　因此外观并不是最重要的。一个结构良好的XHTML可以通过CSS的不同定义，显示成任何外观，显示在任何支持XHTML的网络设备上。

　　通过分析我们可以发现，对于大多数WEB网站来说，页面都是由一些类似的内容区块所组成，如:

站点标题区
站点导航(主菜单，次及菜单)
功能区(例如搜索框、用户登陆区)
内容区(文章正文或者文章、产品列表)
页脚(版权和有关法律声明)

　　然后我们用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文件，定义如下:

共4页: 上一页 [1] [2] [3] [4] 下一页

上一篇：正则表达式过滤HTML危险脚本下一篇：使用html表格和CSS进行混合网页设计

【收藏】【评论】【推荐】【投稿】【打印】【关闭】