编辑“HDWiki/样式使用规则”

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

2：用面向对象思想，模块化定义[[css]]。 

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

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

==HDwiki模块==
===通用栏目模块===
<pre>
<div class="columns">
<h2 class="col-h2">栏目标题</h2>
</div>
</pre>
通过div标签上columns和h2标签上的col-h2两个样式组合成通用栏目;

如果你还想要你的栏目有一个更多，那么只需在h2后面写一个a，他的class名为more,具体如下:
<pre>
<div class="columns">
<h2 class="col-h2">栏目标题</h2> 
<a href="#" target="_blank" class="more">更多</a>
</div> 
</pre>

这时，你可以给div写一个id名，或者在其后写一个class，定义你所需要的样式。也可以使用预定义好的样式，来定义你所需要的宽度，浮动，比如我想要一个宽度是230px ，就用.w-230。我想这个栏目靠在左面，就用.l,具体如下:
<pre>
<div class="columns w-230 l">
<h2 class="col-h2">栏目标题</h2> 
<a href="#" target="_blank" class="more">更多</a>
</div>
</pre>

==通用列表==
===单列===
<pre>
<div class="columns">
<ul class="col-ul">
 <li></li>
</ul>
</div>
</pre>

两列（只需给原来ul的class后面增加list2）
<pre>
<div class="columns">
<ul class="col-ul list2">
 <li></li>
</ul>
</div>
</pre>

无宽度列表（只需给原来ul的class后面增加 list-s2 ）
<pre>
<div class="columns">
<ul class="col-ul list-s2">
 <li></li>
</ul>
</div>
</pre>

==图文混排==
具体如下:
<pre>
<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>
</pre>

===文字不环绕===
具体如下:
<pre>
<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>
</pre>

==通用表单样式==
<pre>
<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>
</pre>
注意：class名ul_l_s是通用表单的关键。如果需要单元标题的字数更多些，许给ul加id名，并调整宽度，

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

具体调整如下:
<pre>
<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>
</pre>

==参考来源==
http://kaiyuan.hudong.com/

{{HDWIKI}}

[[category:HDWiki|Y]]