编辑“SiteWeaver内容管理系统:系统提供的风格模板”

<span style="text-align:center; border:1px solid #000; float:right; padding:6px;"><strong>导航:</strong> [[SiteWeaver内容管理系统:网站模板制作|上一页]] | {{Template:PowerEasy导航}}</span>
<div style="clear:both;"></div>
系统提供默认的风格模板定义，请查阅[[网站]]后台默认的风格设置的“风格配色设置”。系统默认提供的[[CSS]]样式风格定义，里面有详细的定义注释，注释标记为：/* ...... */。

在本系统中，CSS样式风格定义是可以自己自由定义的，也说是说您可以自由添加N多个自定义的风格，然后在各频道的版式模板中调用即可。
修改风格设置必须具备一定网页css样式设计知识，建议您找些这方面的书看一下。在定义中不能使用单引号或双引号，否则会容易造成程序错误。

系统默认风格

'''·网站总体风格定义'''

/* 网站链接总的CSS定义:可定义内容为链接字体颜色、样式等 */
<pre>
a{text-decoration: none;} /* 链接无下划线,有为underline */
a:link {color: #000000;} /* 未访问的链接 */
a:visited {color: #333333;} /* 已访问的链接 */
a:hover{COLOR: #AE0927;} /* 鼠标在链接上 */
a:active {color: #0000ff;} /* 点击激活链接 */
</pre>

/* 顶部频道文字链接的CSS定义－－将顶部频道文字链接与网站链接总的CSS定义分开，以后可以制作深底浅字的格式，如果要保持原来的设计样式，将此定义内容删除或定义成与网站链接总的CSS相同即可*/
<pre>
a.Channel:link {color: #ffffff;}
a.Channel:visited {color: #ffffff;}
a.Channel:hover{COLOR: #ffff00;}
a.Channel:active {color: #ffffff;}
</pre>

/* 顶部当前频道文字链接的CSS定义－－调用代码为*** */
<pre>
a.Channel2:link {color: #ffff00;}
a.Channel2:visited {color: #ffff00;}
a.Channel2:hover{COLOR: #FF6600;}
a.Channel2:active {color: #ffff00;}
</pre>

/* 底部版权信息文字链接的CSS定义－－与顶部频道文字链接定义的想法相同。可设置与顶部频道文字链接定义不同的文字颜色，网页内定义以预留。调用代码为*** */
<pre>
a.Bottom:link {color: #ffffff;}
a.Bottom:visited {color: #ffffff;}
a.Bottom:hover{COLOR: #ffff00;}
a.Bottom:active {color: #ffffff;}
</pre>

/* 文章栏目标题文字链接的CSS定义－－可设置与顶部频道文字链接定义不同的文字颜色，网页内定义以预留。要相同可不设置。调用代码为 */
<pre>
a.Class:link {color: #ffffff;}
a.Class:visited {color: #ffffff;}
a.Class:hover{COLOR: #ff0000;}
a.Class:active {color: #ffffff;}
</pre>

/* 站内链接文字颜色定义 */
<pre>
a.Channel_KeyLink{text-decoration: underline;}
a.Channel_KeyLink:link {color: blue;}
a.Channel_KeyLink:visited {color: blue;}
a.Channel_KeyLink:hover{color: #ff0000;}
a.Channel_KeyLink:active {color: blue;}
</pre>

/* 缩略图加上边框等效果风格定义，.pic1、.pic2、.pic3和.pic5这几个CSS样式定义，分别对应文章频道、下载频道、图片频道和商城频道调用并显示的图片进行样式控制 */
<pre>
.pic1
{border: 1px solid #00B5F7;this.style.FILTER: DropShadow(color:#999999;OffX:2;OffY:2;Positive:1);}
.pic2
{border: 3px double #00B5F7;FILTER: Glow(Color=#cccccc, Strength=5);dropshadow(color=cccccc, OffX=1, OffY=1,);}
.pic3
{border: 1px double #cccccc;filter:progid:DXImageTransform.Microsoft.Glow(color=#cccccc,Strength=5);}
.pic5
{border: 2px dotted #cccccc;}
</pre>

/* Body的CSS定义:对应CSS中“BODY”，可定义内容为网页字体颜色、背景、[[浏览器]]边框等 */
<pre>
BODY
{FONT-SIZE: 9pt;background:url(Skin/blue/bg_all.gif);
background-position:center;
text-decoration: none;
SCROLLBAR-FACE-COLOR: #f6f6f6;
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
SCROLLBAR-SHADOW-COLOR: #cccccc;
SCROLLBAR-3DLIGHT-COLOR: #cccccc;
SCROLLBAR-ARROW-COLOR: #330000;
SCROLLBAR-TRACK-COLOR: #f6f6f6;
SCROLLBAR-DARKSHADOW-COLOR: #ffffff;}
</pre>

/* 单元格的CSS定义:对应CSS中的“TD”，这里为总的表格定义，为一般表格的的单元格风格设置，可定义内容为背景、字体颜色、样式等 */
<pre>
TD
{FONT-FAMILY:宋体;FONT-SIZE: 9pt;line-height: 150%;}
</pre>

/* 文本框的CSS定义:对应CSS中的“INPUT”，这里为文本框的风格设置，可定义内容为背景、字体、颜色、边框等 */
<pre>
Input
{BACKGROUND-COLOR: #ffffff;BORDER-BOTTOM: #666666 1px solid;BORDER-LEFT: #666666 1px solid;BORDER-RIGHT: #666666 1px 
solid;BORDER-TOP: #666666 1px solid;COLOR: #666666;HEIGHT: 18px;border-color: #666666 #666666 #666666 #666666; 
font-size: 9pt;}
</pre>

/* 按钮的CSS定义:对应CSS中的“BUTTON”，这里为按钮的风格设置，可定义内容为背景、字体、颜色、边框等 */
<pre>
Button
{FONT-SIZE: 9pt;HEIGHT: 20px;}
</pre>

/* 下拉列表框的CSS定义:对应CSS中的“SELECT”，这里为下拉列表框的风格设置，可定义内容为背景、字体、颜色、边框等 */
<pre>
Select
{FONT-SIZE: 9pt;HEIGHT: 20px;}
</pre>

/* 顶部用户登录文字链接的CSS定义 */
<pre>
.top_UserLogin
{color: #037FA8;}
</pre>

'''·频道通用表格风格定义'''

/* ==频道通用表格CSS定义开始== */
<pre>
.Channel_border /* 灰色表格边框背景颜色定义(760) */
{border: 1px solid #cccccc;}
.Channel_title /* 标题背景颜色定义(760) */
{background: #cccccc;color: #037FA8;height: 27;text-align: center;font-weight:bold;}
.Channel_tdbg /* 表格背景颜色定义(760) */
{background:#FAFAFA;line-height: 120%;}
.Channel_pager /* 分页表格背景颜色定义(760) */
{background:#FAFAFA;line-height: 120%;}
.Channel_font /* 搜索等特殊文字颜色定义 */
{color: red;}
</pre>

'''·评论显示页风格定义'''
<pre>
/* --评论显示页的CSS定义开始-- */
.Comment_border /* 蓝色表格边框背景颜色定义(760) */
{border: 1px solid #449AE8;}
.Comment_title /* 标题背景颜色定义(760) */
{background:#449AE8;color:#ffffff;font-weight: normal;height: 25;}
.Comment_tdbg1 /* 表格背景颜色定义(760) */
{background:#FFFFFF;line-height: 120%;}
.Comment_tdbg2 /* 留言显示1px表格背景颜色定义 */
{background:#FAFAFA;}
/* --评论显示页的CSS定义结束-- */
/* ==频道通用表格CSS定义结束== */
</pre>

'''·简短标题文字风格定义'''
<pre>
/* ==简短标题文字的CSS定义开始== */
/* [图文]简短标题文字的CSS定义 */
.S_headline1
{color: blue;}
/* [组图]简短标题文字的CSS定义 */
.S_headline2
{color: #FF6600;}
/* [推荐]简短标题文字的CSS定义 */
.S_headline3
{color: green;}
/* [注意]简短标题文字的CSS定义 */
.S_headline4
{color: red;}
/* ==简短标题文字的CSS定义结束== */
</pre>

'''·网页顶部风格定义'''
<pre>
/* ==top中的CSS定义开始== */
.top_tdbgall /* 顶部表格总背景颜色定义 */
{width: 760;background:#ffffff;}
.top_top
{background:#0089F7;height: 2;}
.top_Channel /* 频道表格背景、文字颜色定义 */
{background:#0089F7;color:#3AB1F5!important;text-align: right;border-top: 1px solid #ffffff;border-bottom: 1px solid 
#ffffff;}
.top_Announce /* 公告表格背景、文字颜色定义 */
{background:url(Skin/blue/top_nav_menu.gif);color: #0560A6;height: 30;}
.top_nav_menu /* 导航栏表格背景、文字颜色定义 */
{background:url(Skin/blue/top_nav_menu.gif);color: #0560A6;height: 30;}
.top_Path /* 您现在的位置表格背景、文字颜色定义 */
{width: 760;background:#ffffff;height: 30;}
.top_UserLogin /* 顶部用户登录文字链接的CSS定义 */
{color: #037FA8}
/* ==top.asp中的CSS定义结束== */
</pre>

'''·网页中部风格定义开始'''
<pre>
/* ==网页中部中的CSS定义开始== */
.center_tdbgall /* 中部表格总背景颜色定义 */
{background:#ffffff;}
</pre>

'''·网页中部左栏风格定义'''
<pre>
　　/* --网页中部左栏的CSS定义开始-- */
.left_tdbgall /* 左栏表格总背景颜色定义 */
{background:#ffffff;}
.left_title /* 左栏标题表格背景、文字颜色定义 */
{background:url(Skin/blue/left_title.gif);font-weight:bold;color: ffffff;height: 
28;width:180;padding-left:40;text-align: left;}
.left_tdbg1 /* 左栏内容表格背景、文字颜色定义 */
{background:url(Skin/blue/left_tdbg1.gif);line-height: 150%;padding-left:5;padding-right:8;}
.left_tdbg2 /* 左栏底部表格背景、文字颜色定义 */
{background:url(Skin/blue/left_tdbg2.gif);height: 10;}
.right_title /* 左栏标题表格背景、文字颜色定义 */
{background:url(Skin/blue/right_title.gif);font-weight:bold;color: ffffff;height: 
28;width:180;padding-left:40;text-align:
left;}
　　/* --网页中部左栏的CSS定义结束-- */
</pre>

'''·网页中部中栏风格定义'''
<pre>
　　/* --网页中部中栏的CSS定义开始-- */
.main_tdbgall /* 中栏表格总背景颜色定义 */
{width: 572;background:#ffffff;}
.main_shadow /* 中栏内容间隔表格背景颜色定义(575) */
{height: 4;}
.main_announce /* 中栏公告表格背景、文字颜色定义 */
{color: 037FA8;height: 25;background:#f9f9f9;border: 1px solid #D2D3D9;}
.main_Search /* 中栏搜索表格背景、文字颜色定义 */
{color: 037FA8;height: 25;border: 1px solid #D2D3D9;background:#f9f9f9;}
.main_top /* 中栏最新推荐表格背景颜色定义 */
{background:url(Skin/blue/main_top.gif);height: 187;}
.main_title_760i /* 网站首页中栏标题表格背景、文字颜色定义(760) */
{color: ffffff;background:url(Skin/blue/main_title_760i.gif);border-top: 1px solid #D2D3D9;border-right: 1px solid 
#D2D3D9;border-left: 1px solid #D2D3D9;text-align: left;padding-left:40;height: 29;}
.main_tdbg_760i /* 网站首页中栏内容表格背景、文字颜色定义(760) */
{border: 1px solid #D2D3D9;line-height: 150%;text-align: left;padding-left:5;padding-right:5;}
.main_title_575 /* 中栏标题表格背景、文字颜色定义(575) */
{color: ffffff;background:url(Skin/blue/main_title_575.gif);border-top: 1px solid #D2D3D9;border-right: 1px solid 
#D2D3D9;border-left: 1px solid #D2D3D9;text-align: left;padding-left:40;height: 29;}
.main_tdbg_575 /* 中栏内容表格背景、文字颜色定义(575) */
{border: 1px solid #D2D3D9;line-height: 150%;text-align: left;padding-left:5;padding-right:5;}
.main_title_282i /* 栏目文章列表标题表格背景、文字颜色定义(282) */
{background:url(Skin/blue/main_title_282i.gif);color: ffffff;height: 29;border-top: 1px solid #D2D3D9;border-left: 1px
 solid #D2D3D9;border-right: 1px solid #D2D3D9;padding-left:40;}
.main_tdbg_282i /* 栏目文章列表内容表格背景、文字颜色定义(282) */
{border: 1px solid #D2D3D9;line-height: 150%;text-align: left;padding-left:5;padding-right:5;}
.main_title_282 /* 栏目文章列表标题表格背景、文字颜色定义(282) */
{background:url(Skin/blue/main_title_282.gif);color: ffffff;height: 29;border-top: 1px solid #D2D3D9;border-left: 1px
 solid #D2D3D9;border-right: 1px solid #D2D3D9;padding-left:40;}
.main_tdbg_282 /* 栏目文章列表内容表格背景、文字颜色定义(282) */
{border: 1px solid #D2D3D9;line-height: 150%;text-align: left;padding-left:5;padding-right:5;}
.listbg /* --栏目文章列表内容间隔颜色的定义1-- */
{background:#ffffff;}
.listbg2 /* --栏目文章列表内容间隔颜色的定义2-- */
{background:#f7f7f7;}
　　/* --网页中部中栏的CSS定义结束-- */
</pre>

'''·文章显示页风格定义'''
<pre>
　　/* --文章显示页的CSS定义开始-- */
.main_ArticleTitle /* 主标题文字颜色定义 */
{color: ff0000;font-weight:bold;font-size: 18;line-height: 150%;}
.main_ArticleSubheading /* 副标题文字颜色定义 */
{color: 037FA8;font-weight:bold;line-height: 150%;}
.main_title_760 /* 标题导航表格背景、文字颜色定义(760) */
{background:url(Skin/blue/main_title_760.gif);border: 1px solid #D2D3D9;height: 28;color: ffffff;}
.main_tdbg_760 /* 内容表格背景、文字颜色定义(760) */
{border: 1px solid #D2D3D9;padding: 8;line-height: normal;}
.Article_tdbgall /* 责编等表格背景、文字颜色定义(760) */
{background:#f5f5f5;}
　　/* --文章显示页的CSS定义结束-- */
</pre>

'''·留言频道风格定义'''
<pre>
　　/* --留言频道CSS定义开始-- */
/* 留言栏目标题文字链接的CSS定义－－调用代码为*** */
a.Guest:link {color: #ffffff;}
a.Guest:visited {color: #ffffff;}
a.Guest:hover{COLOR: #ff0000;}
a.Guest:active {color: #ffffff;}
.Guest_title_760 /* 标题导航表格背景、文字颜色定义(760) */
{background:url(Skin/blue/main_title_760.gif);border: 1px solid #D2D3D9;padding-left:5;height: 29;color: ffffff;}
.Guest_tdbg_760 /* 内容表格背景、文字颜色定义(760) */
{border: 1px solid #D2D3D9;padding: 8;}
.Guest_border /* 蓝色表格边框背景颜色定义(760) */
{border: 1px solid #449AE8;}
.Guest_title /* 标题背景颜色定义(760) */
{background:#449AE8;color: #ffffff;font-weight: normal;height: 25;}
.Guest_tdbg /* 表格背景颜色定义(760) */
{background:#FAFAFA;line-height: 120%;}
.Guest_tdbg_1px /* 留言显示1px表格背景颜色定义 */
{background:#D2D3D9;}
.Guest_border2 /* 回复表格虚线边框背景颜色定义(760) */
{border: 1px dashed #97D2DF;background:#E8F5F8;color: #006633;}
.Guest_ReplyAdmin /* 管理员回复文字背景颜色定义(760) */
{color: #ff0000;}
.Guest_ReplyUser /* 用户回复文字背景颜色定义(760) */
{color: #449AE8;}
.Guest_font /* 隐藏、用户等特殊文字颜色定义 */
{color: green;}
　　/* --留言频道CSS定义结束-- */
</pre>

'''·商城频道风格定义'''
<pre>
　　/* --商城的CSS定义开始-- */
.Shop_border /* 蓝色表格边框背景颜色定义(760) */
{border: 1px solid #449AE8;}
.Shop_border3 /* 灰色表格边框背景颜色定义(760) */
{border: 1px solid #cccccc;}
.Shop_title /* 标题背景颜色定义(760) */
{background:url(Skin/blue/main_title_760.gif);color: #ffffff;font-weight: normal;height: 27;}
.Shop_tdbg /* 表格背景颜色定义(760) */
{background:#FAFAFA;line-height: 120%;}
.Shop_tdbg2 /* 表格背景颜色定义2 */
{background:#f5f5f5;line-height: 120%;}
.Shop_tdbg3 /* 表格背景颜色定义3 */
{background:#ffffff;line-height: 120%;}
.Shop_tdbg4 /* 表格背景颜色定义4 */
{background:#E1F4EE;line-height: 120%;}
　　/* --商城的CSS定义结束-- */
/* ==网页中部中的CSS定义结束== */
</pre>

'''·网页底部风格定义'''
<pre>
/* ==Bottom中的CSS定义开始== */
.Bottom_tdbgall /* 底部表格总背景颜色定义 */
{width: 760;background:#ffffff;}
.Bottom_Adminlogo /* 管理信息表格背景、文字颜色定义 */
{background:#0089F7;color:#ffffff;}
.Bottom_Copyright /* 版权信息表格背景、文字颜色定义 */
{background:#ffffff;color:#000000;}
/* ==Bottom.asp中的CSS定义结束== */
</pre>

'''·其他风格定义'''
<pre>
/* ==下拉菜单中的CSS定义，只提供基本的设定，更多下拉菜单显示样式请在后台各频道中的“顶部菜单设置 | 生成”中设置== */
.menu
{background-color: #cccccc;width:97%;border: 1px;}
.menuBody
{background-color: #ffffff;}
/* ==自选风格中的CSS定义结束== */
</pre>

以上为《动易内容管理系统》默认提供的“蓝色经典”CSS样式，在系统的默认的各个版式模板中，以{$Skin_CSS}标签调用系统后台设置的默认风格。

系统提供任意添加自定义CSS样式功能。您可以在“网站风格管理”中任意添加自定义的风格模板，在风格模板中任意添加和定义样式名称，再到各个版式模板中调用您新定义的样式名即可。

CSS 样式并不是一种编程语言，只是一种用于页面设计的有设计者提供的手段。CSS样式的主要功能是通过对HTML标记进行设定，来达到对网页中的字体格式颜色背景图象和其它图文效果的控制功能，使网页能按设计者的意图来显示，从设计者的角度来看，它们几乎可以任意复杂的。灵活定义及运用CSS样式，对您今后整个网站的风格更换会带来极大的便利。








[[category:SiteWeaverCMS网站模板制作]]