WIKI使用導(dǎo)航
站長百科導(dǎo)航
站長專題
- 網(wǎng)站推廣
- 網(wǎng)站程序
- 網(wǎng)站賺錢
- 虛擬主機(jī)
- cPanel
- 網(wǎng)址導(dǎo)航專題
- 云計(jì)算
- 微博營銷
- 虛擬主機(jī)管理系統(tǒng)
- 開放平臺(tái)
- WIKI程序與應(yīng)用
- 美國十大主機(jī)
Art2008CMS/Art2008CMS模版的CSS設(shè)計(jì)
來自站長百科
|
Art2008CMS | 安裝與配置 | 系統(tǒng)功能使用 | 常見問題 | Art2008CMS其他 |
之前講過從零開始學(xué)Art2008CMS模板，用戶對Art2008CMS模板設(shè)計(jì)的方法有一定的了解，但是對css控制新聞列表中各元素戶具體的寫法不是 很清楚，這里跟大家做一個(gè)講解：
步驟一[ ]
在模板中插入標(biāo)簽：模板是前臺(tái)網(wǎng)面效果的基礎(chǔ)，在程序中Template文件夾下，是網(wǎng)站所有頁面的模板,一般情況下我們會(huì)把控制頁面的css樣式寫在一個(gè)文件下，然后在模板中調(diào)用 ，比如在Template/css/style.css文件，需要說明的是在Template/css/文件夾下有兩個(gè)文件，一個(gè)是css.css它里面的樣式是程序系統(tǒng)必要的樣式，控制這各個(gè)功能頁面的效果，具體有說明，如果需要修改按照說明修改，不能修改要是名稱，只能修改其參數(shù)；另一個(gè)是style.css，這個(gè)文件是用戶自定義頁面樣式，可以任意修改或添加；我們今天講的內(nèi)容就是修改這個(gè)文件！
- 在模板中首先需要連接style.css這個(gè)樣式文件，不然的話這個(gè)樣式表中的樣式就不起作用；具體代碼如下：
<link rel="stylesheet" type="text/css" href="#HOPE_InstallDir#Template/css/ style.css">
- 模板中插入標(biāo)簽的方法很簡單，上一節(jié)我們已經(jīng)講過：
(一)： <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class= NewsList1>#HOPE_NewsList(0,0,0,0,0,0,10,15,1,0,0,0,10,0)#</td> </tr> </table> （二） <DIV class= NewsList1>#HOPE_NewsList(0,0,0,0,0,0,10,15,1,0,0,0,10,0)#</DiV>
- 在這里的NewsList1是對這個(gè)列表進(jìn)行樣式控制的樣式名稱
步驟二[ ]
- 在style.css文件中添加控制這個(gè)列表的樣式參數(shù)：
- CSS代碼：
.NewsList1{ padding:2px; width:488px} /* 整體寬度*/
.NewsList1 .NewsList_title{ float:left} /* 列表標(biāo)題控制*/
.NewsList1 span.NewsList_time{ float:rightright}
/* 時(shí)間對齊控制*/
.NewsList1 li{ background:url(../images/icon/ico_3.gif)
no-repeat center left; padding-left:20px; list-style:none}
/* 列表標(biāo)題前圖標(biāo)控制*/
.NewsList1 .NewsList_lmname { } /* 欄目名稱控制*/
.NewsList1 .NewsList_more { } /* 顯示'更多'控制*/
- 每個(gè)元素的樣式名稱可以到標(biāo)簽輔助工具上找到！
- 通過這段就可以控制文章列表的顯示效果了，比如字體大小顏色，列表的行距，時(shí)間的對齊方式，等等，具體參數(shù)還需用戶自己根據(jù)需要添加。
- 值得注意的是要想把網(wǎng)站設(shè)計(jì)得很好，用戶還需掌握一些關(guān)于 DIV+CSS 設(shè)計(jì)的相關(guān)知識(shí)，只有這樣才能真正做到得心應(yīng)手！