欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

采用XHTML和CSS設(shè)計可重用可換膚的WEB站點的方法第3/4頁

 更新時間:2008年09月02日 00:41:28   作者:  
隨著XHTML的逐漸推廣流行,HTML 在許多場合已經(jīng)顯得過時。World Wide Web Consortium (W3C) 于 2000 年 6 月 26 日發(fā)布了 XHTML 的第一個版本作為推薦標(biāo)準(zhǔn)。

通過CSS的定義,我們可以將這些DIV標(biāo)簽包含的區(qū)塊放在頁面上任何位置,再指定這些塊的顏色、字體、邊框、背景以及對齊屬性等等。如:我們再建立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;

如此,我們定義了一個三列的頁面布局:頂部自適應(yīng)頁面寬度。中間三列自適應(yīng)頁面。底部自適應(yīng)頁面寬度,當(dāng)然您也可以將頁面定義為中間只有兩列等等,您只需要調(diào)整layout.css文件即可,這樣您可以靈活的修改頁面的布局,讓頁面外觀發(fā)生根本的變化,而不必動到HTML源文件,這一點對于服務(wù)器端生成代碼的程序尤為重要。 更多關(guān)于CSS布局的資料,請參見:http://www.w3cn.org/article/layout/2004/55.html

4、定義站點獨有的樣式

經(jīng)過以上兩步之后,我們已經(jīng)有了一個大概的頁面主題外觀,接下來我們要設(shè)計站點的細節(jié),比如,對站點導(dǎo)航條我們想使用與普通超鏈接不一樣的樣式,如:藍色、加粗、字體更大、再加上有立體效果的背景圖:

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

 對于欄目導(dǎo)航,我們想給每個欄目連接加上背景色,并且有鼠標(biāo)滑過和移出的效果。 欄目導(dǎo)航區(qū)的html代碼為:

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

欄目導(dǎo)航區(qū)對應(yīng)的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;
)

接下來我們還需要定義其他的站點獨有的樣式,如欄目標(biāo)題、文章列表、文章正文、時間、注釋、提示、錯誤等等各種樣式,而且這些樣式多以類和id來作為選擇符。這些樣式都是針對某個站點的,不適用于其他的站點,然后我們將這些樣式保存為siteStyle.css文件。

這樣我們就有了3個CSS文件。 SiteComm.css:任何站點都可以使用的樣式文件,定義了常用的html標(biāo)簽樣式。 SiteLayout.css:站點的布局文件,能適用于大多數(shù)的網(wǎng)站結(jié)構(gòu),具體細節(jié)需要調(diào)整。 siteStyle.css:站點獨有的樣式文件,能顯示出本站點獨特的風(fēng)格和適應(yīng)于站點的內(nèi)容。

然后我們采用外部調(diào)用法:將這些樣式表與頁面關(guān)聯(lián)起來。

<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標(biāo)準(zhǔn)的設(shè)計中,我們使用外部調(diào)用法,好處不言而喻,HTML文檔會變得非常的小,CSS文件被存在瀏覽器的緩存中,僅僅需要下載一次即可,并且你只需要修改一個文件就可以改變整個網(wǎng)站的樣式。

并且這樣我們才能通過客戶端腳本,或者服務(wù)器端代碼方便地改變樣式表的連接地址,而快捷地實現(xiàn)換膚功能。

相關(guān)文章

最新評論