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; }