Difference between revisions of "Template:NUDT CHINA"

Line 179: Line 179:
 
.pure-u-md-17-24{width:70.8333%}.pure-u-md-18-24,.pure-u-md-3-4{width:75%}.pure-u-md-19-24{width:79.1667%}.pure-u-md-4-5{width:80%}.pure-u-md-20-24,.pure-u-md-5-6{width:83.3333%}.pure-u-md-21-24,.pure-u-md-7-8{width:87.5%}.pure-u-md-11-12,.pure-u-md-22-24{width:91.6667%}.pure-u-md-23-24{width:95.8333%}.pure-u-md-1,.pure-u-md-1-1,.pure-u-md-24-24,.pure-u-md-5-5{width:100%}}
 
.pure-u-md-17-24{width:70.8333%}.pure-u-md-18-24,.pure-u-md-3-4{width:75%}.pure-u-md-19-24{width:79.1667%}.pure-u-md-4-5{width:80%}.pure-u-md-20-24,.pure-u-md-5-6{width:83.3333%}.pure-u-md-21-24,.pure-u-md-7-8{width:87.5%}.pure-u-md-11-12,.pure-u-md-22-24{width:91.6667%}.pure-u-md-23-24{width:95.8333%}.pure-u-md-1,.pure-u-md-1-1,.pure-u-md-24-24,.pure-u-md-5-5{width:100%}}
  
 +
</style>
 +
<style>
 +
 +
.pure-menu {
 +
    box-sizing: border-box;
 +
}
 +
.pure-menu-fixed {
 +
    position: fixed;
 +
    left: 0;
 +
    top: 0;
 +
    z-index: 3;
 +
}
 +
.pure-menu-list,
 +
.pure-menu-item {
 +
    position: relative;
 +
}
 +
 +
.pure-menu-list {
 +
    list-style: none;
 +
    margin: 0;
 +
    padding: 0;
 +
}
 +
 +
.pure-menu-item {
 +
    padding: 0;
 +
    margin: 0;
 +
    height: 100%;
 +
}
 +
 +
.pure-menu-link,
 +
.pure-menu-heading {
 +
    display: block;
 +
    text-decoration: none;
 +
    white-space: nowrap;
 +
}
 +
.pure-menu-item .pure-menu-item {
 +
    display: block;
 +
}
 +
.pure-menu-heading {
 +
    text-transform: uppercase;
 +
    color: #565d64;
 +
}
 +
.pure-menu-link, {
 +
    color: #777;
 +
}
 +
 +
.pure-menu-link,
 +
.pure-menu-heading {
 +
    padding: .5em 1em;
 +
}
 +
.pure-menu-active > .pure-menu-link,
 +
.pure-menu-link:hover,
 +
.pure-menu-link:focus {
 +
    background-color: #eee;
 +
}
 +
.pure-menu-selected .pure-menu-link,
 +
.pure-menu-selected .pure-menu-link:visited {
 +
    color: #000;
 +
}
 +
 +
body {
 +
    color: #777;
 +
}
 +
 +
.pure-img-responsive {
 +
    max-width: 100%;
 +
    height: auto;
 +
}
 +
 +
#layout,
 +
#menu,
 +
.menu-link {
 +
    -webkit-transition: all 0.2s ease-out;
 +
    -moz-transition: all 0.2s ease-out;
 +
    -ms-transition: all 0.2s ease-out;
 +
    -o-transition: all 0.2s ease-out;
 +
    transition: all 0.2s ease-out;
 +
}
 +
 +
#layout {
 +
    position: relative;
 +
    left: 0;
 +
    padding-left: 0;
 +
}
 +
    #layout.active #menu {
 +
        left: 175px;
 +
        width: 175px;
 +
    }
 +
 +
    #layout.active .menu-link {
 +
        left: 175px;
 +
    }
 +
 +
.content {
 +
    margin: 0 auto;
 +
    padding: 0 2em;
 +
    max-width: 800px;
 +
    margin-bottom: 50px;
 +
    line-height: 1.6em;
 +
}
 +
 +
.header {
 +
    margin: 0;
 +
    color: #333;
 +
    text-align: center;
 +
    padding: 2.5em 2em 0;
 +
    border-bottom: 1px solid #eee;
 +
}
 +
    .header h1 {
 +
        margin: 0.2em 0;
 +
        font-size: 3em;
 +
        font-weight: 300;
 +
    }
 +
    .header h2 {
 +
        font-weight: 300;
 +
        color: #ccc;
 +
        padding: 0;
 +
        margin-top: 0;
 +
    }
 +
 +
