脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → CSS/HTML → 经验交流 → XHTML CSS可换肤

采用XHTML和CSS设计可重用可换肤的WEB站点的方法第3/4页

 更新时间：2008年09月02日 00:41:28   作者：  
随着XHTML的逐渐推广流行，HTML 在许多场合已经显得过时。World Wide Web Consortium (W3C) 于 2000 年 6 月 26 日发布了 XHTML 的第一个版本作为推荐标准。

通过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、定义站点独有的样式

经过以上两步之后，我们已经有了一个大概的页面主题外观，接下来我们要设计站点的细节，比如，对站点导航条我们想使用与普通超链接不一样的样式，如：蓝色、加粗、字体更大、再加上有立体效果的背景图：

. pageNav a:link, . pageNav a:hover, . pageNav a:visted (Color:#36c; 
font-weight:bold; font-size:120%; background: url(images/bg_siteMenu.jpg) #36c; 
)

 对于栏目导航，我们想给每个栏目连接加上背景色，并且有鼠标滑过和移出的效果。 栏目导航区的html代码为：

<div class="catalogNav">
        <ul>
            <li>
                <A href="1">栏目1</A>
            <li>
                <A href="2">栏目2</A>
            <li>
                <A href="3">栏目3</A>
            <li>
                <A href="4">栏目4</A>
            <li>
                <A href="5">栏目5</A>
            <li>
                <A href="6">栏目6</A>
            </li>
        </ul>
    </div>

栏目导航区对应的Css代码为：

.catalogNav ul
(
    margin-left: -30px;
    list-style: none;
)
.catalogNav li
(
    float: left;
    background: #CCC;
    line-height: 30px;
    border: solid 1px #black;
)
.catalogNav a
(
    width: 100%;
    text-align: center;
    height: 30px;
)
.catalogNav a:link
(
    color: #666;
    background: url(arrow_off.gif) #CCC no-repeat 5px 12px;
    text-decoration: none;
)
.catalogNav a:visited
(
    color: #666;
    text-decoration: underline;
)
.catalogNav a:hover
(
    color: #FFF;
    font-weight: bold;
    text-decoration: none;
    background: url(arrow_on.gif) #F00 no-repeat 5px 12px;
)

接下来我们还需要定义其他的站点独有的样式，如栏目标题、文章列表、文章正文、时间、注释、提示、错误等等各种样式，而且这些样式多以类和id来作为选择符。这些样式都是针对某个站点的，不适用于其他的站点，然后我们将这些样式保存为siteStyle.css文件。

这样我们就有了3个CSS文件。 SiteComm.css：任何站点都可以使用的样式文件，定义了常用的html标签样式。 SiteLayout.css：站点的布局文件，能适用于大多数的网站结构，具体细节需要调整。 siteStyle.css：站点独有的样式文件，能显示出本站点独特的风格和适应于站点的内容。

然后我们采用外部调用法：将这些样式表与页面关联起来。

<LINK rev="stylesheet" media="all" href="css/SiteComm.css" type="text/css" rel="stylesheet">
<LINK rev="stylesheet" media="all" href="css/SiteLayout.css" type="text/css" rel="stylesheet">
<LINK rev="stylesheet" media="all" href="css/siteStyle.css" type="text/css" rel="stylesheet">

在符合XHTML标准的设计中，我们使用外部调用法，好处不言而喻，HTML文档会变得非常的小，CSS文件被存在浏览器的缓存中，仅仅需要下载一次即可，并且你只需要修改一个文件就可以改变整个网站的样式。

并且这样我们才能通过客户端脚本，或者服务器端代码方便地改变样式表的连接地址，而快捷地实现换肤功能。

上一页1234下一页阅读全文
您可能感兴趣的文章:

相关文章

最新评论