[组图]动易系统CSS风格样式3D模型盒和定义规范

您现在的位置：动易技术中心 >> 模板设计教程 >> 动易模板 >> 正文

[组图]动易系统CSS风格样式3D模型盒和定义规范

作者：雅虎文章来源：本站原创点击数：更新时间：2006-12-8

一、CSS定义的划分及命名规范

1、按位置命名
　　网站风格整体通用的命名规则以网页顶部、中部、底部三个大区块位置及其内部位置进行划分与命名，如：

·网页顶部定义的样式命名为：top_***；
·网页中部定义的样式命名为：center_***；
·网页底部定义的样式命名为：bottom_***；

在网页中部定义中，按其位置划分为左、中、右三个区块：
·网页中部左侧运用的样式命名为：left_***；
·网页中部中间运用的样式命名为：main_***；
·网页中部右侧运用的样式命名为：right_***；
……

2、按使用范围命名
　　在各区块内，则按其使用范围进行命名，如：

三大区块整体定义：
.top_tdbgall
.center_tdbgall
.bottom_tdbgall
备注：本定义一般用于控制顶部、中部、底部表格的宽度、背景色、两侧连线的定义样式

网页顶部（top）中的CSS定义：

网页顶部通用定义：
.top_tdbgall 　　/* 顶部表格总背景颜色定义 */
{
width: 760;background:#ffffff;
}

网页顶部中的CSS定义：
.top_top　　　　　　/* 顶部间隔表格定义 */
.top_Channel 　　　/* 频道表格背景、文字颜色定义 */
.top_Announce　　　/* 公告表格背景、文字颜色定义 */
.top_nav_menu　　　/* 导航栏表格背景、文字颜色定义 */
.top_Path 　　　　　/* 您现在的位置表格背景、文字颜色定义 */
.top_UserLogin　　　/* 顶部用户登录文字链接的CSS定义 */

网页中部（center）的CSS定义：

网页中部通用定义：
.center_tdbgall 　　/* 中部表格总背景颜色定义 */
{
background:#ffffff;
}

网页中部左栏的CSS定义：
.left_tdbgall　　 /* 左栏表格总背景颜色定义 */
.left_title 　　　/* 左栏标题表格背景、文字颜色定义 */
.left_tdbg1 　　/* 左栏内容表格背景、文字颜色定义 */
.left_tdbg2 　　/* 左栏底部表格背景、文字颜色定义 */

网页中部右栏的CSS定义：
.right_title　　 /* 左栏标题表格背景、文字颜色定义 */
……

　　/* --网页中部中栏的CSS定义开始-- */

网页中部中栏的CSS定义：
.main_tdbgall 　　　/* 中栏表格总背景颜色定义 */
.main_shadow 　　　/* 中栏内容间隔表格背景颜色定义(575) */
.main_announce 　　/* 中栏公告表格背景、文字颜色定义 */
.main_Search 　　　/* 中栏搜索表格背景、文字颜色定义 */
.main_top 　　　　/* 中栏最新推荐表格背景颜色定义 */
.main_title_760i　　 /* 网站首页中栏标题表格背景、文字颜色定义(760) */
.main_tdbg_760i 　　/* 网站首页中栏内容表格背景、文字颜色定义(760) */
.main_title_575　　 /* 中栏标题表格背景、文字颜色定义(575) */
.main_tdbg_575　　 /* 中栏内容表格背景、文字颜色定义(575) */
.main_title_282i 　　/* 栏目文章列表标题表格背景、文字颜色定义(282) */
.main_tdbg_282i 　　/* 栏目文章列表内容表格背景、文字颜色定义(282) */
.main_title_282 　　/* 栏目文章列表标题表格背景、文字颜色定义(282) */
.main_tdbg_282 　　/* 栏目文章列表内容表格背景、文字颜色定义(282) */
.listbg 　　　　/* --栏目文章列表内容间隔颜色的定义1-- */
.listbg2 　　　/* --栏目文章列表内容间隔颜色的定义2-- */

