HDWiki/樣式使用規(guī)則

HDwiki--樣式使用規(guī)則: 1：優(yōu)先考慮權重較小的定義，聲明樣式，提升可修改性。（例如:避免使用#id1 #id2 #id3 ul li a，可直接使用#id3 li a定義)

2：用面向對象思想，模塊化定義css。

3：盡量輕量化的定義樣式

4：用class描述共性，用id描述特性

目錄

• 1 HDwiki模塊
  • 1.1 通用欄目模塊
• 2 通用列表
  • 2.1 單列
• 3 圖文混排
  • 3.1 文字不環(huán)繞
• 4 通用表單樣式
• 5 參考來源
• 6 HDWIKI使用手冊導航

HDwiki模塊

通用欄目模塊

<div class="columns">
<h2 class="col-h2">欄目標題</h2>
</div>

通過div標簽上columns和h2標簽上的col-h2兩個樣式組合成通用欄目;

如果你還想要你的欄目有一個更多，那么只需在h2后面寫一個a，他的class名為more,具體如下:

<div class="columns">
<h2 class="col-h2">欄目標題</h2> 
<a href="#" target="_blank" class="more">更多</a>
</div> 

這時，你可以給div寫一個id名，或者在其后寫一個class，定義你所需要的樣式。也可以使用預定義好的樣式，來定義你所需要的寬度，浮動，比如我想要一個寬度是230px ，就用.w-230。我想這個欄目靠在左面，就用.l,具體如下:

<div class="columns w-230 l">
<h2 class="col-h2">欄目標題</h2> 
<a href="#" target="_blank" class="more">更多</a>
</div>

通用列表

單列

<div class="columns">
<ul class="col-ul">
 <li></li>
</ul>
</div>

兩列（只需給原來ul的class后面增加list2）

<div class="columns">
<ul class="col-ul list2">
 <li></li>
</ul>
</div>

無寬度列表（只需給原來ul的class后面增加 list-s2 ）

<div class="columns">
<ul class="col-ul list-s2">
 <li></li>
</ul>
</div>

圖文混排

具體如下:

<dl class="col-dl twhp">
<dd class="block"><a href="#" target="_blank" class="a-img1"><img alt="點擊進入用戶中心" src="style/default/user_l.jpg"/></a></dd>
<dt><a href="#" target="_blank" class="m-r8 bold black">松島楓</a><img alt="您現(xiàn)在擁有653金幣 " src="style/default/jb.gif" class="sign"/></dt>
<dd>創(chuàng)建詞條編輯詞條我的百科創(chuàng)建詞條編輯詞條我的百科創(chuàng)建詞條編輯詞條我的百科創(chuàng)建詞的百科創(chuàng)建詞條編輯詞條我的百科創(chuàng)建詞條編輯詞條我的百科</dd>
</dl>

文字不環(huán)繞

具體如下:

<dl class="col-dl twhp2">
<dd class="block"><a href="#" target="_blank" class="a-img1"><img alt="點擊進入用戶中心" src="style/default/user_l.jpg"/></a></dd>
<dt><a href="#" target="_blank" class="m-r8 bold black">松島楓</a><img alt="您現(xiàn)在擁有653金幣 " src="style/default/jb.gif" class="sign"/></dt>
<dd>創(chuàng)建詞條編輯詞條我的百科創(chuàng)建詞條編輯詞條我的百科創(chuàng)建詞條編輯詞條我的百科創(chuàng)建詞的百科創(chuàng)建詞條編輯詞條我的百科創(chuàng)建詞條編輯詞條我的百科</dd>
</dl>

通用表單樣式

<ul class="col-dl ul_l_s">
<li><span>單元title</span><input name="Text1" type="text" class="inp_txt m-r8" value=""/></li>
<li><span>單元title</span><textarea name="TextArea1" cols="40" rows="5"></textarea></li>
<li><span>單元title</span><input name="Text1" type="button" class="btn_inp" value="確 定"/></li>
</ul>

注意：class名ul_l_s是通用表單的關鍵。如果需要單元標題的字數(shù)更多些，許給ul加id名，并調(diào)整寬度，

假設你給ul加的id是zhuce ,調(diào)整的寬度如下：#zhuce li{margin-left:100px;} #zhuce li span{left:-100px;width:90px;}

具體調(diào)整如下:

<ul id="zhuce" class="col-dl ul_l_s">
<li><span>表單單元title</span><input name="Text1" type="text" class="inp_txt m-r8" value=""/></li>
<li><span>表單單元title</span><textarea name="TextArea1" cols="50" rows="5"></textarea></li>
<li><span>表單單元title</span><input name="Text1" type="button" class="btn_inp" value="確 定"/></li>
</ul>

參考來源

http://kaiyuan.hudong.com/

HDWIKI使用手冊導航

HDWIKI安裝： 安裝教程 HDWiki使用： 前臺使用說明 | 用戶管理 | 模板管理 | 插件管理 | 數(shù)據(jù)庫管理 | 站內(nèi)統(tǒng)計 | Map功能 | 基本設置 | 站點設置 | 擴展設置 | 內(nèi)容設置 | 友情鏈接及廣告管理 | 分類管理 | 詞條管理 | 數(shù)據(jù)調(diào)用 | 其他內(nèi)容管理 | 禮品商店 | 圖片及木馬掃描 | Apache偽靜態(tài) | IIS偽靜態(tài) | Nginx偽靜態(tài) | 通用樣式解讀 | 樣式使用規(guī)則 | 數(shù)據(jù)庫結構說明 | 模板說明 | 函數(shù)類參考 |軟件包結構 | HDWiki運行機制和原理 |編碼規(guī)范 |MVC中的控制器 | 框架簡介 | 高級應用 | MVC中的視圖 | MVC中的模型 | HDWiki與PHPCMS整合 | HDWiki與PHPWind整合 | HDWiki與DEDECMS整合 | HDWiki與UCenter整合 | 可視化編輯使用說明 | 模塊區(qū)版塊制作教程 | 模版共享 HDWiki插件： 插件開發(fā)指南 | 許愿墻插件開發(fā)實例 | 模版與標簽 | 宣傳中心 | 友情鏈接申請 | 數(shù)據(jù)調(diào)用 | 互動摸摸