js编程规范.docx
《js编程规范.docx》由会员分享，可在线阅读，更多相关《js编程规范.docx（25页珍藏版）》请在冰豆网上搜索。
js编程规范
动易系统CSS风格样式3D模型盒和定义规范
动易系统自4.×版本开始，版式模板与风格模板开始紧密结合，并考虑到对今后一些基本界面定义修改的方便，对默认的风格进行了运用定义的预设。
系统提供默认的风格模板定义，可查阅网站后台默认的风格设置的“风格配色设置”。
系统默认提供的CSS样式风格定义，里面有详细的定义注释，注释标记为：
/*......*/。
在系统中，CSS样式风格定义是可以自己自由定义的，也说是说您可以自由添加N多个自定义的风格，然后在各频道的版式模板中调用即可。
修改风格设置必须具备一定网页css样式设计知识，建议您找些这方面的书看一下。
在定义中不能使用单引号或双引号，否则会容易造成程序错误。
现对一些定义进行说明：
[NextPage]
一、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定义－－调用代码为****/
.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.Channel2 /*顶部当前频道文字链接的CSS定义－－调用代码为****/
a.Bottom /*底部版权信息文字链接的CSS定义－－与顶部频道文字链接定义的想法相同。
可设置与顶部频道文字链接定义不同的文字颜色，网页内定义以预留。
调用代码为****/
a.Class /*文章栏目标题文字链接的CSS定义－－可设置与顶部频道文字链接定义不同的文字颜色，网页内定义以预留。
要相同可不设置。
调用代码为****/
a.Guest /*留言栏目标题文字链接的CSS定义－－调用代码为****/
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
#popitmenuA
#popitmenuA:
hover
小结：
从以上相关定义与命名中可以看出，定义名的规律一般中是以“（网页顶部、中部、底部三个大区块位置）”+“_”+“使用范围（表格内使用范围、模块名、运用范围等）”进行命名。
如果有更多类似的，如“main_title_575”则再次加上“定义使用范围”的后缀名。
3、综合命名
为方便设计师及用户理解与修改相应样式，需综合位置命名规则及功能命名规规，如“位置名_功能名_其它定义名”样式，例如：
网站首页中栏内容表定义为Main_right_tdbg_760i。
对于整个网站通用的定义，则采用通用定义，如BODY、TD、Input、Button、Select等，以统一这些通用元素的风格样式。
[NextPage]
二、CSS定义的模型示例
在页面设计中，CSS的定位与套用中的盒模型影响其定位与样式，以下以CSS盒模型的3D示意图，以方便清楚调用时的层次、关系和相互影响，便于理解和记忆。
动易网页设计CSS盒模型3D示意图
以网页中部左栏为例：
以下是“用户排行”html代码：
--用户排行代码开始-->
break-all"cellSpacing=0cellPadding=0width="100%"border=0>
用户排行
|
{$ShowTopUser（5）}
|
|
--用户排行代码结束-->
……
其中，在中部表格开始商用了“tableclass=center_tdbgall”，则“.center_tdbgall”可控制中部表格的背景与宽度，这里加上了“cellSpacing=0cellPadding=0width=760align=centerborder=0”等定义，是为了方便在DW这些可视化网页编辑软件中进行编辑而加的定义。
如果对CSS非常熟悉，且有一定的空间能力，则此处可只写成：
所有的定义由“.center_tdbgall”来完成对表格样式的定义与控制即可。
即使是现在已经加了“cellSpacing=0cellPadding=0width=760align=centerborder=0”等定义也不用担心，一旦“.center_tdbgall”中定义了与其相同的元素，如“width:
100%”，则会是CSS中的定义优先于网页中固定的HTML代码定义。
其他定义的解释见下表：
以下是“用户排行”html代码：
以“.center_tdbgall”预置能控制中部表格的样式，如改成深色背景、重新定义其宽度。
以“.left_tdbgall”预置能控制中部左侧表格的样式，如改成深色背景、重新定义其宽度。
--用户排行代码开始-->
break-all"cellSpacing=0cellPadding=0width="100%"border=0>
“style="WORD-BREAK:
break-all"”控制其文字强制换行，“width="100%"”控制其宽度随着“.left_tdbgall”的宽度定义自动缩放。
用户排行
以“.left_title”预置能控制中部左侧表格内，“用户排行”文字所在标题单元格中无链接文字、背景、宽度等样式。
|
“tbody”是一组控制所括元素样式、重复等内容的定义，可运用在栏目循环列表的模板设计中。
“id=userlist”以“#userlist”的风格定义预置能控制所调用显示的无链接文字、背景、宽度等样式。
这里为本内容使用时的特殊定义。
{$ShowTopUser（5）}
以“.left_tdbg1”预置能控制中部左侧表格内，显示中无链接文字、背景、宽度等样式。
|
以“.left_tdbg2”预置能控制中部左侧表格底部背景、宽度等样式，同时也可以控制与下一个表格的间距、高度等定义。
|
--用户排行代码结束-->
……
因此，要使得所定义的表格与CSS风格样式能适用于不同的设计需求，一般区域中需要四个以上的定义，才有可能通过修改样式定义来实现页面风格设计需要，如考虑到白底黑字、黑底白字等不同的网页风格设计。
至少四个的CSS定义：
.***_tdbgall /*表格总背景颜色定义*/
.***_title /*标题表格背景、文字颜色定义*/
.***_tdbg1 /*内容表格背景、文字颜色定义*/
.***_tdbg2 /*底部表格背景、文字颜色定义*/
……
另外对于本区域中还有有链接的文字，则需要进一步考虑“a.***”的定义，或是在其表格外加div层单独控制本区域中的有链接文字的样式，这里不再细述。
[NextPage]
二、CSS定义的运用示例
以网页的设计运用实例说明CSS定义的运用：
以上面的网页为例进行说明：
定义网页整体背景颜色：
只需定义网页的背景色
body
{
margin:
0px;
font-size:
9pt;background:
#B77D00;
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;
}
定义三大区块：
注意以下对图片CSS的定义内容
顶部表格定义：
宽度为100%全面延伸；背景颜色为深棕色，强制居左对齐
.top_tdbgall/*顶部表格总背景颜色定义*/
{
width:
100%;background:
#694300;float:
left;
}
中部表格定义：
宽度为993像素的固定尺寸；背景颜色为白色，强制居左对
.center_tdbgall/*中部表格总背景颜色定义*/
{
float:
left;width:
993px;background:
#ffffff;
}
底部表格定义：
宽度为993像素的固定尺寸；背景颜色不定义，以显示底色
.bottom_tdbgall/*底部表格总背景颜色定义*/
{
width:
993px;float:
left;
}
定义左侧表格的效果：
左侧背景定义：
固定宽度为250像素，定义背景色为浅棕色，强制居中
.left_tdbgall/*左栏表格总背景颜色定义*/
{
width:
250px;background:
#B77D00;float:
center;
}
左侧表格标题定义：
固
升级会员 