文章显示页的CSS定义：
.main_ArticleTitle 　　　　/* 主标题文字颜色定义 */
.main_ArticleSubheading 　/* 副标题文字颜色定义 */
.main_title_760 　　　/* 标题导航表格背景、文字颜色定义(760) */
.main_tdbg_760　　　 /* 内容表格背景、文字颜色定义(760) */
.Article_tdbgall 　　　/* 责编等表格背景、文字颜色定义(760) */

留言频道CSS定义：
a.Guest　　　/* 留言栏目标题文字链接的CSS定义－－调用代码为<a class=’Guest’ ***>***</a> */
.Guest_title_760　　 /* 标题导航表格背景、文字颜色定义(760) */
.Guest_tdbg_760 　　/* 内容表格背景、文字颜色定义(760) */
.Guest_border　　　 /* 蓝色表格边框背景颜色定义(760) */
.Guest_title　　　　 /* 标题背景颜色定义(760) */
.Guest_tdbg　　　　 /* 表格背景颜色定义(760) */
.Guest_tdbg_1px 　　　　/* 留言显示1px表格背景颜色定义 */
.Guest_border2 　　　　　/* 回复表格虚线边框背景颜色定义(760) */
.Guest_ReplyAdmin　　　 /* 管理员回复文字背景颜色定义(760) */
.Guest_ReplyUser　　　　 /* 用户回复文字背景颜色定义(760) */

商城的CSS定义：
.Shop_border　　 /* 蓝色表格边框背景颜色定义(760) */
.Shop_border3 　　/* 灰色表格边框背景颜色定义(760) */
.Shop_title　　　 /* 标题背景颜色定义(760) */
.Shop_tdbg 　　　/* 表格背景颜色定义(760) */
.Shop_tdbg2 　　　/* 表格背景颜色定义2 */
.Shop_tdbg3 　　　/* 表格背景颜色定义3 */
.Shop_tdbg4　　　 /* 表格背景颜色定义4 */

供求信息div按钮定义：
#supply
.supplybut
.supplybutover

固定排课表格表格的css定义：
.date_border
.date_title
.date_tdbg
.style2
.style3

网页底部（bottom）的CSS定义：

网页底部通用定义：
.Bottom_tdbgall /* 底部表格总背景颜色定义 */
{
width: 760;background:#ffffff;
}

网页底部中的CSS定义：
.Bottom_Adminlogo　　 /* 管理信息表格背景、文字颜色定义 */
.Bottom_Copyright 　　/* 版权信息表格背景、文字颜色定义 */

网站整体及有链接文字“A”的CSS定义

网站整体定义：
BODY 　　/* Body的CSS定义:对应CSS中“BODY”，可定义内容为网页字体颜色、背景、浏览器边框等 */

TD 　　/* 单元格的CSS定义:对应CSS中的“TD”，这里为总的表格定义，为一般表格的的单元格风格设置，可定义内容为背景、字体颜色、样式等 */

Input　　 /* 文本框的CSS定义:对应CSS中的“INPUT”，这里为文本框的风格设置，可定义内容为背景、字体、颜色、边框等 */

Button 　　/* 按钮的CSS定义:对应CSS中的“BUTTON”，这里为按钮的风格设置，可定义内容为背景、字体、颜色、边框等 */

Select　　 /* 下拉列表框的CSS定义:对应CSS中的“SELECT”，这里为下拉列表框的风格设置，可定义内容为背景、字体、颜色、边框等 */

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

a.Channel　　/* 顶部频道文字链接的CSS定义－－将顶部频道文字链接与网站链接总的CSS定义分开，以后可以制作深底浅字的格式，如果要保持原来的设计样式，将此定义内容删除或定义成与网站链接总的CSS相同即可。调用代码为<a class=’Channel’ ***>***</a> */

