AJax技术

简单的Ajax标签导航效果,兼容性很好[来看看]

字号+ 作者:H5之家 来源:H5之家 2015-10-22 18:03 我要评论( )

网页特效演示页:简单的Ajax标签导航效果,兼容性很好[来看看] - 网页特效代码演示

复制内容到剪贴板 代码:body{ margin: 0;padding: 0;background: #FFF;color: #000;font: normal 12px 宋体,arial,sans-serif;text-align: left;}
div,form,ul,ol,li,span,p {border: 0;margin: 0;padding: 0;}
/*链接样式*/
a:link{color: #000;text-decoration: none;}
a:visited{color: #000;text-decoration: none;}
a:hover{color: #16387C;text-decoration: underline;}
/*清除float*/
.clear{ clear: both; font-size:1px; visibility: hidden; }
/*空格*/
.blank2{font-size: 1px;height: 2px;margin: 0 auto;width: 962px;}
.blank5{font-size: 1px;height: 5px;margin: 0 auto;width: 950px;}
.sblank2{font-size: 1px;height: 2px;margin: 0 auto;width: 100px;}
.sblank3{font-size: 1px;height: 3px;margin: 0 auto;width: 100px;}
.sblank5{font-size: 1px;height: 5px;margin: 0 auto;width: 400px;}
.sblank7{font-size: 1px;height: 7px;margin: 0 auto;width: 400px;}
/*边距*/
.margin-right{margin-right: 6px;}
.margin-right-left{margin-right: 3px; margin-left:3px;}
/*字体颜色*/
.fcborange{color: #F0741A;font: bold 12px arial,sans-serif;}
.fcred{color:#FF0000;}
.fcwhite{color:#FFF;font:normal 13px 宋体,arial,sans-serif;letter-spacing:1px;}
/*新闻标签导航*/
.news_tabsnav{
    background: url(../images/tab_bg.gif) #FFF left top repeat-x;
    border: solid #B0BEC7;
    border-width: 0 1px 0 1px;
    height: 22px;
    margin: 0 auto;
    padding: 0;
    width: 506px;
}
.news_tabsnav .tabsmenu{
    height: 22px;
}
.news_tabsnav .tab_sline {
    padding-top: 3px;
    width: 2px;
}
.news_tabsnav li {
    color: #18397C;
    display: inline;
    float: left;
    font: normal 12px 宋体,arial,sans-serif;
    letter-spacing: 1px;
    list-style-type: none;
    margin: 0;
    padding-top: 4px;
    text-align: center;
    width: 120px;
}
/*导航菜单点击后的样式*/
.news_tabsnav .tabactive1{
    background: url(../images/tab_active1.gif);
    color: #F26400;
    font: bold 12px 宋体,arial,sans-serif;
    height: 18px;
    letter-spacing: 1px;
    padding-top: 4px;
    text-align: center;
    width: 120px;
}
.news_tabsnav .tabactive3{
    background: url(../images/tab_active2.gif);
    color: #F26400;
    font: bold 12px 宋体,arial,sans-serif;
    height: 18px;
    letter-spacing: 1px;
    padding-top: 4px;
    text-align: center;
    width: 120px;
}
.news_tabsnav .tabactive5{
    background: url(../images/tab_active2.gif);
    color: #F26400;
    font: bold 12px 宋体,arial,sans-serif;
    height: 18px;
    letter-spacing: 1px;
    padding-top: 4px;
    text-align: center;
    width: 120px;
}
.news_tabsnav .tabactive7{
    background: url(../images/tab_active2.gif);
    color: #F26400;
    font: bold 12px 宋体,arial,sans-serif;
    height: 18px;
    letter-spacing: 1px;
    padding-top: 4px;
    text-align: center;
    width: 120px;
}
/*最新消息主体*/
.news_content{
    border: solid #B0BEC7;
    border-width: 0 1px 1px 1px;
    margin: 0 auto;
    width: 506px;
}
/*推荐新闻列表*/
.news_list{
    height: 120px;
    margin: 0 auto;
    width: 492px;
}
.news_list img{
    border: 1px solid #9EB1C0;
    float: left;
    height: 115px;
    margin: 0;
    padding: 1px;
    width: 154px;
    cursor: pointer;
}
.news_list .new_top7{
    float: right;
    height: 120px;
    margin: 0;
    width: 325px;
}
.news_list .new_top7 li{
    float: left;
    font: normal 13px 宋体,sans-serif;
    height: 12px;
    letter-spacing: 1px;
    list-style-type: none;
    margin: 0;
    padding: 0 0 5px 0!important;
    padding: 0 0 2px 0;
    width: 322px;
}
.news_list .new_top7 li a:link,a:visited{
    color: #18397C;
}
.news_list .new_top7 li a:hover{
    color: #FF0000;
}
/*LOGO广告*/
.logos{
    margin: 0 auto;
    width: 488px;
    height: 44px;
    padding: 1px !important;
    border: 1px solid #9EB1C0;
}
.logoscnt{
    margin: 0 auto;
    width: 488px;
    height: 31px !important;
    height: 29px;
    padding: 6px 0 7px 0 !important;
    padding: 4px 0 5px 0;
    text-align: center;
    background: url(../images/logos_bg.gif);
}
/*基本信息统计*/
.siteinfo{
    height: 12px;
    letter-spacing: 1px;
    margin: 0 auto;
    padding: 4px 0 4px 0 !important;
    padding: 2px 0 2px 0;
    text-align: center;
    width: 490px;
}
.loading{
   margin:0 auto;
   padding:50px 0 50px 0;
   width:470px;
   text-align:center;
}

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评