easyResponsiveTabs实现自适应tab选项卡式个人简历代码-html代码-BFW代码库

代码语言：html
所属分类：选项卡
代码描述：easyResponsiveTabs实现自适应tab选项卡式个人简历代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>

<head>
    <title>手机端个人简历HTML5模板</title>
    <!-- for-mobile-apps -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="" />
    <script type="application/x-javascript">
        addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);               function hideURLbar(){ window.scrollTo(0,1); }
    </script>
    <!-- //for-mobile-apps -->
    <!-- js -->
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-1.8.3.js"></script>
    <!-- //js -->
    <style>
        /*--Author: W3layoutsAuthor URL: http://w3layouts.comLicense: Creative Commons Attribution 3.0 UnportedLicense URL: http://creativecommons.org/licenses/by/3.0/--*/
    /* reset */
    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }
    
    article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {
        display: block;
    }
    
    ol,ul {
        list-style: none;
        margin: 0px;
        padding: 0px;
    }
    
    blockquote,q {
        quotes: none;
    }
    
    blockquote:before,blockquote:after,q:before,q:after {
        content: '';
        content: none;
    }
    
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    
    /* start editing from here */
    a {
        text-decoration: none;
    }
    
    .txt-rt {
        text-align: right;
    }
    
    /* text align right */
    .txt-lt {
        text-align: left;
    }
    
    /* text align left */
    .txt-center {
        text-align: center;
    }
    
    /* text align center */
    .float-rt {
        float: right;
    }
    
    /* float right */
    .float-lt {
        float: left;
    }
    
    /* float left */
    .clear {
        clear: both;
    }
    
    /* clear float */
    .pos-relative {
        position: relative;
    }
    
    /* Position Relative */
    .pos-absolute {
        position: absolute;
    }
    
    /* Position Absolute */
    .vertical-base {
        vertical-align: baseline;
    }
    
    /* vertical align baseline */
    .vertical-top {
        vertical-align: top;
    }
    
    /* vertical align top */
    nav.vertical ul li {
        display: block;
    }
    
    /* vertical menu */
    nav.horizontal ul li {
        display: inline-block;
    }
    
    /* horizontal menu */
    img {
        max-width: 100%;
    }
    
    /*end reset*/
    html, body {
        font-size: 100%;
        background: #1F50BA;
        font-family: 'Open Sans', sans-serif;
    }
    
    h1,h2,h3,h4,h5,h6,input {
        font-family: 'Josefin Sans', sans-serif;
        margin: 0;
    }
    
    p,a {
        font-family: 'Open Sans', sans-serif;
    }
    
    ul,label {
        margin: 0;
        padding: 0;
    }
    
    body a:hover,body a {
        text-decoration: none;
    }
    
    /*-- main --*/
    .wthree_footer_copy p {
        font-size: 14px;
        color: #fff;
        margin: 3em 0 0;
        line-height: 1.8em;
        text-align: center;
        padding: 0 1em;
    }
    
    .wthree_footer_copy p a {
        color: #FF84F6;
        text-decoration: none;
    }
    
    .wthree_footer_copy p a:hover {
        color: #fff;
    }
    
    input[type="submit"],.wthree_footer_copy p a {
        transition: .5s ease-in;
        -webkit-transition: .5s ease-in;
        -moz-transition: .5s ease-in;
        -o-transition: .5s ease-in;
        -ms-transition: .5s ease-in;
    }
    
    .main {
        padding: 4em 0;
    }
    
    .main h1 {
        text-align: center;
        color: #fff;
        font-size: 2.5em;
        margin-bottom: 1em;
    }
    
    .w3l_main_grid {
        width: 30%;
        margin: 0 auto;
    }
    
    .w3l_main_grid1 {
        background: #EF27E1;
        padding: 2em;
    }
    
    .w3l_main_grid1_left {
        float: left;
    }
    
    .w3l_main_grid1_right {
        float: right;
    }
    
    .w3l_main_grid1_right i {
        width: 5px;
        height: 5px;
        border-radius: 10px;
        background: #fff;
        display: block;
        margin-bottom: 2px;
        font-style: normal;
    }
    
    .w3l_main_grid1_sub {
        text-align: center;
    }
    
    .menu {
        display: inline-block;
        position: relative;
    }
    
    .menu a {
        display: block;
    }
    
    span.menu-icon {
        display: block;
        cursor: pointer;
        margin: 0 0 0.5em 0;
        position: relative;
    }
    
    ul.nav1 {
        z-index: 999;
        width: 102px;
        background-color: #FFF;
        padding: 0.5em 1em;
        position: absolute;
        right: 0;
    }
    
    ul.nav1 {
        display: none;
    }
    
    ul.nav1 li {
        display: block;
        margin: 0 0 1em;
    }
    
    ul.nav1 li a {
        font-size: 14px;
        color: #212121;
        text-align: center;
    }
    
    ul.nav1 li a:hover {
        color: #316EF1;
    }
    
    .w3l_main_grid1_sub h2 {
        font-size: 1.2em;
        color: #fff;
        margin: .5em 0 0;
        text-transform: uppercase;
    }
    
    .w3l_main_grid2 {
        background: #fff;
    }
    
    /*-- Tabs --*/
    .sap_tabs {
        clear: both;
    }
    
    .tab_box {
        background: #fd926d;
        padding: 2em;
    }
    
    .top1 {
        margin-top: 2%;
    }
    
    .resp-tabs-list {
        list-style: none;
        text-align: center;
        border-top: 1px solid #DBDBDB;
    }
    
    .resp-tab-item {
        cursor: pointer;
        display: inline-block;
        margin: 0;
        outline: none;
        -webkit-transition: all 0.3s ease-out;
        -moz-transition: all 0.3s ease-out;
        -ms-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
        width: 24.76%;
        background: #F5F5F5;
        float: left;
        padding: 1.5em 0;
        border-right: 1px solid #DBDBDB;
    }
    
    .resp-tab-item li:last-child {
        border-right: none;
    }
    
    .resp-tab-active {
        text-shadow: none;
    }
    
    .resp-tabs-container {
        /*-- w3layouts --*/
        padding: 1em;
        clear: left;
        background: #f5f5f5;
    }
    
    h2.resp-accordion {
        cursor: pointer;
        padding: 5px;
        display: none;
    }
    
    .resp-tab-content {
        display: none;
        padding: 2em;
        background: #fff;
    }
    
    .resp-content-active, .resp-accordion-active {
        display: block;
    }
    
    .resp-tab-item label {
        margin-right: 8px;
    }
    
    .w3ls_figure {
        background: url(//repo.bfw.wiki/bfwrepo/images/app/jianli/2.png) no-repeat 0px 0px;
        display: block;
        width: 32px;
        height: 32px;
        margin: 0 auto;
    }
    
    .w3ls_figure1 {
        background: url(//repo.bfw.wiki/bfwrepo/images/app/jianli/4.png) no-repeat 0px 0px;
        display: block;
        width: 32px;
        height: 32px;
        margin: 0 auto;
    }
    
    .w3ls_figure2 {
        background: url(//repo.bfw.wiki/bfwrepo/images/app/jianli/5.png) no-repeat 0px 0px;
        display: block;
        width: 32px;
        height: 32px;
        margin: 0 auto;
    }
    
    .w3ls_figure3 {
        background: url(//repo.bfw.wiki/bfwrepo/images/app/jianli/3.png) no-repeat 0px 0px;
        display: block;
        width: 32px;
        /*-- agileits --*/
        height: 32px;
        margin: 0 auto;
    }
    
    .resp-tab-active .w3ls_figure {
        background: url(//repo.bfw.wiki/bfwrepo/images/app/jianli/2-.png) no-repeat 0px 0px;
        display: block;
        width: 32px;
        height: 32px;
        margin: 0 auto;
    }
    
    .resp-tab-active .w3ls_figure1 {
        background: url(//repo.bfw.wiki/bfwrepo/images/app/jianli/4-.png) no-repeat 0px 0px;
        display: block;
        width: 32px;
        height: 32px;
        margin: 0 auto;
    }
    
    .resp-tab-active .w3ls_figure2 {
        background: url(//repo.bfw.wiki/bfwrepo/images/app/jianli/5-.png) no-repeat 0px 0px;
        display: block;
        width: 32px;
        height: 32px;
        margin: 0 auto;
    }
    
    .resp-tab-active .w3ls_figure3 {
        background: url(//repo.bfw.wiki/bfwrepo/images/app/jianli/3-.png) no-repeat 0px 0px;
        display: block;
        width: 32px;
        height: 32px;
        margin: 0 auto;
    }
    
    .wthree_tab_grid h4 {
        font-size: 1em;
        color: #212121;
        text-transform: uppercase;
        padding-bottom: .5em;
        margin-bottom: 1em;
        position: relative;
        font-weight: 700;
    }
    
    .wthree_tab_grid h4:after {
        content: '';
        background: #EF27E1;
        width: 15%;
        height: 1px;
        position: absolute;
        bottom: 0%;
        left: 0%;
    }
    
    /*-- w3layouts --*/
    p.eget {
        color: #999;
        line-height: 2em;
        font-style: italic;
        text-transform: capitalize;
        font-size: 14px;
    }
    
    p.eget1 {
        color: #212121;
        line-height: 2em;
        font-size: 14px;
        margin: 1em 0 2em;
    }
    
    .wthree_tab_grid_sub_left {
        float: left;
        width: 26.2%;
        padding: .5em;
        text-align: center;
        background: #316EF1;
    }
    
    .wthree_tab_grid_sub_left h5 {
        font-size: 1.5em;
        color: #fff;
        font-weight: 700;
    }
    
    .wthree_tab_grid_sub_left p {
        color: #fff;
        font-size: 14px;
        text-transform: uppercase;
    }
    
    .wthree_tab_grid_sub_left:n.........完整代码请登录后点击上方下载按钮下载查看