新建 dede模板css文件分析全過程文檔

《新建 dede模板css文件分析全過程文檔》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。

1、Dede模板CSS文件分析全過程首先，打開后臺——模板——默認(rèn)模板管理——index.htm.看到有一句，說明，我們模板是根據(jù)這個CSS來布局網(wǎng)頁的，于是我們就打開網(wǎng)站目錄下面的templetsstylededecms.css.然后來分析一下CSS的構(gòu)成。我們根據(jù)主頁的調(diào)用，來研究CSS這樣容易理解。我們打開主頁模板，找到：

2、">/*這句是控制除了網(wǎng)站頭部和友情鏈接的所有結(jié)構(gòu)樣式*/那么w960centerclearmt1都定義了什么呢？我們打開DEDECMS.CSS找打相關(guān)的定義。??/*----------stock---------*/.center{???margin:0pxauto;定義了CSS模塊的邊緣位置都是0，也就是這個center的層距離上右下左都是0px;}.w960{???width:960px;定義了整體的寬度為960px;???/*position:relative;*/}.pright.infos_userinfo{???margin-bottom:0px;定義了首頁右部下的互動中心的下

3、面邊緣為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)容超出了層的范圍就隱藏起來。}???????????這個pleft的定義沒有在dedecms.css中，但是我們會發(fā)現(xiàn)一句話@import

4、url("layout.css");@importurl("page.css");這說明，在dedecms.css中引用了page.css和layout.css這兩個樣式表，于是我們就在page.css中找到了pleft的定義.pleft{width:712px;定義了寬度float:left;該層向左浮動overflow:hidden;超出范圍則隱藏}???????在該層下面調(diào)用的是新聞頭條的內(nèi)容，看看它的css.index.bignews{width:424px;height:400px;float:right;向右浮動border:1pxsolid

5、#DFF2F5;表示邊框線用#dff2f5的實體顏色填充background:url(../images/headbg-top.gif)repeat-x;背景圖片為headbg-top.gif??并且橫向平鋪overflow:hidden;超出則隱藏。}所以，我們看到頭條的這部分是在flash幻燈片右邊顯示，并且加上了淺藍色的邊框線。????????????????再來看看onenews是如何定義的。???????.index.bignews.onenews{margin:03px03px;左右外邊距分別空3個像素padding:7px

6、6px;上左內(nèi)邊距分別空7，6個像素border-bottom:1pxdashed#EBEBEB;下邊框加一個#ebebeb的虛線}所以我們看見頭條的文章左右都有一定的距離，并且下面還有一個虛線顯示??????