www.gusucode.com > 界面漂亮的JSP论坛系统源码程序 > 界面漂亮的JSP论坛系统/Helloer/Helloer/Helloer(2.5.0)安装程序/css/style_common.css

    
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Common Style ~~~~ */

* { word-wrap: break-word; } /* 分行 */

body { background: #FFF; text-align: center; } /* 定义body 背景 和 居中 */

body, td, input, textarea, select, button { color: #000; font: 12px/1.6em Tahoma,Helvetica,Arial,sans-serif; } /* 定义 body td input textarea select botton 字体 大小 颜色 */

body, ul, dl, dd, p, h1, h2, h3, h4, h5, h6, form, fieldset { margin: 0; padding: 0; } /* 定义 body ul dl dd p h1~h6 空白边和填充像素 */

h1, h2, h3, h4, h5, h6 { font-size: 1em; } /* 定义 h1~h6 字体大小 */

.popupmenu_popup li, .portalbox li, .tabs li, .postmessage fieldset li, .side li, .formbox li, .notice li { list-style: none; } /* 定义 列表样式 */

#menu li, #announcement li  li { list-style: none; } /* 定义 列表样式 */

a { color: #000; text-decoration: none; } /* 定义超链接 字体颜色 和 下划线 */

	a:hover { text-decoration: underline; } /* 定义超链接悬停 下划线 */
	
a img { border: none; } /* 定义 超链接图片 外框 */

em, cite, strong, th { font-style: normal; font-weight: normal; } /* 定义 字体风格 和 字体粗细 */

table { empty-cells: show; border-collapse: collapse; } /* 定义 表格的边框是否被合并为一个单一的边框 和 是否显示表格中的空单元格 */


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Layout & Block Style ~~~~ */


.wrap { width: 98%; text-align: left; margin: 0 auto; } /* 定义 宽度 居左 外边距 */

/* 顶部Logo样式 */
#header { width: 100%; overflow: hidden; } /* 定义 宽度 元素的内容溢出其区域时发生的事情 */
	#header h2 { float: left; padding: 5px 0; } /* 定义 元素在哪个方向浮动 和 内边距  */

/* 顶部 广告样式 */
#ad_headerbanner { float: right; margin-top: 15px; }


/* 用户菜单样式 */
#menu { height: 31px; border: 1px solid #CAD9EA; background: #FFF url("../images/menu_bg.gif"); background-repeat: repeat-x; } /* 定义 高度 边框 背景 如何重复背景图像 */
	#menu ul { float: right; padding: 3px 3px 0; border-right: 1px solid #FFF; }
		#menu li { float: left; }
			#menu li a { text-decoration: none; display: block; color: #333; padding: 4px 8px 3px; background: url(../images/menu_itemline.gif) no-repeat 0 6px; }
				#menu li.hover, #menu li.current { background-color: #FFF; border: 1px solid; border-color: #CAD9EA #CAD9EA #FFF; }
					#menu li.current { font-weight: bold; }
					#menu li.hover a { padding: 3px 7px; background-image: none; }
					#menu li.current a { padding: 4px 7px 3px; background-image: none; }
					#menu cite a { font-weight: bold; background-image: none; }
/* 下拉菜单 */
.dropmenu { padding-right: 15px !important; background-image: url(../images/arrow_down.gif) !important; background-position: 100% 50% !important; background-repeat: no-repeat !important; cursor: pointer; }
.popupmenu_popup { text-align: left; line-height: 1.4em; padding: 10px; overflow: hidden; border: 1px solid #CAD9EA; background: #FFF url("../images/portalbox_bg.gif"); background-repeat: repeat-x; background-position: 0 1px;  }
.headermenu_popup { width: 170px; }
	.headermenu_popup li { float: left; width: 7em; line-height: 24px; height: 24px; overflow: hidden; border-bottom: 1px solid #E8E8E8; }


/* 导航栏样式 */
#foruminfo { width: 100%; overflow: hidden; margin: 8px 0; color: #666; }
	#userinfo, #foruminfo #nav { float: left; padding-left:  4px; }
	#forumstats { float: right; text-align: right;}
	#foruminfo p { margin: 0; }
		#foruminfo a{ color: #069; }
		#foruminfo em { color: #000; }
		#foruminfo cite { font-weight: bold; }
			#foruminfo strong a { font-weight: bold; color: #000; }
		#foruminfo #nav { margin-top: 10; }
		#userinfo #nav { float: left; }
			#nav a { font-weight: bold; color: #069; }
			
/* 公告栏样式 */
#announcement {  border-top: 1px dashed #CAD9EA; line-height: 36px; height: 36px; overflow: hidden; } /* 定义 顶边框 行间距 高度 元素的内容溢出其区域时发生的事情 */
	#announcement div { border: 1px solid #FFF; padding: 0 10px; line-height: 35px !important; height: 36px; overflow-y: hidden;}  /* 定义div 边框 行间距 高度 元素的内容溢出其区域时发生的事情 */
		#announcement li { float: left; margin-right: 20px; padding-left: 10px; background: url(../images/arrow_right.gif) no-repeat 0 50%; white-space: nowrap; }  /* 定义li 元素浮动方向 右外边距 左内边距 背景 背景图片是否重复  如何处理元素内的空白 */
			#announcement li em { font-size: 88%; margin-left: 5px; color: #666; } /* 定义 字体大小 颜色 左外边距 */
			

/* 底部版权样式 */
#footer { width: 100%; border-top: 1px dashed #CAD9EA;  color: #666; padding: 15px 0; }
	#footlinks { float: right; margin-top: -3px; text-align: right; }
	#footer img { float: left; margin: 0 10px 0 0; }
	#copyright { font: 0.83em/1.5em Verdana, Arial, Helvetica, sans-serif; }
		#copyright strong, #copyright em { font-weight: bold; }
			#copyright strong a { color: #0954A6; }
			#copyright em { color: #FF9D25; }
	.scrolltop { cursor: pointer; }

/* 友情链接样式 */
#forumlinks {}
	#forumlinks td { padding: 5px 5px 5px 70px; background: url(../images/link.gif) no-repeat 17px 50%; color: #999; height:35px;}
	#forumlinks .forumlink_logo { float: right; }

/* 在线会员样式 */
#online {}
	#online h4 { font-weight: normal; color: #666; }
		#online h4 strong { font-weight: bold; }
	#online dl { padding: 5px 5px 5px 55px; }
		#onlinelist { background: url(../images/online.gif) no-repeat 13px 50%; border-top: 1px solid #E8E8E8; }
		#online dt { padding: 5px 5px 5px 6px; color:#666;}
			#online dt img { margin-bottom: -1px; }
		#online dd { border-top: 1px solid #E8E8E8; }

.userlist { overflow: hidden; padding: 5px 5px 0; color:#666;}
	* html .userlist { height: 1%; }
	.userlist li { float: left; width:100px; height: 20px; overflow: hidden; }
		.userlist li img { vertical-align: middle; }
	#onlinelist .userlist li { height: auto; margin:4px auto ;}

/* 友情 在线会员 外框 */
.box { background: #FFF; border: 1px solid #CAD9EA; padding: 0px; margin-bottom: 10px; }
	.box h4 { background: #FFF url("../images/portalbox_bg.gif"); background-repeat: repeat-x; background-position: 0 0; line-height: 30px; padding: 0 10px; }
	.box table { width: 100%; }
		.box td { border-top: 1px solid #E8E8E8; }
		.box .box li { list-style: none;}


/* 大版主样式 */
.headactions { float: right; line-height: 1em; padding: 10px 10px 0 0; color: #FFF; }
		.headactions a{ color: #FFF; }

/* 有无新贴说明栏 */
.legend { border: 1px solid #CAD9EA; background: #FFF; padding: 10px; margin: 10px auto; width: 400px; text-align: center; line-height: 25px; }
	.legend label { padding: 0 5px; }
	.legend img { vertical-align: middle; margin-right: 5px; }

	
/* 标题栏样式 */
.mainbox { background: #FFF; border: 1px solid #CAD9EA; padding: 0px; margin-bottom: 10px; } /* 定义 边框 内边距 底外边距 */
	.mainbox h3{ line-height: 31px; padding-left: 1em; background: #409bdd url("../images/header_head.gif"); background-repeat: repeat-x; background-position: 0 0; color: #FFF; }
	.mainbox table { width: 100%; }
	.mainbox tbody th, .mainbox tbody td { border-top: 1px solid #CAD9EA; padding: 5px; }
	.mainbox tbody cite, .mainbox tbody em { line-height: 1.3em; }

/*论坛规则样式*/
.portalbox { width: 100%; background: #CAD9EA; margin-bottom: 10px; border-collapse: separate; }
	.portalbox td { padding: 10px; vertical-align: top; background: #FFF; background-repeat: repeat-x; background-position: 0 0; background-repeat: repeat-x; border: 1px solid #FFF; }
		.portalbox h3 { margin: 0 0 0px; font-size: 1em; white-space: nowrap; }
		.portalbox strong { font-weight: bold; margin-top: 4px;}
		.portalbox em { color: #999; }
			.portalbox em a { color: #999; }
			.portalbox cite a { color: #069; }
		#hottags a { white-space: nowrap; margin-right: 0.5em; }
		#hottags h3 { clear:both; }

/* 大版主样式*/	
.headactions { float: right; line-height: 1em; padding: 10px 10px 0 0; }
	.mainbox .headactions { color: #FFF; }
		.mainbox .headactions a, .mainbox .headactions span, .mainbox .headactions strong { padding-right: 2px;  color: #FFF; }

	
/* 论坛样式*/	
.forumlist table { width: 100%;border-collapse: separate;  } /* 定义 表格宽度 定义表格的边框是否被合并为一个单一的边框*/

.forumlist thead th, .forumlist thead td { background: url("../images/portalbox_bg.gif");padding: 2px 5px;line-height: 22px;color: #666;}

.forumlist tbody th, .forumlist tbody td { height: 60px; border-top: 1px solid #CAD9EA;;color: #666; padding: 5px 5px;  background-color: #F5FAFE; }

.forumlist th { text-align: left; padding-left: 70px !important;}

.forumlist tbody .new{ background-image: url(../images/icon/topic_permit.gif); background-repeat: no-repeat; background-position: 20px 40%; }

.forumlist tbody .normal{ background-image: url(../images/icon/topic_unpermit.gif); background-repeat: no-repeat; background-position: 20px 40%; }

.forumlist tbody th .name{ font-size: 120%; font-weight: bold;}
.forumlist tbody th .subforumname{ font-weight: bold;}

.forumlist .title {width:60%}
.forumlist .master {width:11%;text-align:left;}
.forumlist .num {width:12%;text-align: center;font-size: 90%;}
.forumlist .last {width:17%;text-align:left; padding-left:20px;}

.todaynum { color: #069;font-size: 100%; }
.moderators { color: #666; }
.moderators a { color: #069; }
.moderators .time { font-size: 90%; color: #666;}
		
	
.forumlist table, .threadlist table { border-collapse: separate; }
		
.forumlist tbody strong, .threadlist tbody strong , .formbox tbody strong  { color: #090; }
	
.threadlist tbody th, .threadlist tbody td { color: #666; padding: 1px 5px; background-color: #F5FAFE;  }
		
.threadlist th { text-align: left; font: 14px Tahoma,Helvetica,Arial,sans-serif; }
		
.threadlist tbody tr { height:30px; }
		
.threadlist .ann tr { height:25px; }
				
.threadlist th label { float: right; vertical-align: absmiddle;}
				
.threadpages { background: url(../images/multipage.gif) no-repeat 0 100%; font-size: 11px; margin-left: 5px; white-space: nowrap; }
	.threadpages a { padding-left: 8px; }
		.threadpages a:hover { text-decoration: underline; }
	
.threadlist td.folder { text-align: center; width: 30px; }
	
.threadlist td.icon { text-align: center; padding: 3px 0; width: 30px; }

.threadlist th.title { width: 55%;font: 12px Tahoma,Helvetica,Arial,sans-serif;}

.threadlist th.status {  text-align: right;width:9%;  }
		
.threadlist td.nums { text-align: center; width: 10%; font: 12px Tahoma,Helvetica,Arial,sans-serif;  }
		
.threadlist td.author { width: 8%;  text-align: center; font: 12px Tahoma,Helvetica,Arial,sans-serif;  }
		
.threadlist td.lastpost { text-align: left; width: 18%; padding-left: 20px;  font: 12px Tahoma,Helvetica,Arial,sans-serif; }
		
.threadlist td.lastpost a , .threadlist td.author a { color: #069; font: 12px Tahoma,Helvetica,Arial,sans-serif;}
		
.threadlist td.author em, .threadlist td.lastpost em { font: 11px Tahoma,Helvetica,Arial,sans-serif;  }
		
		
/* 高亮颜色样式 */	
label.highlight { width: 40px; margin-right: 30px; }
label.highlight, label.highlight input { float: left; }
label.highlight em { float: right; width: 16px; height:16px;  }

		
/* 控制面板 */	
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Control Panel ~~~~ */
.container { width: 100%; overflow: hidden; }
	.content { float: right; width: 80%; }
		.content .mainbox { padding-bottom: 5px; }
		.content .footoperation{ border-top: none; border-bottom: 1px solid #CAD9EA; }
	.side { float: left; width: 18%;}
		.side div { border: 1px solid #CAD9EA;background: #FFF url("../images/portalbox_bg.gif"); background-repeat: repeat-x; background-position: 0 0; margin-bottom: 10px; }
			.side h2 { padding-left: 10px; line-height: 2.4em; font-size: 1.17em; border: 1px solid; border-color: #FFF #FFF #E8E8E8 #FFF;}
			.side ul { padding: 1px; }
				.side li{ text-indent: 26px; line-height: 2.4em; }
					.side li ul { border-bottom: 1px solid #E8E8E8; }
						.side li li { padding-left: 1em;}
				.side li.current { font-weight: bold; }
					.side li.current a { color: #666; }


/* 公告页面 */
.announcements { border-bottom: 2px solid #E8F3FD;}
	.announcementinfo  { cursor: pointer; color: #999; text-align: right; padding-right: 16px; height: 30px; line-height: 30px; background: #F5FAFE; border-bottom: 1px solid #CAD9EA; }
		.announcementinfo span { float: left; font-weight: 700; height: 30px; line-height: 30px; margin-left: 16px; color: #000; }
		.announcementmessage { padding: 10px; border-bottom: 1px solid #CAD9EA; }

/* 登录页面 */
.formbox th { width: 180px; text-align: left; }
	.formbox th, .formbox td { padding: 5px; }
	.formbox th, .formbox td { border-bottom: 1px solid #CAD9EA; }
	.formbox table a { color: #069; }
	.formbox label { cursor: pointer; }
	.formbox h1 { line-height: 31px; padding-left: 1em; background: url("../images/header_head.gif"); background-repeat: repeat-x; background-position: 0 0; color: #FFF; }
	.formbox th ul { padding: 5px 0; }

/* 提示页面 */
.message { margin: 3em 10em 5em !important; }
	.message h1 { line-height: 26px; border: 1px solid; background: #FFF url("../images/portalbox_bg.gif"); background-repeat: repeat-x; background-position: 0 0; border-color: #FFF #FFF #CAD9EA #FFF; padding-left: 1em; margin-bottom: 1em; }
	.message p { margin: 1.5em 1em; }


fieldset { border: none; }
input, textarea { border-width: 1px; background: #FFF; border-color: #DDD; padding: 2px; }
	input[type="radio"], input[type="checkbox"] { border: none; background: none; }
	.radio, .checkbox{ border: none; background: none; }
	.invitecodelist input { border: none; font-family: "Courier New", Courier, monospace; font-size: 13px; cursor: pointer; }
button { border: 1px solid; border-color: #E8E8E8 #999 #999 #E8E8E8; background: #E8F3FD; height: 2em; line-height: 2em; cursor: pointer; }
#postsubmit, button.submit { margin-right: 1em; border: 1px solid; border-color: #FFFDEE #FDB939 #FDB939 #FFFDEE; background: #FFF8C5; color: #090; padding: 0 10px; }
button.insmsg { margin: 1em 0; border: 1px solid #EDEDCE; background: #FFFFF2; color: #090; }

/*管理菜单*/
.headactions .popupmenu_popup a, .headactions .popupmenu_popup strong { color: #666; background: none; white-space: nowrap; }
	.headactions .popupmenu_popup { overflow: visible; }

.mainbox thead th,.mainbox thead td {
	background: url("../images/portalbox_bg.gif");
	padding: 2px 5px;
	line-height: 22px;
	color: #666;
}

.mainbox thead.separation th,.mainbox thead.separation td {
	border-top: 1px solid #CAD9EA
}

/*发表菜单*/
.newspecialmenu { width: 95px; }
	.newspecialmenu li { background: url(../images/icon/folder_s.gif) no-repeat 3px 50%; float: left; }
	.newspecialmenu li.poll { background-image: url(../images/icon/pollsmall.gif); }
	.newspecialmenu li.activity { background-image: url(../images/icon/activitysmall.gif); }
	.newspecialmenu li.debate { background-image: url(../images/icon/debatesmall.gif); }
	.newspecialmenu a { display: block; width: 75px; border-bottom: 1px solid #E8E8E8; padding: 5px 0 5px 25px; }
		.newspecialmenu a:hover { text-decoration: none; color: #069; border-bottom-color: #CAD9EA; }

/*选项条*/
.optionbar { float: left; margin-right: 0.5em; border: 1px solid #CAD9EA; background: #2F589C ; background-repeat: repeat-x; background-position: 0 100%; height: 12px; }
			.optionbar div { float: left;  height: 10px; overflow: hidden; }

/*跳转菜单*/
#forumlist_menu, #forumjump_menu, #visited_forums_menu { padding: 10px 30px 10px 20px; }
	#forumlist_menu dl, #forumjump_menu dl { padding: 5px 0; }
		#forumlist_menu dt a, #forumjump_menu dt a { font-weight: bold; color: #666; }
		#forumlist_menu dd, #forumjump_menu dd { padding-left: 1em; }
			#forumlist_menu li.sub, #forumjump_menu li.sub { padding-left: 1em; }
			#forumlist_menu li.current a, #forumjump_menu li.current a, #visited_forums_menu li.current a { font-weight: bold; }
			#forumlist_menu li a, #forumjump_menu li a, #visited_forums_menu li a { font-weight: normal; color: #069; }


/* 分页栏样式 */

.pages,.pageback {
	float: left;
	padding: 2px 0;
}


.pages a,.pages strong,.pageback a {
	float: left;
	padding: 0 6px;
	margin-right: 2px;
	height: 20px;
	border: 1px solid;
	line-height: 20px;
	overflow: hidden;
}

.pages a,.pageback a {
	border-color: #E6E7E1;
	background-color: #FFF;
	color: #09C;
}

.pages a:hover,.pageback a:hover {
	text-decoration: none;
}

.pages strong {
	border-color: #09C;
	background-color: #09C;
	color: #FFF;
	font-weight: 700;
}


.pages a:hover,.pageback a,.pages a.next {
	border-color: #09C;
}


.forumcontrol table {
	width: 100%;
}

.forumcontrol td {
	padding-bottom: 5px;
}

.forumcontrol .narrow td {
	padding: 0 15px 5px;
}