導讀:織夢技術織夢技術首先，打開后臺模板默認模板管理index.htm. 看到有一句，link href={dede:global.cfg_templeturl/}/style/de織夢文章模板dede手機模板。

首先，打開后臺——模板——默認模板管理——index.htm.

看到有一句，<link href="{dede:global.cfg_templeturl/}/style/dedecms.css" rel="stylesheet" media="screen" type="text/css" />說明，我們模板是根據(jù)這個CSS來布局網(wǎng)頁的，于是我們就打開網(wǎng)站目錄下面的templets\style\dedecms.css.然后來分析一下CSS的構成。

我們根據(jù)主頁的調用，來研究CSS這樣容易理解。我們打開主頁模板，找到：

<div class="w960 center clear mt1">/*這句是控制除了網(wǎng)站頭部和友情鏈接的所有結構樣式*/

那么 w960 center clear mt1 都定義了什么呢？我們打開DEDECMS.CSS 找打相關的定義。

/*---------- stock ---------*/ .center{     margin:0px auto; 定義了CSS模塊的邊緣位置都是0，也就是這個center的層 距離上右下左都是0px; } .w960{     width:960px; 定義了整體的寬度為960px;     /*position:relative;*/ } .pright .infos_userinfo {     margin-bottom: 0px; 定義了首頁右部下的 互動中心的下面邊緣為0px; } .mt1{/* ( margin-top * 1 ) */     margin-top:8px; 定義了mt1的頂部邊緣為8px; } .pright .mt1{     margin-top:0px; 定義了pright 下面的mt1頂部邊緣為0px; } .mt2{/* ( margin-top * 2 ) */     margin-top:16px; 頂部邊緣為16px; } .clear{     overflow:hidden; 如果clear層里面的內容超出了 層的范圍 就隱藏起來。 }              <div class="pleft">這個pleft 的定義 沒有在dedecms.css 中，但是我們會發(fā)現(xiàn)一句話

@import url("layout.css"); @import url("page.css");

這說明，在dedecms.css 中引用了 page.css 和layout.css 這兩個樣式表，于是我們就在page.css 中找到了pleft 的定義

.pleft{ width:712px;定義了寬度 float:left;該層向左浮動 overflow:hidden;超出范圍則隱藏 }     <div class="bignews">

     在該層下面調用的是新聞頭條的內容，看看它的css

.index .bignews{ width:424px; height:400px; float:ri織夢模板ght; 向右浮動 border:1px solid #DFF2F5;表示邊框線用 #dff2f5的實體顏色填充 background:url(../images/headbg-top.gif) repeat-x;背景圖片為 headbg-top.gif   并且橫向平鋪 overflow:hidden;超出則隱藏。 }

所以，我們看到頭條的這部分是在flash幻燈片右邊顯示，并且加上了淺藍色的邊框線。     <!--頭條-->         <div class="onenews">       再來看看 onenews是如何定義的。         .index .bignews .onenews{ margin:0 3px 0 3px; 左右外邊距分別空3個像素 padding:7px 6px;上左內邊距分別空7，6個像素 border-bottom:1px dashed #EBEBEB;下邊框加一個 #ebebeb的虛線 } 所以我們看見頭條的文章左右都有一定的距離，并且下面還有一個虛線顯示       

關鍵詞標簽: CMS 模板 全過程