Difference between revisions of "Team:NUDT CHINA"

Line 1: Line 1:
  
 
{{NUDT_CHINA}}
 
{{NUDT_CHINA}}
<!doctype html>
 
 
<html lang="en">
 
<html lang="en">
 
<head>
 
<head>
Line 7: Line 6:
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <title>Team:NUDT_CHINA</title>
 
     <title>Team:NUDT_CHINA</title>
 +
    <link rel="stylesheet" href="basic.css">
 
<script type="text/javascript" >
 
<script type="text/javascript" >
 
function StatingPages(tag){
 
function StatingPages(tag){
Line 329: Line 329:
 
#loading div:nth-of-type(2){ bottom:0;}
 
#loading div:nth-of-type(2){ bottom:0;}
 
#loading span{ width:0%; height:4px; background:white; position:absolute; left:0; top:50%; margin-top:-2px; z-index:60; transition:.10s;}
 
#loading span{ width:0%; height:4px; background:white; position:absolute; left:0; top:50%; margin-top:-2px; z-index:60; transition:.10s;}
.pure-g{
 
letter-spacing:-.31em;text-rendering:optimizespeed;
 
font-family:FreeSans,Arimo,"Droid Sans",Helvetica,Arial,sans-serif;
 
display:-webkit-box;
 
display:-webkit-flex;
 
display:-ms-flexbox;
 
display:flex;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-align-content:flex-start;-ms-flex-line-pack:start;
 
align-content:flex-start}
 
@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){table .pure-g{display:block}}
 
.opera-only :-o-prefocus,.pure-g{word-spacing:-.43em}
 
.pure-u,.pure-u-1,.pure-u-1-1,.pure-u-1-12,.pure-u-1-2,.pure-u-1-24,.pure-u-1-3,.pure-u-1-4,.pure-u-1-5,.pure-u-1-6,.pure-u-1-8,.pure-u-10-24,.pure-u-11-12,.pure-u-11-24,.pure-u-12-24,.pure-u-13-24,.pure-u-14-24,.pure-u-15-24,.pure-u-16-24,.pure-u-17-24,.pure-u-18-24,.pure-u-19-24,.pure-u-2-24,.pure-u-2-3,.pure-u-2-5,.pure-u-20-24,.pure-u-21-24,.pure-u-22-24,.pure-u-23-24,.pure-u-24-24,.pure-u-3-24,.pure-u-3-4,.pure-u-3-5,.pure-u-3-8,.pure-u-4-24,.pure-u-4-5,.pure-u-5-12,.pure-u-5-24,.pure-u-5-5,.pure-u-5-6,.pure-u-5-8,.pure-u-6-24,.pure-u-7-12,.pure-u-7-24,.pure-u-7-8,.pure-u-8-24,.pure-u-9-24{display:inline-block;zoom:1;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto}
 
.pure-g [class*=pure-u]{font-family:sans-serif}
 
.pure-u-1-24{width:4.1667%}
 
.pure-u-1-12,.pure-u-2-24{width:8.3333%}
 
.pure-u-1-8,.pure-u-3-24{width:12.5%}
 
.pure-u-1-6,.pure-u-4-24{width:16.6667%}
 
.pure-u-1-5{width:20%}
 
.pure-u-5-24{width:20.8333%}
 
.pure-u-1-4,.pure-u-6-24{width:25%}
 
.pure-u-7-24{width:29.1667%}
 
.pure-u-1-3,.pure-u-8-24{width:33.3333%}
 
.pure-u-3-8,.pure-u-9-24{width:37.5%}
 
.pure-u-2-5{width:40%}
 
.pure-u-10-24,.pure-u-5-12{width:41.6667%}
 
.pure-u-11-24{width:45.8333%}
 
.pure-u-1-2,.pure-u-12-24{width:50%}
 
.pure-u-13-24{width:54.1667%}
 
.pure-u-14-24,.pure-u-7-12{width:58.3333%}
 
.pure-u-3-5{width:60%}
 
.pure-u-15-24,.pure-u-5-8{width:62.5%}
 
.pure-u-16-24,.pure-u-2-3{width:66.6667%}
 
.pure-u-17-24{width:70.8333%}
 
.pure-u-18-24,.pure-u-3-4{width:75%}
 
.pure-u-19-24{width:79.1667%}
 
.pure-u-4-5{width:80%}
 
.pure-u-20-24,.pure-u-5-6{width:83.3333%}
 
.pure-u-21-24,.pure-u-7-8{width:87.5%}
 
.pure-u-11-12,.pure-u-22-24{width:91.6667%}
 
.pure-u-23-24{width:95.8333%}
 
.pure-u-1,.pure-u-1-1,.pure-u-24-24,.pure-u-5-5{width:100%}
 
@media screen and (min-width:0em){.pure-u-sm-1,.pure-u-sm-1-1,.pure-u-sm-1-12,.pure-u-sm-1-2,.pure-u-sm-1-24,.pure-u-sm-1-3,.pure-u-sm-1-4,.pure-u-sm-1-5,.pure-u-sm-1-6,.pure-u-sm-1-8,.pure-u-sm-10-24,.pure-u-sm-11-12,.pure-u-sm-11-24,.pure-u-sm-12-24,.pure-u-sm-13-24,.pure-u-sm-14-24,.pure-u-sm-15-24,.pure-u-sm-16-24,.pure-u-sm-17-24,.pure-u-sm-18-24,.pure-u-sm-19-24,.pure-u-sm-2-24,.pure-u-sm-2-3,.pure-u-sm-2-5,.pure-u-sm-20-24,.pure-u-sm-21-24,.pure-u-sm-22-24,.pure-u-sm-23-24,.pure-u-sm-24-24,.pure-u-sm-3-24,.pure-u-sm-3-4,.pure-u-sm-3-5,.pure-u-sm-3-8,.pure-u-sm-4-24,.pure-u-sm-4-5,.pure-u-sm-5-12,.pure-u-sm-5-24,.pure-u-sm-5-5,.pure-u-sm-5-6,.pure-u-sm-5-8,.pure-u-sm-6-24,.pure-u-sm-7-12,.pure-u-sm-7-24,.pure-u-sm-7-8,.pure-u-sm-8-24,.pure-u-sm-9-24{display:inline-block;zoom:1;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto}
 
.pure-u-sm-1-24{width:4.1667%}
 
.pure-u-sm-1-12,.pure-u-sm-2-24{width:8.3333%}
 
.pure-u-sm-1-8,.pure-u-sm-3-24{width:12.5%}
 
.pure-u-sm-1-6,.pure-u-sm-4-24{width:16.6667%}
 
.pure-u-sm-1-5{width:20%}
 
.pure-u-sm-5-24{width:20.8333%}
 
.pure-u-sm-1-4,.pure-u-sm-6-24{width:25%}
 
.pure-u-sm-7-24{width:29.1667%}
 
.pure-u-sm-1-3,.pure-u-sm-8-24{width:33.3333%}
 
.pure-u-sm-3-8,.pure-u-sm-9-24{width:37.5%}
 
.pure-u-sm-2-5{width:40%}
 
.pure-u-sm-10-24,.pure-u-sm-5-12{width:41.6667%}
 
.pure-u-sm-11-24{width:45.8333%}
 
.pure-u-sm-1-2,.pure-u-sm-12-24{width:50%}
 
.pure-u-sm-13-24{width:54.1667%}
 
.pure-u-sm-14-24,.pure-u-sm-7-12{width:58.3333%}
 
.pure-u-sm-3-5{width:60%}
 
.pure-u-sm-15-24,.pure-u-sm-5-8{width:62.5%}
 
.pure-u-sm-16-24,.pure-u-sm-2-3{width:66.6667%}
 
.pure-u-sm-17-24{width:70.8333%}
 
.pure-u-sm-18-24,.pure-u-sm-3-4{width:75%}
 
.pure-u-sm-19-24{width:79.1667%}
 
.pure-u-sm-4-5{width:80%}
 
.pure-u-sm-20-24,.pure-u-sm-5-6{width:83.3333%}
 
.pure-u-sm-21-24,.pure-u-sm-7-8{width:87.5%}
 
.pure-u-sm-11-12,.pure-u-sm-22-24{width:91.6667%}
 
.pure-u-sm-23-24{width:95.8333%}
 
.pure-u-sm-1,.pure-u-sm-1-1,.pure-u-sm-24-24,.pure-u-sm-5-5{width:100%}}
 
 
@media screen and (min-width:48em){.pure-u-md-1,.pure-u-md-1-1,.pure-u-md-1-12,.pure-u-md-1-2,.pure-u-md-1-24,.pure-u-md-1-3,.pure-u-md-1-4,.pure-u-md-1-5,.pure-u-md-1-6,.pure-u-md-1-8,.pure-u-md-10-24,.pure-u-md-11-12,.pure-u-md-11-24,.pure-u-md-12-24,.pure-u-md-13-24,.pure-u-md-14-24,.pure-u-md-15-24,.pure-u-md-16-24,.pure-u-md-17-24,.pure-u-md-18-24,.pure-u-md-19-24,.pure-u-md-2-24,.pure-u-md-2-3,.pure-u-md-2-5,.pure-u-md-20-24,.pure-u-md-21-24,.pure-u-md-22-24,.pure-u-md-23-24,.pure-u-md-24-24,.pure-u-md-3-24,.pure-u-md-3-4,.pure-u-md-3-5,.pure-u-md-3-8,.pure-u-md-4-24,.pure-u-md-4-5,.pure-u-md-5-12,.pure-u-md-5-24,.pure-u-md-5-5,.pure-u-md-5-6,.pure-u-md-5-8,.pure-u-md-6-24,.pure-u-md-7-12,.pure-u-md-7-24,.pure-u-md-7-8,.pure-u-md-8-24,.pure-u-md-9-24{display:inline-block;zoom:1;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto}.pure-u-md-1-24{width:4.1667%}
 
.pure-u-md-1-12,.pure-u-md-2-24{width:8.3333%}
 
.pure-u-md-1-8,.pure-u-md-3-24{width:12.5%}
 
.pure-u-md-1-6,.pure-u-md-4-24{width:16.6667%}
 
.pure-u-md-1-5{width:20%}
 
.pure-u-md-5-24{width:20.8333%}
 
.pure-u-md-1-4,.pure-u-md-6-24{width:25%}
 
.pure-u-md-7-24{width:29.1667%}
 
.pure-u-md-1-3,.pure-u-md-8-24{width:33.3333%}
 
.pure-u-md-3-8,.pure-u-md-9-24{width:37.5%}
 
.pure-u-md-2-5{width:40%}
 
.pure-u-md-10-24,.pure-u-md-5-12{width:41.6667%}
 
.pure-u-md-11-24{width:45.8333%}
 
.pure-u-md-1-2,.pure-u-md-12-24{width:50%}
 
.pure-u-md-13-24{width:54.1667%}
 
.pure-u-md-14-24,.pure-u-md-7-12{width:58.3333%}
 
.pure-u-md-3-5{width:60%}
 
.pure-u-md-15-24,.pure-u-md-5-8{width:62.5%}
 
.pure-u-md-16-24,.pure-u-md-2-3{width:66.6667%}
 
.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>
 
<!-- for the menu and all-->
 
    <style type="text/css"><!--
 
 
.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 {
 
body {
Line 485: Line 334:
 
}
 
}
  
.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 {
 
        font-size: 110%;
 
        color: #fff;
 
        margin: 0;
 
    }
 
 
.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) {
 
@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;
+
    }
+
 
     #Qidilist .divList{ width:1100px; height:520px; margin:0px auto; position:relative;}
 
     #Qidilist .divList{ width:1100px; height:520px; margin:0px auto; position:relative;}
 
}
 
}
  
 
@media (max-width: 88em) {
 
@media (max-width: 88em) {
     #layout.active {
+
      
        position: relative;
+
        left: 175px;
+
    }
+
 
     #Qidilist .divList{ width:900px; height:500px; margin:0px auto; position:relative;}
 
     #Qidilist .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}
 
  
 
.pure-button {
 
.pure-button {
Line 697: Line 359:
 
text-decoration:none;
 
text-decoration:none;
 
}
 
}
-->
+
 
 
     </style>
 
     </style>
  
Line 811: Line 473:
 
          
 
          
 
</div>
 
</div>
<script type="text/javascript">
 
(function (window, document) {
 
  
    var layout  = document.getElementById('layout'),
 
        menu    = document.getElementById('menu'),
 
        menuLink = document.getElementById('menuLink'),
 
        content  = document.getElementById('content');
 
   
 
 
    function toggleClass(element, className) {
 
        var classes = element.className.split(/\s+/),
 
            length = classes.length,
 
            i = 0;
 
 
        for(; i < length; i++) {
 
          if (classes[i] === className) {
 
            classes.splice(i, 1);
 
            break;
 
          }
 
        }
 
        // The className is not found
 
        if (length === classes.length) {
 
            classes.push(className);
 
        }
 
 
        element.className = classes.join(' ');
 
    }
 
 
    function toggleAll(e) {
 
        var active = 'active';
 
 
        e.preventDefault();
 
        toggleClass(layout, active);
 
        toggleClass(menu, active);
 
        toggleClass(menuLink, active);
 
    }
 
 
    menuLink.onclick = function (e) {
 
        toggleAll(e);
 
    };
 
    content.onclick = function(e) {
 
        if (menu.className.indexOf('active') !== -1) {
 
            toggleAll(e);
 
        }
 
    };
 
 
 
 
}(this, this.document));
 
</script>
 
 
<script type="text/javascript" >
 
    function Show(tagId) {
 
    if (document.getElementById(tagId).style.display=="none") {
 
    document.getElementById(tagId).style.display="block";
 
   
 
    }
 
    else {
 
    document.getElementById(tagId).style.display="none";
 
    }
 
    }
 
</script>
 
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 14:38, 16 October 2017

Team:NUDT_CHINA