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

代码语言:html

所属分类:选项卡

代码描述:easyResponsiveTabs实现自适应tab选项卡式个人简历代码

代码标签: 适应 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 {
      .........完整代码请登录后点击上方下载按钮下载查看

网友评论0