Difference between revisions of "Team:NUDT CHINA"

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 {
 +
    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 {
 +
        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) {
 +
 +
    .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;}
 +
}
 +
 +
@media (max-width: 88em) {
 +
    #layout.active {
 +
        position: relative;
 +
        left: 175px;
 +
    }
 +
    #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 437: Line 790:
 
         </ul>
 
         </ul>
 
     <ul id="Qidilist">
 
     <ul id="Qidilist">
 +
    <li id="home" class="liList">
 +
            <div id="homeContent" class="divList">
 +
                <ul class="homeContent1">
 +
                    </ul>
 +
                    <ul class="homeContent2">
 +
                    </ul>
 +
                </div>
 +
            </li>
 
     <li id="abstract" class="liList">
 
     <li id="abstract" class="liList">
 
            
 
            
Line 445: Line 806:
 
                
 
                
 
             </li>
 
             </li>
         <li id="home" class="liList">
+
        
            <div id="homeContent" class="divList">
+
                <ul class="homeContent1">
+
                    </ul>
+
                    <ul class="homeContent2">
+
                    </ul>
+
                </div>
+
            </li>
+
 
         </ul>
 
         </ul>
 
         </div>
 
         </div>

Revision as of 14:22, 16 October 2017

<!doctype html> Team:NUDT_CHINA