HDWiki/样式使用规则

来自站长百科
跳转至: 导航、​ 搜索

HDWiki | HDWiki使用 | HDWiki插件

HDwiki--样式使用规则: 1:优先考虑权重较小的定义,声明样式,提升可修改性。(例如:避免使用#id1 #id2 #id3 ul li a,可直接使用#id3 li a定义)

2:用面向对象思想,模块化定义css

3:尽量轻量化的定义样式

4:用class描述共性,用id描述特性

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="您现在拥有653金币 " src="style/default/jb.gif" class="sign"/></dt>
<dd>创建词条编辑词条我的百科创建词条编辑词条我的百科创建词条编辑词条我的百科创建词的百科创建词条编辑词条我的百科创建词条编辑词条我的百科</dd>
</dl>

文字不环绕[ ]

具体如下:

<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="您现在拥有653金币 " src="style/default/jb.gif" class="sign"/></dt>
<dd>创建词条编辑词条我的百科创建词条编辑词条我的百科创建词条编辑词条我的百科创建词的百科创建词条编辑词条我的百科创建词条编辑词条我的百科</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是通用表单的关键。如果需要单元标题的字数更多些,许给ul加id名,并调整宽度,

假设你给ul加的id是zhuce ,调整的宽度如下:#zhuce li{margin-left:100px;} #zhuce li span{left:-100px;width:90px;}

具体调整如下:

<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使用

前台使用说明 | 用户管理 | 模板管理 | 插件管理 | 数据库管理 | 站内统计 | Map功能 | 基本设置 | 站点设置 | 扩展设置 | 内容设置 | 友情链接及广告管理 | 分类管理 | 词条管理 | 数据调用 | 其他内容管理 | 礼品商店 | 图片及木马扫描 | Apache伪静态 | IIS伪静态 | Nginx伪静态 | 通用样式解读 | 样式使用规则 | 数据库结构说明 | 模板说明 | 函数类参考 |软件包结构 | HDWiki运行机制和原理 |编码规范 |MVC中的控制器 | 框架简介 | 高级应用 | MVC中的视图 | MVC中的模型 | HDWiki与PHPCMS整合 | HDWiki与PHPWind整合 | HDWiki与DEDECMS整合 | HDWiki与UCenter整合 | 可视化编辑使用说明 | 模块区版块制作教程 | 模版共享

HDWiki插件

插件开发指南 | 许愿墙插件开发实例 | 模版与标签 | 宣传中心 | 友情链接申请 | 数据调用 | 互动摸摸