導(dǎo)讀:織夢(mèng)技術(shù)織夢(mèng)技術(shù)首先，打開后臺(tái)模板默認(rèn)模板管理index.htm. 看到有一句，link href={dede:global.cfg_templeturl/}/style/de織夢(mèng)文章模板dede手機(jī)模板。

首先，打開后臺(tái)——模板——默認(rèn)模板管理——index.htm.

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

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

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

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

/*---------- stock ---------*/ .center{     margin:0px auto; 定義了CSS模塊的邊緣位置都是0，也就是這個(gè)center的層 距離上右下左都是0px; } .w960{     width:960px; 定義了整體的寬度為960px;     /*position:relative;*/ } .pright .infos_userinfo {     margin-bottom: 0px; 定義了首頁(yè)右部下的 互動(dòng)中心的下面邊緣為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層里面的內(nèi)容超出了 層的范圍 就隱藏起來(lái)。 }              <div class="pleft">這個(gè)pleft 的定義 沒(méi)有在dedecms.css 中，但是我們會(huì)發(fā)現(xiàn)一句話

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

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

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

     在該層下面調(diào)用的是新聞?lì)^條的內(nèi)容，看看它的css

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

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

關(guān)鍵詞標(biāo)簽: CMS 模板 全過(guò)程