a.Channel2　　/* 顶部当前频道文字链接的CSS定义－－调用代码为<a class=’Channel2’ ***>***</a> */

a.Bottom　　/* 底部版权信息文字链接的CSS定义－－与顶部频道文字链接定义的想法相同。可设置与顶部频道文字链接定义不同的文字颜色，网页内定义以预留。调用代码为<a class=’Bottom’ ***>***</a> */

a.Class　　/* 文章栏目标题文字链接的CSS定义－－可设置与顶部频道文字链接定义不同的文字颜色，网页内定义以预留。要相同可不设置。调用代码为<a class=’Class’ ***>***</a> */

a.Guest　　/* 留言栏目标题文字链接的CSS定义－－调用代码为<a class='Guest' ***>***</a> */

a.Channel_KeyLink　　/* 站内链接文字颜色定义 */

频道通用表格CSS定义

频道通用表格CSS定义：
.Channel_border 　　/* 灰色表格边框背景颜色定义(760) */
.Channel_title 　　/* 标题背景颜色定义(760) */
.Channel_tdbg　　 /* 表格背景颜色定义(760) */
.Channel_pager　　 /* 分页表格背景颜色定义(760) */

评论显示页的CSS定义：
.Comment_border /* 蓝色表格边框背景颜色定义(760) */
.Comment_title /* 标题背景颜色定义(760) */
.Comment_tdbg1 /* 表格背景颜色定义(760) */
.Comment_tdbg2 /* 留言显示1px表格背景颜色定义 */

简短标题文字的CSS定义：
.S_headline1　　 /* [图文]简短标题文字的CSS定义 */
.S_headline2 　　/* [组图]简短标题文字的CSS定义 */
.S_headline3 　　/* [推荐]简短标题文字的CSS定义 */
.S_headline4　　/* [注意]简短标题文字的CSS定义 */

评论显示页的CSS定义：
.Guest_font /* 隐藏、用户等特殊文字颜色定义 */

站内链接文字颜色定义：
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;}

用户控制css定义：
/*用户控制面板左*/
.user_left　　 /*左区块定义*/
.user_box　　/*左区块内标题栏定义*/
.user_righttitle
.user_line
.user_toolstop　　/*左区块内标题栏定义*/
.user_toolsbot　　/*左区块内内容定义*/
.user_toolspoint　　/*区块内箭头栏定义*/

/*用户控制面板右*/
.user_right {
.border1
.title
.border
.tdbg
.tdbgmouseover
.tdbg2
.tdbg5
.title5
.title6
.button1
.show_page

用户登录框定义：
#userlogined
#userctrl
#usermessage
.havemessage
.havemessaged
.spaceList　　 /* 聚合空间列表定义 */
.spaceList_image
.spaceList_intro
#showspacelist_more

RSS连接框定义：
#popitmenu
#popitmenu A
#popitmenu A:hover

小结：从以上相关定义与命名中可以看出，定义名的规律一般中是以“（网页顶部、中部、底部三个大区块位置）”+“_”+“使用范围（表格内使用范围、模块名、运用范围等）”进行命名。如果有更多类似的，如“main_title_575”则再次加上“定义使用范围”的后缀名。

3、综合命名
　　为方便设计师及用户理解与修改相应样式，需综合位置命名规则及功能命名规规，如“位置名_功能名_其它定义名”样式，例如：网站首页中栏内容表定义为Main_right_tdbg_760i。

　　对于整个网站通用的定义，则采用通用定义，如BODY、TD、Input、Button、Select等，以统一这些通用元素的风格样式。

上一页 [1] [2] [3] [4] [5] [6] 下一页

文章录入：雅虎责任编辑：雅虎

上一个文章： [组图]动易2006应用技巧： FLASH全屏播放

下一个文章：动易2005升级到2006模板修改汇总

【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】

软件产品

SiteFactory™ 内容管理系统

SiteFactory™ 网上商店系统