Molyx Board 2.5.0 Css 全注释

周末有事 所以先把已完成的Molyx Board Css部分注释帖上来



以molyx board 2.5.0默认风格的css部分为基础进行注释



html {overflow-x:auto; }

// 检索或设置当对象的内容超过其指定宽度时如何管理内容 共有4种属性

// visible: 默认值 不剪切内容也不添加滚动条 假如显式声明此默认值, 对象将以包含对象的 window 或 frame 的尺寸裁切 并且 clip 属性设置将失效

// auto: 在必需时对象内容才会被裁切或显示横向滚动条

// hidden: 不显示超过对象尺寸的内容

// scroll: 总是显示横向滚动条



body {font-family:Tahoma, Verdana, Georgia, Courier, Simsun;font-size:12px;color:#000000;margin:0px;padding:0px;background-color:#EBF2F7; }

// body 定义整个页面样式

// font-family:Tahoma, Verdana, Georgia, Courier, Simsun字体名称属性 这个属性设定字体名称, 如Arial, Tahoma, Courier等

// font-size: 12px 定义文字大小

// background-color:#EBF2F7这个属性为HTML元素设定背景颜色, 相当于HTML中bgcolor属性

// 如果定义背景图片就使用 background-image: url(图片的相对路径)



table,tr,td {font-family:Tahoma, Verdana, Georgia, Courier, Simsun;font-size:12px;color:#000000;line-height:150%; }

// font-family:Tahoma, Verdana, Georgia, Courier, Simsun字体名称属性 这个属性设定字体名称, 如Arial, Tahoma, Courier等

// font-size: 12px 定义文字大小

// color:#000000 定义文字大小

// line-height:150% 行高



legend {font-size:14px;color:#22229C; }

// legend 在Molyx 中定义为 (见图示) 中的标题样式

// font-size:14px 定义字体大小

// color:#22229C 定义字体颜色





form {display:inline;margin:0px;padding:0px;border-width:0px; }

.bginput, select, textarea {font-size:12px;font-family:Tahoma, Verdana, Georgia, Courier, Simsun;color:#000000;vertical-align:middle;margin:2px;padding:2px;border:1px solid #BAC0C3;background-color:#F9FBFD; }

input {font-family:Tahoma, Verdana, Georgia, Courier, Simsun;font-size:12px;color:#000000;font-weight:normal;background-color:#F5F7FA; }

img {border-width:0px; }

img.inline {vertical-align:middle; }



a:link, a:visited, a:active {text-decoration:none;color:#000000; }

// a 代表, 连接文字定义样式  

// text-decoration: none 定义文本样式, none 即无;

// color: #000000 定义文字颜色，从风格配色方案中获取



a:hover {text-decoration:underline;color:#245D98; }

// a:hover 代表连接当鼠标指向时之样式

// text-decoration: underline 定义文本样式，underline 即下划线

// color:#245D98 鼠标指向时之颜色



.desc {color:#888888;font-size:12px;font-weight:normal; }

// .desc 在Molyx 被使用到 论坛说明, 发帖主题说明, 个人控制面板 -> 主题收藏 -> 收藏时间

// font-weight:normal字体浓淡属性 这个属性常用值是normal和bold, normal是缺省值



.wrapper {text-align:left;width:95%;margin:0px auto 0px auto; }

// .wrapper 在Molyx 中定义为 页面宽度样式

// text-align:left 文本对齐属性 这个属性用来设定文本的对齐方式 有以下值: left (居左, 缺省值) right (居右) center (居中) justify (两端对齐)

// width:95% 表格宽度

// margin:0px auto 0px auto 边距属性 这个属性是设定边距宽度的一个快捷的综合写法, 用这个属性可以同时设定上下左右边距属性

// 你可以为上下左右边距设置相同的宽度  .d1 {margin:1px}

// 你也可以分别设置边距, 顺序是上- 右- 下- 左  .d1 {margin:1px 2px 3px 4px} 这里的代码表示, 上边距为1px, 右边距为2px, 下边距为3px, 左边距为4px

// 像 .wrapper的 margin:0px auto 0px auto 定义表格 上下边距0px; 左右auto的意思是自适应(居中)



.wborder {border:1px solid #156BC3;padding:2px;margin-top:8px;background-color:#FFFFFF; }

.wgborder {border:1px solid #9A9D9E;margin-top:8px; }

.wwborder {padding:2px;background-color:#FFFFFF; }



.wttborder {border:1px solid #156BC3;margin-top:8px;background-color:#FFFFFF; }

// .wttborder 在Molyx 中定义为 中部内容box样式(例如 首页的论坛区 在新列表 联盟论坛 帖子列表等box)

// border:1px solid #156BC3 这个属性是边框属性的一个快捷的综合写法, 它包含border-width, border-style和border-color

// margin-top:8px 这个属性用来设定上边距的高度

// background-color:#FFFFFF 这个属性为HTML元素设定背景颜色，相当于HTML中bgcolor属性



.wtborder {border:1px solid #156BC3;border-bottom:0px;padding:2px 2px 0px 2px;margin-top:8px;background-color:#FFFFFF; }

.wbborder {border:1px solid #156BC3;border-top:0px;padding:0px 2px 2px 2px;background-color:#FFFFFF; }

// .wtboder 在Molyx 中定义为 页面头部box样式 和.wbboder 在Molyx 中定义为 页面头部box下补框样式 是配合使用的; .wtborder这个box包括 上 左 右 三边; .wbboder这个box包括 下 左 右 三边; (见图示)

// border:1px solid #156BC3 这个属性是边框属性的一个快捷的综合写法, 它包含border-width, border-style和border-color

// border-bottom:0px 和 border-top:0px 分别定义 .wtborder样式为无下边框的box .wbborder样式为上边框的box

// margin-top:8px 这个属性用来设定上边距的高度

// background-color:#FFFFFF 这个属性为HTML元素设定背景颜色，相当于HTML中bgcolor属性

// padding:2px 2px 0px 2px用来设置元素内容到元素边界的距离, 这里表示上, 下, 左, 右边距为2px 2px 0px 2px

// padding:0px 2px 2px 2px 用来设置元素内容到元素边界的距离, 这里表示上, 下, 左, 右边距均为0px 2px 2px 2px



// 这个图是关于wtborder的 要注意的是这里的border-bottom设置了0px 属于无下边框的box









// 用了4张图, 来说明使用 .wbborder样式的几个位置 index_top, sub_forum, showthread_top, 其它各页面



.ttable {margin:0px;background-color:#FFFFFF;border:1px solid #FFFFFF; }

// .ttable 在Molyx 中定义为 表格外框样式

// background-color:#FFFFFF这个属性为HTML元素设定背景颜色, 相当于HTML中bgcolor属性

// border:1px solid #FFFFFF 边框属性 这个属性是边框属性的一个快捷的综合写法, 它包含border-width, border-style和border-color



#header {background-color:#F9FBFD;background-image:url(<#IMAGE#>/headbg.gif);background-position:bottom;background-repeat:repeat-x;margin:0px;padding:0px; }

// #header 在Molyx 中定义为 头部表格样式

// background-color:#F9FBFD这个属性为HTML元素设定背景颜色, 相当于HTML中bgcolor属性

// background-image:url(<#IMAGE#>/headbg.gif) 这个属性为HTML元素设定背景图片, 相当于HTML中background属性

// background-position:bottom背景位置属性 这个属性和background-image属性连在一起使用，决定了背景图片的最初位置

// background-repeat:repeat-x 背景重复属性 这个属性和background-image属性连在一起使用，决定背景图片是否重复。如果只设置background-image属性，没设置background-repeat属性，在缺省状态下，图片既横向重复，又竖向重复。repeat-x 背景图片横向重复 repeat-y 背景图片竖向重复 no-repeat 背景图片不重复

// margin:0px 边距属性(margin)是用来设置页面中一个元素所占空间的边缘到相邻元素之间的距离

// padding:0px间隙属性(padding)是用来设置元素内容到元素边界的距离



#headerad {text-align:center;padding:10px 0px 10px 0px; }

// #headerad 在Molyx 中定义为 页首广告样式

// text-align:center 文本对齐属性 这个属性用来设定文本的对齐方式 有以下值: left (居左, 缺省值) right (居右) center (居中) justify (两端对齐)

// padding:10px 0px 10px 0px; 间隙属性(padding)是用来设置元素内容到元素边界的距离, 这里表示上边距为10px，右边距为2px，下边距为3px，左边距为4px



#headernav {padding:3px 10px 3px 10px;color:#FFFFFF; }

// #headernav 在Molyx 中定义为 (见图示) 样式

// padding:3px 10px 3px 10px 间隙属性(padding)是用来设置元素内容到元素边界的距离, 这里表示上边距为3px，右边距为10px，下边距为3px，左边距为10px

// color:#FFFFFF 字体颜色















 

#headernav a:link, #headernav a:visited, #headernav a:active {text-decoration:none;color:#FFFFFF;font-weight:bold; }
#headernav a:hover {text-decoration:none;color:#B5D3F4;font-weight:bold; }
// #headernav表格里面的a 属性
// text-decoration:none 文本修饰属性 这个属性主要设定文本划线的属性 其中none代表 (无，缺省值)
// font-weight:bold 字体浓淡属性 这个属性常用值是normal和bold

#submenu {color:#245D98;background-color:#E0EEFC;padding:3px 10px 3px 10px;border-top:2px solid #F9FBFD;border-bottom:2px solid #D2E0F0;border-left:0px;border-right:0px; }
// #submenu 在Molyx 中定义为 头部论坛导航样式(见图示)
// background-color:#E0EEFC 这个属性为HTML元素设定背景颜色，相当于HTML中bgcolor属性
// padding:3px 10px 3px 10px 用来设置元素内容到元素边界的距离, 这里表示上边距为3px，右边距为10px，下边距为3px，左边距为10px
// border-top:2px solid #F9FBFD 上边框属性 包含border-width, border-style和border-color
// border-bottom:2px solid #D2E0F 下边框属性 包含border-width, border-style和border-color
// border-left:0px 左边框属性 包含border-width
// border-right:0px 右边框属性 包含border-width


#submenu a:link, #submenu a:visited, #submenu a:active {text-decoration:none;color:#245D98; }
#submenu a:hover {text-decoration:underline;color:#245D98; }
// #submenu表格里面的a 属性
// text-decoration:none 文本修饰属性 这个属性主要设定文本划线的属性 其中none代表 无(缺省值)
// text-decoration:underline 文本修饰属性 这个属性主要设定文本划线的属性 其中underline代表 下划线
// color:#245D98(color:#245D98) 字体颜色属性

#hinfo {height:80px;padding:3px 10px 3px 10px;background-color:#F9FBFD; }
// #hinfo 在Molyx 中定义为 首页头部论坛信息样式(见图示)
// height:80px 表格高度
// padding:3px 10px 3px 10px 用来设置元素内容到元素边界的距离, 这里表示上边距为3px，右边距为10px，下边距为3px，左边距为10px
// background-color:#F9FBFD 这个属性为HTML元素设定背景颜色，相当于HTML中bgcolor属性


#footer {height:40px;padding:3px 10px 3px 10px;background-color:#F5F7FA; }
// #footer 在Molyx 中定义为 论坛底部样式(见图示)
// height:40px 表格高度
// padding:3px 10px 3px 10px 用来设置元素内容到元素边界的距离, 这里表示上边距为3px，右边距为10px，下边距为3px，左边距为10px
// background-color:#F5F7FA 这个属性为HTML元素设定背景颜色，相当于HTML中bgcolor属性


#footerad {margin-top:10px;text-align:center;text-valign:middle;background-color:#F5F7FA;border:1px solid #156BC3;padding:6px; }
// #footerad 在Molyx 中定义为 论坛底部广告样式
// margin-top:10px 这个属性用来设定上边距的宽度
// text-align:center 这个属性用来设定文本的(水平方向)对齐方式 center代表文字居中
// text-valign:middle 这个属性用来设定文本的(垂直方向)对齐方式 middle代表文字居中
// border:1px solid #156BC3 这个属性是边框属性的一个快捷的综合写法, 它包含border-width, border-style和border-color
// background-color:#F5F7FA 这个属性为HTML元素设定背景颜色，相当于HTML中bgcolor属性
// padding:6px 用来设置元素内容到元素边界的距离, 这里表示上, 下, 左, 右边距均为6px

.ucpmenu {line-height:200%;width:20%;border:1px solid #156BC3;padding:2px;background-color:#F5F7FA; }
// .ucpmenu 在Molyx 中定义为 前台论坛管理, 个人控制面板, 银行, 短消息左侧box样式
// line-height:200% 这个属性设定每行之间的距离 其值有以下设定方法 normal (缺省值) length (长度，可以用绝对单位(cm, mm, in, pt,pc)或者相对单位 (em, ex, px)) percentage (百分比，相当于父对象高度的百分比)
// border:1px solid #156BC3 这个属性是边框属性的一个快捷的综合写法, 它包含border-width, border-style和border-color
// padding:2px 用来设置元素内容到元素边界的距离, 这里表示上, 下, 左, 右边距均为2px
// background-color:#F5F7FA 这个属性为HTML元素设定背景颜色，相当于HTML中bgcolor属性


先帖这些 剩下的css 我会用最快的速度发出来 希望对大家有帮助

占位2

占位3

占位4

 

不错不错,马上学习一下

要给楼主发奖金才是+_+

收藏了，以后改风格就只有照着做了

等待完善

占下页首位

订阅

呵呵。来汉一个

mark一个

好，谢谢分享

还有吗？好

谢谢~收了,最好可以顶置+精哦

想看thead............

啊~~原来还有这么好的教程以前都没有看到~