.content-subhead {
 +
    margin: 50px 0 20px 0;
 +
    font-weight: 300;
 +
    color: #888;
 +
}
 +
 +
 +
#menu {
 +
    margin-left: -175px; /* "#menu" width */
 +
    width: 175px;
 +
    position: fixed;
 +
    top: 18px;
 +
    left: 0;
 +
    bottom: 0;
 +
    z-index: 1000; /* so the menu or its navicon stays above all content */
 +
    background: #000000;
 +
    overflow-y: auto;
 +
    -webkit-overflow-scrolling: touch;
 +
}
 +
    #menu a {
 +
        color: #999;
 +
        border: none;
 +
        padding: 0.6em 0 0.6em 0.6em;
 +
    }
 +
 +
    /*
 +
    Remove all background/borders, since we are applying them to #menu.
 +
    */
 +
    #menu .pure-menu,
 +
    #menu .pure-menu ul {
 +
        border: none;
 +
        background: transparent;
 +
    }
 +
 +
    #menu .pure-menu ul,
 +
    #menu .pure-menu .menu-item-divided {
 +
        border-top: 1px solid #333;
 +
    }
 +
        /*
 +
        Change color of the anchor links on hover/focus.
 +
        */
 +
        #menu .pure-menu li a:hover,
 +
        #menu .pure-menu li a:focus {
 +
            background: #333;
 +
        }
 +
       
 +
    #menu .pure-menu-selected,
 +
    #menu .pure-menu-heading {
 +
        background: #1f8dd6;
 +
    }
 +
        #menu .pure-menu-selected a {
 +
            color: #fff;
 +
        }
 +
 +
    #menu .pure-menu-heading {
 +
        color: #fff;
 +
    }
 +
 +
.menu-link {
 +
    position: fixed;
 +
    display: block; /* show this only on small screens */
 +
    top: 18px;
 +
    left: 0; /* "#menu width" */
 +
    background: #000;
 +
    background: rgba(0,0,0,0.7);
 +
    font-size: 10px; /* change this value to increase/decrease button size */
 +
    z-index: 10;
 +
    width: 2em;
 +
    height: auto;
 +
    padding: 2.1em 1.6em;
 +
}
 +
 +
    .menu-link:hover,
 +
    .menu-link:focus {
 +
        background: #000;
 +
    }
 +
 +
    .menu-link span {
 +
        position: relative;
 +
        display: block;
 +
    }
 +
 +
    .menu-link span,
 +
    .menu-link span:before,
 +
    .menu-link span:after {
 +
        background-color: #fff;
 +
        width: 100%;
 +
        height: 0.2em;
 +
    }
 +
 +
        .menu-link span:before,
 +
        .menu-link span:after {
 +
            position: absolute;
 +
            margin-top: -0.6em;
 +
            content: " ";
 +
        }
 +
 +
        .menu-link span:after {
 +
            margin-top: 0.6em;
 +
        }
 +
@media (min-width: 88em) {
 +
 +
    .header,
 +
    .content {
 +
        padding-left: 2em;
 +
        padding-right: 2em;
 +
    }
 +
 +
    #layout {
 +
        padding-left: 175px; /* left col width "#menu" */
 +
        left: 0;
 +
    }
 +
    #menu {
 +
        left: 175px;
 +
    }
 +
 +
    .menu-link {
 +
        position: fixed;
 +
        left: 175px;
 +
        display: none;
 +
    }
 +
 +
    #layout.active .menu-link {
 +
        left: 175px;
 +
    }
 +
    #listlist .divList{ width:1100px; height:520px; margin:0px auto; position:relative;}
 +
}
 +
 +
@media (max-width: 88em) {
 +
    #layout.active {
 +
        position: relative;
 +
        left: 175px;
 +
    }
 +
    #listlist .divList{ width:900px; height:500px; margin:0px auto; position:relative;}
 +
}
 +
.pure-menu-item .pure-menu-item{display:block;background-color:#cccccc}
 +
.pure-menu-children{display:none;position:relative;top:0;margin:0;padding:0;z-index:3}
 +
.pure-menu-active>.pure-menu-children,.pure-menu-allow-hover:hover>.pure-menu-children{display:block;position:relative}
 +
.pure-menu-has-children>.pure-menu-link:after{padding-left:.5em;content:"\25B8";font-size:small}
 
</style>
 
</style>
  

Revision as of 11:49, 16 October 2017