PHP框架中统一的页面展示风格

管理页面：

 

 

 

 

编辑页面：

 

 

由统一的样式表控制：

 

/* CSS Document */

body{ margin:0px auto;text-align:center;}
div,span,td{ font-size:12px; font-family:"宋体";}
a {font-weight : normal;font-style : normal;color : black;text-decoration : none;}
a:link { color: #000000; text-decoration: none;}
a:hover {text-decoration: none;color: #FF3300;}

/*同步记载*/
.AsLoadding{ background:#FFFFFF;text-align:center; width:300px; font-size:12px; font-family:"宋体"; font-weight:normal; line-height:30px; position:absolute; top:0px; left:0px; z-index:999; color:red;}
.AsImage{background:url(Images/websedit-ag-bar.gif) no-repeat center; width:300px; height:30px;}

/*--头部--*/
.top{ height:60px; width:100%; background:url(../images/top_bg.gif);}
.top_mainlink{ position:absolute; padding:10px;padding-right:20px; right:0px; top:0px;}
.top_mainlink a{ color:#FFFFFF; text-decoration:none;}
.top_wellcome{ position:absolute; padding:10px;left:197px; top:0px; color:#FFFFFF; direction:ltr; line-height:24px;}

/*----左边菜单----*/
.frame_menu{ background:url(../images/left_bg.gif); vertical-align:top;overflow:hidden;}
.module{background:url(../images/left_model_bg.gif);width:165px!important;width:200px;height:34px;line-height:34px;overflow:hidden;padding-left:35px ;color:#FFFFFF; cursor:pointer;}
.module a{ color:#FFFFFF;}
.module a:hover{ font-weight:bold; color:#FFFFFF;}

.menu{background:url(../images/left_menu_bg.gif);width:165px!important;width:200px;height:30px;line-height:30px;overflow:hidden;padding-left:35px; color:#000000;}
.menu a:hover{ font-weight:bold; color:#333333;}

.main_content{}

/*---标题----*/
.frame_title{ height:30px; text-align:left; line-height:30px; padding-left:20px; background:#E4F0FA; border-top:1px #FFFFFF solid; color:#6C6C6C;}
.title_menu{position:absolute; padding-right:20px; right:0px; top:0px;}
.c_menu{ margin-left:10px; background:url(../images/title_menu_close.gif) no-repeat; padding-left:20px; cursor: pointer}
.c_help{margin-left:10px; background:url(../images/title_help_close.gif) no-repeat;padding-left:20px;cursor: pointer}
.o_menu{margin-left:10px;background:url(../images/title_help_close.gif) no-repeat;padding-left:20px;cursor: pointer}
.o_help{margin-left:10px;background:url(../images/title_help_close.gif) no-repeat;padding-left:20px;cursor: pointer}
.title_menu a{ color:#6C6C6C;line-height:30px;}

/*----------帮助说明------*/
.frame_explain{ height:60px;background:url(../images/explain_bg.gif); text-align:left; overflow:hidden; vertical-align:middle;overflow: hidden;}
.frame_explain *{ vertical-align:middle}
.explain_logo{ text-align:center; vertical-align:middle; height:60px;width:80px; float:left; background:url(../images/explain_logo.gif) center no-repeat;}
.explain_inner{
 position:absolute;
 top:35px;
 text-align:left;
 vertical-align:middle;
 padding:5px;
 line-height:24px;
 color:#6C6C6C;
 left: 79px;
}

/*---------操作菜单-----------*/
.frame_toolbar{background:#FFFFFF;vertical-align:middle;margin:0px auto;min-height:40px;}
.toolbar_menu{ float:left;padding:10px;}
.toolbar_menu A,.toolbar_query A{BORDER-RIGHT: #ff9600 1px solid; PADDING-RIGHT: 7px; BACKGROUND-POSITION: 50% bottom; BORDER-TOP: #ff9600 1px solid; PADDING-LEFT: 7px; PADDING-BOTTOM: 5px; BORDER-LEFT: #ff9600 1px solid; COLOR: #ff6500; MARGIN-RIGHT: 3px; PADDING-TOP: 5px; BORDER-BOTTOM: #ff9600 1px solid; TEXT-DECORATION: none
}
.toolbar_menu A:hover,.toolbar_query A:hover { BORDER-RIGHT: #ff9600 1px solid; BORDER-TOP: #ff9600 1px solid; BACKGROUND-IMAGE: none; BORDER-LEFT: #ff9600 1px solid; COLOR: #ff6500; BORDER-BOTTOM: #ff9600 1px solid; BACKGROUND-COLOR: #ffc794}
.toolbar_menu A:active,.toolbar_query A:active {BORDER-RIGHT: #ff9600 1px solid; BORDER-TOP: #ff9600 1px solid; BACKGROUND-IMAGE: none; BORDER-LEFT: #ff9600 1px solid; COLOR: #ff6500; BORDER-BOTTOM: #ff9600 1px solid; BACKGROUND-COLOR: #ffc794}

.toolbar_query{float:right;padding:10px;}

/*----表格----*/
.frame_content{text-align:center;padding:10px;margin:0px auto;}
.frame_table{ background:#BAC2C8;border:0px;}
.frame_table thead td{ background:url(../images/table_head_bg.gif); height:24px; color:#2871AF; text-align: center; vertical-align:middle;}
.frame_table tbody td{background:#CBFFC9; line-height:24px; vertical-align:middle;}
.frame_table tbody tr:hover{background-color:#FFFFFF;cursor:default}
.table_mouse_over{ background:#CBFFC9}

/*---编辑表格---*/
.table_edit{ background:#BAC2C8; width:98%;border:0px;}
.edit_text{text-align:right;background:#8EBCEA;height:30px;padding-right:5px; vertical-align:middle;}
.edit_input{text-align:left;background:#FFFFFF;height:30px;padding-left:5px; vertical-align:middle;}

.frame_query_table{ background:#BAC2C8; width:98%;border:0px;}

/*---详细信息---*/
.table_view{ background:#BAC2C8; width:98%;border:0px;}
.view_text{text-align:right;background:#8EBCEA;height:30px;padding-right:5px; vertical-align:middle;}
.view_value{text-align:left;background:#FFFFFF;height:30px;padding-left:5px; vertical-align:middle;}

.frame_list{}
.frame_edit{ position:absolute; border:#999999 1px solid; top:100; left:250; width:600px; height:500px; display:none}

/*翻页功能*/
/*CSS manu style pagination*/

.manu { PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; MARGIN: 3px; PADDING-TOP: 3px; TEXT-ALIGN: center;color:#036cb4}
.manu A { BORDER-RIGHT: #eee 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #eee 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #eee 1px solid; COLOR: #036cb4; PADDING-TOP: 2px; BORDER-BOTTOM: #eee 1px solid; TEXT-DECORATION: none}
.manu A:hover { BORDER-RIGHT: #999 1px solid; BORDER-TOP: #999 1px solid; BORDER-LEFT: #999 1px solid; COLOR: #666; BORDER-BOTTOM: #999 1px solid}
.manu A:active { BORDER-RIGHT: #999 1px solid; BORDER-TOP: #999 1px solid; BORDER-LEFT: #999 1px solid; COLOR: #666; BORDER-BOTTOM: #999 1px solid}
.manu .current { BORDER-RIGHT: #036cb4 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #036cb4 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #036cb4 1px solid; COLOR: #fff; PADDING-TOP: 2px; BORDER-BOTTOM: #036cb4 1px solid; BACKGROUND-COLOR: #036cb4}
.manu .disabled { BORDER-RIGHT: #eee 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #eee 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #eee 1px solid; COLOR: #ddd; PADDING-TOP: 2px; BORDER-BOTTOM: #eee 1px solid}

由于本框架主要用于后台管理，代码方面更追求可读性，对于带宽方面影响的考虑偏少。