黄埔海关UI框架CSS说明
控件说明
20130514
logincss 关键样式class说明
class
备注
container
容区宽高
logo
Logo定位样式
login_box
登录面板样式
copyright
版权信息样式
wariningcss 关键样式class说明
class
备注
tsbox
消息框体样式
tstitle
消息标题样式
button
页面钮样式
commoncss 关键样式class说明
class
备注
header
消息框体样式
logo
消息标题样式
header_top
页面钮样式
help
帮助钮样式
topright
户信息等头部右区域样式
footer
脚部样式（版权等）
#container
题容区样式JS读取高度设定
#sidebar
侧栏导航菜单样式
breadcrumb
面包屑导航样式
inquiry
查询区样式
tables
定义表格宽度98非设置左右居中
table_title
表头样式
cutpage
分页样式
btn
钮样式
btn4
4字钮样式
btn5
5字钮样式
btn2
2字钮样式
btn8
8字钮样式
ts
操作提示样式
input_text
文框样式
textarea
文域样式
file00
文件域样式（附件传等）
column
工作首页布局样式
t_l
工作首页部件样式
alist_a
新闻类消息列表样式
tabbtn
#tab3 tabbtn
特殊选项定义样式 般通选项卡ID重定义
#tab4
tab4带选项卡切换编辑
date
日期控件样式
warning
警告提示样式
error
错误提示样式
success
成功确认提示样式
#setmenu
拉钮样式
loadbox
加载等图片样式
#popup
弹出层样式
tis
温馨提示区样式计算公式户需注意信息操作技巧
top_bar
统计印弹出页头部工具条
PaperA4
统计印弹出页样式
模板部分
文件：Resetcss
htmlbodydivulollidldtddpspanemimgh1h2h3h4h5lableformtablecaption{ margin0 padding0
outlinenone border0} olul{ liststylenone} table{ bordercollapseseparate borderspacing0} captionthtd{ textalignleft} body{ fontsize12px lineheight1 background#fff} articleasidedetailsfigcaptionfigurefooterheaderhgroupnavsection { displayblock}
**
html{ *overflowyauto} body{ color#555 height100} table{ bordercollapsecollapse} p{ lineheight18em} a{ textdecoration none color#333 outlinenone} ahover { cursorpointer textdecorationunderline color#4881c9 } txtimpt{ color#ff0000}
*初始化*
作：Resetcss代码效果清浏览器默认值设定基值字体12px基需变动解决浏览器兼容问题项目文件需引入
文件：logincss
body{ backgroundurl(imagesloginbodybgjpg) norepeat right top #248ad0 height100}
logo{ width400px height70px positionabsolute top20px left20px}
container{ positionabsolute width100 height100 }
*设置页面居中*
main{ width930px height420px positionabsolute left50 marginleft465px top50 margintop220px backgroundurl(imagesImagepng) norepeat left center }
*登录表单*
login_box{ width405px height327px floatright margintop65px backgroundurl(imagesloginboxpng) norepeat}
login_box h3{ height55px lineheight55px paddingleft24px fontfamily微软雅黑 fontweight100 fontsize18px textindent10000px}
login_box ul{ width360px marginleft26px margintop23px overflowhidden height145px}
login_box ul li{ height30px width250px floatleft width250px overflowhidden marginbottom23px paddingleft65px}
login_box inp00{ width246px border0px solid #fff backgroundnone fontsize16px fontfamily微软雅黑 color#999 height30px lineheight30px}
login_box title{ textindent10000px}
login_box btn{ height40px}
login_box aforget{ floatleft width60px padding12px 0 0 24px outlinenone }
alogin_btn{ floatright width162px height50px marginright40px backgroundurl(imageslogin_btnpng) norepeat textindent10000px}
alogin_btnhover{ backgroundurl(imageslogin_btnpng) norepeat left 50px}
*版权信息*
copyright{color#96dcf6 positionabsolute right0 bottom0 width405px textaligncenter height30px lineheight30px}
copyright span{ padding3px 35px lineheight22px}
#ts{ paddingleft120pxheight32pxoverflowhidden backgroundurl(imagescross_circlepng) norepeat 100px 4px margintop3px color#C00 _backgroundnone}
作：登陆页样式包括登陆页logo登录面板登录图错误提醒版权信息
文件：commoncss
*header头部外层 *
header{ height141px width100 minwidth980px background url(＇imagesrepeatxbgpng＇) repeatx left 0 #0a89ce}
logo
*logo页面左角 *
logo{ floatleft width354px}
作：设定logo浮动左边设定宽度
效果：
导航
*横导航 *
header nav{ floatleft color#fff }
header nav ul{ height30px lineheight30px floatleft }
header nav ul li{ floatleft marginright4px}
header nav ul li a{paddingright2px textaligncenter backgroundurl(＇imagesnavlibgpng＇) right 0 fontsize14px fontweightbold displayblock color#fff}
header nav ul li ahover{ textdecorationnone color#fff backgroundurl(＇imagesnavlibgpng＇) right 30px}
header nav ul li a span{ padding0 12px 0 14px displayblock backgroundurl(＇imagesnavlibgpng＇) }
header nav ul li ahover span{ backgroundurl(＇imagesnavlibgpng＇) left 30px }
header nav ul licurr a{ color#000 backgroundurl(＇imagesnavlibgpng＇) right 60px}
header nav ul licurr a span{ color#000 backgroundurl(＇imagesnavlibgpng＇) left 60px}
navbtn{ floatleft height30px margintop30px}
navcontent{ color#000 positionabsolute left340px top66px zindex2 _width100}
navcontent div a{ padding0 12px}
navcontent div ahover{ fontweightbold textdecorationnone}
*帮助栏背景横导航二级背景*
help{ height25px positionabsolute top80px zindex0 lineheight25px textalignright width100 backgroundurl(imageshelpbgpng) repeatx} help a{ backgroundurl(imageshelpicopng) norepeat 0px 2px padding3px 20px}
作：设定导航
效果：
容区高度
* JS控制高度 头部脚部中间部分容器*
#container{ positionabsolute width100 }
#container2{ positionabsolute width100 overflowauto}
左侧栏框
*左菜单外层容器 *
#sidebar{ width200px positionabsolute zindex1 overflowauto left0 height100 background#f0f9fb}
*左菜单基础样式设置 *
#sidebar >ul{ margintop0px} #sidebar ul li a{ color#333 textdecorationnone displayblock height28px lineheight28px paddingleft30px}
*左菜单 级菜单样式 *
#sidebar ul afirst{ color#fff fontsize12px fontweightbold height38px lineheight38px paddingleft44px displayblock outlinenone} #sidebar ul afirstone{backgroundurl(imagesfirstonepng) norepeat 0 0} #sidebar ul afirsttwo{backgroundurl(imagesfirsttwopng) norepeat 0 0} #sidebar ul afirstthree{backgroundurl(imagesfirstthreepng) norepeat 0 0} #sidebar ul afirstfour{backgroundurl(imagesfirstfourpng) norepeat 0 0} #sidebar ul afirstfive{backgroundurl(imagesfirstfivepng) norepeat 0 0} #sidebar ul afirstsix{backgroundurl(imagesfirstsixpng) norepeat 0 0}
*左菜单 二级菜单样式 *
#sidebar asecond{ backgroundurl(imagesleftm4png) norepeat 15px 9px color#323335} #sidebar asecondhover{ backgroundurl(imagesleftm42png) norepeat 15px 9px}
*左菜单 三级菜单样式 *
third li{ paddingleft35px} #sidebar third li a{ padding2px 8px displayinline} #sidebar third li ahovers_curr{ background#d9f1f5 ouline1px solid #fafafa}
作： 设定左侧栏导航宽度200px高度100高度继承#container者#container2
二级菜单式样
*左菜单 二级菜单样式 *
#sidebar asecond{ backgroundurl(imagesleftm4png) norepeat 15px 9px color#323335} #sidebar asecondhover{ backgroundurl(imagesleftm42png) norepeat 15px 9px}
作：控制二级导航菜单
效果：
级菜单式样
*左菜单 级菜单样式 *
#sidebar ul afirst{ color#fff fontsize12px fontweightbold height38px lineheight38px paddingleft44px displayblock outlinenone} #sidebar ul afirstone{backgroundurl(imagesfirstonepng) norepeat 0 0} #sidebar ul afirsttwo{backgroundurl(imagesfirsttwopng) norepeat 0 0} #sidebar ul afirstthree{backgroundurl(imagesfirstthreepng) norepeat 0 0} #sidebar ul afirstfour{backgroundurl(imagesfirstfourpng) norepeat 0 0} #sidebar ul afirstfive{backgroundurl(imagesfirstfivepng) norepeat 0 0} #sidebar ul afirstsix{backgroundurl(imagesfirstsixpng) norepeat 0 0}
作：控制左侧栏导航级菜单
效果：
前菜单式样
#sidebar third li ahovers_curr{ background#d9f1f5 ouline1px solid #fafafa}
作：s_curr控制前选中菜单式样
效果：
面包屑导航
*面包屑导航 超链接 返回前进钮样式*
breadcrumb{ width98 margin0 auto height28px backgroundurl(imagesbg1png) repeatx margintop10px}
b_left{ backgroundurl(imagesimg1png) norepeat paddingleft30px fontfamily宋体 color#848484}
b_right{ backgroundurl(imagesimg2png) norepeat right 0 textalignright paddingright2px}
b_right aback{width56px height22px lineheight22px paddingleft8px displayblock floatleft textaligncenter backgroundurl(imagesbackpng) norepeat}
b_right abackhover{ textdecorationnonebackgroundurl(imagesbackhpng) norepeat}
b_right aonward{ width56px height22px lineheight22px paddingleft8px displayblock floatleft textalignleft backgroundurl(imagesonwardpng) norepeat}
b_right aonwardhover{ textdecorationnone backgroundurl(imagesonwardhpng) norepeat}
backbtn{ width130px floatright}
作：适应宽度面包屑导航html部分注意空格输出
效果：
右侧题容
#middle{ width100 height100 positionabsolute}
宽度适应浏览器左边距空出左侧栏高度100继承#mid
mainhtml页里段js控制中间部分高度
黄埔海关UI框架CSS说明
控件说明
20130514
logincss 关键样式class说明
class
备注
container
容区宽高
logo
Logo定位样式
login_box
登录面板样式
copyright
版权信息样式
wariningcss 关键样式class说明
class
备注
tsbox
消息框体样式
tstitle
消息标题样式
button
页面钮样式
commoncss 关键样式class说明
class
备注
header
消息框体样式
logo
消息标题样式
header_top
页面钮样式
help
帮助钮样式
topright
户信息等头部右区域样式
footer
脚部样式（版权等）
#container
题容区样式JS读取高度设定
#sidebar
侧栏导航菜单样式
breadcrumb
面包屑导航样式
inquiry
查询区样式
tables
定义表格宽度98非设置左右居中
table_title
表头样式
cutpage
分页样式
btn
钮样式
btn4
4字钮样式
btn5
5字钮样式
btn2
2字钮样式
btn8
8字钮样式
ts
操作提示样式
input_text
文框样式
textarea
文域样式
file00
文件域样式（附件传等）
column
工作首页布局样式
t_l
工作首页部件样式
alist_a
新闻类消息列表样式
tabbtn
#tab3 tabbtn
特殊选项定义样式 般通选项卡ID重定义
#tab4
tab4带选项卡切换编辑
date
日期控件样式
warning
警告提示样式
error
错误提示样式
success
成功确认提示样式
#setmenu
拉钮样式
loadbox
加载等图片样式
#popup
弹出层样式
tis
温馨提示区样式计算公式户需注意信息操作技巧
top_bar
统计印弹出页头部工具条
PaperA4
统计印弹出页样式
模板部分
文件：Resetcss
htmlbodydivulollidldtddpspanemimgh1h2h3h4h5lableformtablecaption{ margin0 padding0
outlinenone border0} olul{ liststylenone} table{ bordercollapseseparate borderspacing0} captionthtd{ textalignleft} body{ fontsize12px lineheight1 background#fff} articleasidedetailsfigcaptionfigurefooterheaderhgroupnavsection { displayblock}
**
html{ *overflowyauto} body{ color#555 height100} table{ bordercollapsecollapse} p{ lineheight18em} a{ textdecoration none color#333 outlinenone} ahover { cursorpointer textdecorationunderline color#4881c9 } txtimpt{ color#ff0000}
*初始化*
作：Resetcss代码效果清浏览器默认值设定基值字体12px基需变动解决浏览器兼容问题项目文件需引入
文件：logincss
body{ backgroundurl(imagesloginbodybgjpg) norepeat right top #248ad0 height100}
logo{ width400px height70px positionabsolute top20px left20px}
container{ positionabsolute width100 height100 }
*设置页面居中*
main{ width930px height420px positionabsolute left50 marginleft465px top50 margintop220px backgroundurl(imagesImagepng) norepeat left center }
*登录表单*
login_box{ width405px height327px floatright margintop65px backgroundurl(imagesloginboxpng) norepeat}
login_box h3{ height55px lineheight55px paddingleft24px fontfamily微软雅黑 fontweight100 fontsize18px textindent10000px}
login_box ul{ width360px marginleft26px margintop23px overflowhidden height145px}
login_box ul li{ height30px width250px floatleft width250px overflowhidden marginbottom23px paddingleft65px}
login_box inp00{ width246px border0px solid #fff backgroundnone fontsize16px fontfamily微软雅黑 color#999 height30px lineheight30px}
login_box title{ textindent10000px}
login_box btn{ height40px}
login_box aforget{ floatleft width60px padding12px 0 0 24px outlinenone }
alogin_btn{ floatright width162px height50px marginright40px backgroundurl(imageslogin_btnpng) norepeat textindent10000px}
alogin_btnhover{ backgroundurl(imageslogin_btnpng) norepeat left 50px}
*版权信息*
copyright{color#96dcf6 positionabsolute right0 bottom0 width405px textaligncenter height30px lineheight30px}
copyright span{ padding3px 35px lineheight22px}
#ts{ paddingleft120pxheight32pxoverflowhidden backgroundurl(imagescross_circlepng) norepeat 100px 4px margintop3px color#C00 _backgroundnone}
作：登陆页样式包括登陆页logo登录面板登录图错误提醒版权信息
文件：commoncss
*header头部外层 *
header{ height141px width100 minwidth980px background url(＇imagesrepeatxbgpng＇) repeatx left 0 #0a89ce}
logo
*logo页面左角 *
logo{ floatleft width354px}
作：设定logo浮动左边设定宽度
效果：
导航
*横导航 *
header nav{ floatleft color#fff }
header nav ul{ height30px lineheight30px floatleft }
header nav ul li{ floatleft marginright4px}
header nav ul li a{paddingright2px textaligncenter backgroundurl(＇imagesnavlibgpng＇) right 0 fontsize14px fontweightbold displayblock color#fff}
header nav ul li ahover{ textdecorationnone color#fff backgroundurl(＇imagesnavlibgpng＇) right 30px}
header nav ul li a span{ padding0 12px 0 14px displayblock backgroundurl(＇imagesnavlibgpng＇) }
header nav ul li ahover span{ backgroundurl(＇imagesnavlibgpng＇) left 30px }
header nav ul licurr a{ color#000 backgroundurl(＇imagesnavlibgpng＇) right 60px}
header nav ul licurr a span{ color#000 backgroundurl(＇imagesnavlibgpng＇) left 60px}
navbtn{ floatleft height30px margintop30px}
navcontent{ color#000 positionabsolute left340px top66px zindex2 _width100}
navcontent div a{ padding0 12px}
navcontent div ahover{ fontweightbold textdecorationnone}
*帮助栏背景横导航二级背景*
help{ height25px positionabsolute top80px zindex0 lineheight25px textalignright width100 backgroundurl(imageshelpbgpng) repeatx} help a{ backgroundurl(imageshelpicopng) norepeat 0px 2px padding3px 20px}
作：设定导航
效果：
容区高度
* JS控制高度 头部脚部中间部分容器*
#container{ positionabsolute width100 }
#container2{ positionabsolute width100 overflowauto}
左侧栏框
*左菜单外层容器 *
#sidebar{ width200px positionabsolute zindex1 overflowauto left0 height100 background#f0f9fb}
*左菜单基础样式设置 *
#sidebar >ul{ margintop0px} #sidebar ul li a{ color#333 textdecorationnone displayblock height28px lineheight28px paddingleft30px}
*左菜单 级菜单样式 *
#sidebar ul afirst{ color#fff fontsize12px fontweightbold height38px lineheight38px paddingleft44px displayblock outlinenone} #sidebar ul afirstone{backgroundurl(imagesfirstonepng) norepeat 0 0} #sidebar ul afirsttwo{backgroundurl(imagesfirsttwopng) norepeat 0 0} #sidebar ul afirstthree{backgroundurl(imagesfirstthreepng) norepeat 0 0} #sidebar ul afirstfour{backgroundurl(imagesfirstfourpng) norepeat 0 0} #sidebar ul afirstfive{backgroundurl(imagesfirstfivepng) norepeat 0 0} #sidebar ul afirstsix{backgroundurl(imagesfirstsixpng) norepeat 0 0}
*左菜单 二级菜单样式 *
#sidebar asecond{ backgroundurl(imagesleftm4png) norepeat 15px 9px color#323335} #sidebar asecondhover{ backgroundurl(imagesleftm42png) norepeat 15px 9px}
*左菜单 三级菜单样式 *
third li{ paddingleft35px} #sidebar third li a{ padding2px 8px displayinline} #sidebar third li ahovers_curr{ background#d9f1f5 ouline1px solid #fafafa}
作： 设定左侧栏导航宽度200px高度100高度继承#container者#container2
二级菜单式样
*左菜单 二级菜单样式 *
#sidebar asecond{ backgroundurl(imagesleftm4png) norepeat 15px 9px color#323335} #sidebar asecondhover{ backgroundurl(imagesleftm42png) norepeat 15px 9px}
作：控制二级导航菜单
效果：
级菜单式样
*左菜单 级菜单样式 *
#sidebar ul afirst{ color#fff fontsize12px fontweightbold height38px lineheight38px paddingleft44px displayblock outlinenone} #sidebar ul afirstone{backgroundurl(imagesfirstonepng) norepeat 0 0} #sidebar ul afirsttwo{backgroundurl(imagesfirsttwopng) norepeat 0 0} #sidebar ul afirstthree{backgroundurl(imagesfirstthreepng) norepeat 0 0} #sidebar ul afirstfour{backgroundurl(imagesfirstfourpng) norepeat 0 0} #sidebar ul afirstfive{backgroundurl(imagesfirstfivepng) norepeat 0 0} #sidebar ul afirstsix{backgroundurl(imagesfirstsixpng) norepeat 0 0}
作：控制左侧栏导航级菜单
效果：
前菜单式样
#sidebar third li ahovers_curr{ background#d9f1f5 ouline1px solid #fafafa}
作：s_curr控制前选中菜单式样
效果：
面包屑导航
*面包屑导航 超链接 返回前进钮样式*
breadcrumb{ width98 margin0 auto height28px backgroundurl(imagesbg1png) repeatx margintop10px}
b_left{ backgroundurl(imagesimg1png) norepeat paddingleft30px fontfamily宋体 color#848484}
b_right{ backgroundurl(imagesimg2png) norepeat right 0 textalignright paddingright2px}
b_right aback{width56px height22px lineheight22px paddingleft8px displayblock floatleft textaligncenter backgroundurl(imagesbackpng) norepeat}
b_right abackhover{ textdecorationnonebackgroundurl(imagesbackhpng) norepeat}
b_right aonward{ width56px height22px lineheight22px paddingleft8px displayblock floatleft textalignleft backgroundurl(imagesonwardpng) norepeat}
b_right aonwardhover{ textdecorationnone backgroundurl(imagesonwardhpng) norepeat}
backbtn{ width130px floatright}
作：适应宽度面包屑导航html部分注意空格输出
效果：
右侧题容
#middle{ width100 height100 positionabsolute}
宽度适应浏览器左边距空出左侧栏高度100继承#mid
mainhtml页里段js控制中间部分高度