HDWiki4.0样式说明发表评论(0)编辑词条

为了方便用户修改页面的CSS样式，我们在这里就CSS的命名规则及class和id的分布图向用户简单介绍下，css相应文件在hdwiki根目录\style\default下。

网站整体布局
为了方便页面布局的修改，HDWiki4.0结构采用了竖向分割，左中右结构，左右结构，相应的id命名如：#left, #mid,#right 等划分。
命名规则
1、采用区域控制命名规则
比如：首页左侧栏目中相同的属性。css控制方法，在首页左侧布局大层，就id为#left的后面添加.columns;
2、形象化命名
比如：.col-ul 命名意义，是用来表示栏目下的ul标签所具有的属性
CSS控制方法
1、控制方法
.columns .col-ul  .columns下所有具有.col-ul的都将拥有 .col-ul 的属性
2、以各个栏目为单位，外层控制其宽度，浮动方向。(以首页为例，#left所在的层控制的左侧栏目的宽度，和浮动方面，只需要分别调整#left、#mid、#right 的宽度，就基本上可以调整其在页面中的布局)，内层控制其内容表现形式，宽度采用相对单位，以适应外层宽度的调整。
修改建议
1、根据css现有设置，共有的按区域写在上层的class里面，个性的东西，写在其对应的id里面。
2、简单修改办法
本次css开发，大部分栏目的id留给了站长，多数采用class定义。很明显css中id的优先级高于class，所以，广大站长朋友，可以采用各个栏目的id名定义你要修改的内容。
如，我要修改首页的按字母顺序浏览栏目，可根据需求定义：
#azmsx h2
#azmsx .col-h2
#azmsx ul
#azmsx li
#azmsx .col-ul
#azmsx .col-ul li
等等......

所在文件：style/default/hdwiki.css

	ID or Class	栏目	用途
头和尾
	#login	头部登录
	#logo	网站标识
	#search	头部词条搜索
	#nav	头部导航
	#footer	底部
	#footer-p	底部段落
	#nav_bot	底部导航
	#left	左栏
	#mid	中栏
	#right	右栏
首页
	#bkfl	百科分类
	#azmsx	按字母分类
	#tjct	推荐词条
	#other-word	其他词条
	.default-r		用于辅助定义，右侧的布局
	#yzwkb	一周维客榜
	#zxct	最新词条
	#rmbq	热门标签
词条正文页面
	.viewdoc	右侧内容样式定义	用于辅助定义词条正文页的右侧布局
	#zx-edit	最新编辑者
	#ct-similar	同类词条
	#ct-gl	词条管理
	#map	网站地图栏目	用于指明浏览者所在网站的位置
查看版本
	#cklsbb	查看历史版本
对比版本
	.version	版本基本信息对比
	#LeftScroll	左边版本
	#RightScroll	右边版本
注册，登录，找回密码
	.reg-bd	页面栏目框架	用于定义页面的宽度，和位置
创建词条页面
	#cjct-tit	创建词条左侧
	#ctbzgf	右侧词条标准规范
搜索结果页面
	#fenye	分页栏目块
	#fenlei	搜索结果中间部分
个人信息首页，修改密码， 修改用户头像， 修改基本信息
	#nav-gr-info	左侧菜单
	#info-basic	基本信息
百科分类列表
	#bkfl_list	百科分类列表
空间
	#gr-info	左侧列表
推荐词条 tjct.htm 热点词条rdct.htm 最近创建词条zjcj.htm 最近编辑词条zjbj.htm 用户人气 yhrq.htm
	#ct-info-list	左侧列表
	.ct-info-ul	右侧内容控制
栏目
	.columns		栏目
	.col-h2		用于栏目下h2,(注：出现该class才起作用)
	.col-ul		用于栏目下ul,(注：出现该class才起作用)
	.col-ul li		用于.col-ul 栏目下的所有li 标签
	.a-c li		用于.a-c 栏目下的所有li 标签
	.a-mar8 dd a		用于a-mar8 栏目下的dd标签下的所有a 标签
按钮
	.cjct		头部创建词条
	.bjsy		头部编辑实验
	.btn_inp		头部词条搜索
	.reg-inp		按钮样式
	.btn-submi，.btn-submi2		提交按钮样式
	.btn-file		上传类型按钮样式
栏目宽度设置	#warpm,.warp，.wid540， .wid710		栏目宽度设置

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

作用范围：全局
所在文件：style/default/basic.css

Class	用途
.width，.wid950	宽度
.clear	清除浮动
.l	左浮动
.r	右浮动
.a-c	文本居中对齐
.a-l	文本左对齐
.a-r	文本右对齐
.blod	粗体
.font12{font-size:12px;font-weight:normal;}	12号，字体正常
.font14{font-size:14px;font-weight:bold;}	14号，粗体
.height,.height3,.height15	高度
.red	字体颜色：红色
.blue,a.blue	字体颜色和带链接的字体颜色：绿色
.orange	字体颜色：桔黄
.gray	字体颜色：灰色
.bor-gray{border:1px #aaa solid;}	灰色边框
.bor-gray-das{border:1px #ccc dashed;}	灰色虚线边框
.bor-white-t{border-top:1px #fff solid;}	白色顶部边框
.bor_no	去除边框
.a-img img ，.a-img	描边图片，3个像素填充
.hand,.hand label	定义鼠标状态
a{color:#0268cd ; text-decoration:none;}  a:hover{color:#f30;text-decoration:underline;}	默认链接颜色为蓝色，反转色#f30
.link_white	白色转黑色链接颜色样式
.link_orange	橙色链接颜色样式
.link_gray	灰色转黑色链接颜色样式
.link_black	黑色转灰色链接颜色样式
.link_blue	蓝色转橙色链接颜色样式
.link_green	绿色转橙色链接颜色样式

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

HDWiki4.0模版说明