5811前端基础规范-【CUI手册】
目录
cui.css
包含初始化样式和常用类库
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
q:before,q:after {
content:'';
}
abbr,acronym {
border:0;
}
.clear {
clear:both;
display:block;
overflow:hidden;
visibility:hidden;
width:0;
height:0;
}
.l,.col-l,.col_l,.col-c,.col_c {
float:left;
}
.r,.col-r,.col_r,dt span,.ul-txt li span,.ul_txt li span {
float:right;
}
.c {
clear:both;
}
.n,em {
font-weight:normal;
font-style:normal;
}
.b {
font-weight:bold;
}
.i {
font-style:italic;
}
.fa {
font-family:Arial;
}
.fg {
font-family:Georgia;
}
.ft {
font-family:Tahoma;
}
.fl {
font-family:Lucida Console;
}
.fs {
font-family:'宋体';
}
.fw {
font-family:'微软雅黑';
}
.tc {
text-align:center;
}
.tr {
text-align:right;
}
.tl {
text-align:left;
}
.tdu {
text-decoration:underline;
}
.tdn,.tdn:hover,a.tdl:hover {
text-decoration:none;
}
.fc0 {
color:#000000;
}
.fc3 {
color:#333333;
}
.fc6 {
color:#666666;
}
.fc9 {
color:#999999;
}
.fcr {
color:red;
}
.fcw {
color:white;
}
.fcb {
color:blue;
}
.fcg {
color:green;
}
.f0 {
font-size:0;
}
.f10 {
font-size:10px;
}
.f12 {
font-size:12px;
}
.f13 {
font-size:13px;
}
.f14 {
font-size:14px;
}
.f16 {
font-size:16px;
}
.f20 {
font-size:20px;
}
.f24 {
font-size:24px;
}
.vm {
vertical-align:middle;
}
.vtb {
vertical-align:text-bottom;
}
.vt {
vertical-align:top;
}
.vn {
vertical-align:-2px;
}
.vimg {
margin-bottom:-3px;
}
.m0 {
margin:0;
}
.ml0 {
margin-left:0;
}
.ml5 {
margin-left:5px;
}
.ml10 {
margin-left:10px;
}
.ml20 {
margin-left:20px;
}
.mr0 {
margin-right:0;
}
.mr5 {
margin-right:5px;
}
.mr10 {
margin-right:10px;
}
.mr20 {
margin-right:20px;
}
.mt5 {
margin-top:5px;
}
.mt10 {
margin-top:10px;
}
.mt20 {
margin-top:20px;
}
.mb5 {
margin-bottom:5px;
}
.mb10 {
margin-bottom:10px;
}
.mb20 {
margin-bottom:20px;
}
.ml-1 {
margin-left:-1px;
}
.mt-1 {
margin-top:-1px;
}
.p1 {
padding:1px;
}
.pl5 {
padding-left:5px;
}
.p5 {
padding:5px;
}
.pt5 {
padding-top:5px;
}
.pr5 {
padding-right:5px;
}
.pb5 {
padding-bottom:5px;
}
.p10 {
padding:10px;
}
.pl10 {
padding-left:10px;
}
.pt10 {
padding-top:10px;
}
.pr10 {
padding-right:10px;
}
.pb10 {
padding-bottom:10px;
}
.p20 {
padding:20px;
}
.pl20 {
padding-left:20px;
}
.pt20 {
padding-top:20px;
}
.pr20 {
padding-right:20px;
}
.pb20 {
padding-bottom:20px;
}
.rel,.pr {
position:relative;
}
.abs,.pa {
position:absolute;
}
.dn {
display:none;
}
.db {
display:block;
}
.dib {
-moz-inline-stack:inline-block;
display:inline-block;
}
.di {
display:inline;
}
.ovh {
overflow:hidden;
}
.ovs {
overflow:scroll;
}
.vh {
visibility:hidden;
}
.vv {
visibility:visible;
}
.lh14 {
line-height:14px;
}
.lh16 {
line-height:16px;
}
.lh18 {
line-height:18px;
}
.lh20 {
line-height:20px;
}
.lh22 {
line-height:22px;
}
.lh24 {
line-height:24px;
}
.fix {
*zoom:1;
}
.fix:after,.fix:before {
display:block;
content:"clear";
height:0;
clear:both;
overflow:hidden;
visibility:hidden;
}
.z {
_zoom:1;
}
.h1 {
height:1px;
}
.h5 {
height:5px;
}
.h10,.h {
height:10px;
}
.h15 {
height:15px;
}
.h20 {
height:20px;
}
.h1,.h5,.h10,.h15,.h20,.h {
font-size:0px;
line-height:0;
overflow:hidden;
clear:both;
}
body {
font:12px/1.5 宋体,Arial,sans-serif;
}
a {
text-decoration:none;
}
a:hover {
color:#FF6600 }
cui.js
包含常用的js功能
$(function(){
//动画效果弹出菜单
$(".MENUS li").hover(function(){
$(this).addClass("ok").find("dl").stop(true,true).slideUp(0).slideDown(300);
},function(){
$(".ok").find("dl").stop(true,true).slideUp(200);
$(this).removeClass("ok");
});
//无动画弹出菜单
$(".MENU li,.MENU_MY").hover(function(){
$(this).addClass("ok");
},function(){
$(this).removeClass("ok");
});
//当前显示导航
$('.HOTTOP li').mouseover(function(){
$(this).parent('ul').find('.ok').removeClass('ok');
$(this).addClass('ok');
if(!$(this).next('li').text()){
$(this).addClass('end');
}
});
// 折叠菜单
$('.SLIDE h3').click(function(){
var $nn=$(this).hasClass('ok');
if($nn){
$(this).removeClass('ok');
$(this).next('ul').addClass('dn');
}
else
{
$(this).addClass('ok');
$(this).next('ul').removeClass('dn');
}
});
$(".SLIDE h3").hover(function(){
$(this).addClass("ok_bg");
},function(){
$(this).removeClass("ok_bg");
});
// 动画折叠菜单
$('.SLIDES h3').mouseover(function(){
qq=$(this).hasClass('ok');
if(!qq) $('.SLIDES .ok').removeClass('ok').next('ul').stop(true,true).hide(600,"linear");
if(!qq) $(this).addClass('ok').next('ul').show(600,"linear");
});
//折叠菜单
$('.SLIDES2 li').mouseover(function(){
if(!$(this).hasClass('hover')){
$(this).parent('ul').find('.hover').removeClass('hover').find('.s2').slideUp(300);
$(this).addClass('hover').find('.s2').stop(true).slideDown(300);
}
});
// 选项卡 鼠标经过切换
$(".TAB li").mousemove(function(){
var tab=$(this).parent(".TAB");
var con=tab.attr("id");
var on=tab.find("li").index(this);
$(this).addClass('on').siblings(tab.find("li")).removeClass('on');
$(con).eq(on).show().siblings(con).hide();
});
// 选项卡 鼠标点击
$(".TAB_CLICK li").click(function(){
var tab=$(this).parent(".TAB_CLICK");
var con=tab.attr("id");
var on=tab.find("li").index(this);
$(this).addClass('on').siblings(tab.find("li")).removeClass('on');
$(con).eq(on).show().siblings(con).hide();
});
// 滚动到指定位置
$('.GOTO a').click(function(){
hh=$(this).attr('rel')*1;
id=$(this).attr('href');
num=$(id).offset().top;
if(hh) num=num+hh;
$("html,body").animate({scrollTop: num}, 1000);
return false;
});
// 鼠标经过添加删除class
$('.hover-class').hover(function(){
c=$(this).attr('rel');
$(this).toggleClass(c);
});
//鼠标点击添加删除class
$('.click-class').click(function(){
c=$(this).attr('rel');
$(this).toggleClass(c);
return false;
});
});
为代码疯狂！
