Difference between revisions of "Team:CHINA CD UESTC/memberDemo"

 
(41 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 +
{{Template:Team:CHINA_CD_UESTC/menu}}
 +
 
<!DOCTYPE html>
 
<!DOCTYPE html>
 
<!-- saved from url=(0028)http://www.whitefrontier.ch/ -->
 
<!-- saved from url=(0028)http://www.whitefrontier.ch/ -->
Line 11: Line 13:
 
</head>
 
</head>
 
<style type="text/css">
 
<style type="text/css">
−
.unselect {
 
−
-moz-user-select: none;
 
−
-webkit-user-select: none;
 
−
-ms-user-select: none;
 
−
-o-user-select: none;
 
−
user-select: none;
 
−
}
 
−
.ir {
 
−
font: 0/0 a;
 
−
text-shadow: none;
 
−
color: transparent;
 
−
}
 
−
.clearfix:after {
 
−
content: ".";
 
−
display: block;
 
−
clear: both;
 
−
visibility: hidden;
 
−
line-height: 0;
 
−
height: 0;
 
−
}
 
−
.clearfix {
 
−
display: inline-block;
 
−
}
 
−
html[xmlns] .clearfix {
 
−
display: block;
 
−
}
 
−
* html .clearfix {
 
−
height: 1%;
 
−
}
 
−
.middleHack {
 
−
zoom: 1;
 
−
}
 
−
.ib {
 
−
display: -moz-inline-stack !important;
 
−
display: inline-block !important;
 
−
vertical-align: top;
 
−
}
 
−
.ibIe {
 
−
display: inline !important;
 
−
zoom: 1;
 
−
}
 
−
.lt-ie8 .ib {
 
−
display: inline !important;
 
−
zoom: 1;
 
−
}
 
−
.bgCover {
 
−
-webkit-background-size: cover;
 
−
-moz-background-size: cover;
 
−
-o-background-size: cover;
 
−
background-size: cover;
 
−
}
 
−
.clear {
 
−
clear: both;
 
−
display: block;
 
−
}
 
−
.translate3d {
 
−
-webkit-transform: translate3d(0, 0, 0);
 
−
-moz-transform: translate3d(0, 0, 0);
 
−
-ms-transform: translate3d(0, 0, 0);
 
−
-o-transform: translate3d(0, 0, 0);
 
−
transform: translate3d(0, 0, 0);
 
−
}
 
−
.translate {
 
−
-webkit-transform: translate(0, 0);
 
−
-moz-transform: translate3d(0, 0);
 
−
-ms-transform: translate3d(0, 0);
 
−
-o-transform: translate3d(0, 0);
 
−
transform: translate3d(0, 0);
 
−
}
 
−
.noflick {
 
−
-webkit-backface-visibility: hidden;
 
−
}
 
−
a img {
 
−
border: none;
 
−
}
 
−
body {
 
−
background: #2d2c41;
 
−
font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma;
 
−
}
 
−
/* ----------------------------
 
−
            menu
 
−
-----------------------------*/
 
−
ul {
 
−
list-style-type: none !important;
 
−
}
 
−
li {
 
−
list-style-type: none !important;
 
−
}
 
−
.accordion {
 
−
width: 100%;
 
−
max-width: 180px;
 
−
background: #303030;
 
−
-webkit-border-radius: 4px;
 
−
-moz-border-radius: 4px;
 
−
border-radius: 4px;
 
−
list-style-type: none !important;
 
−
}
 
−
.accordion li {
 
−
list-style-type: none !important;
 
−
list-style: none;
 
−
}
 
−
.accordion .link {
 
−
cursor: pointer;
 
−
display: block;
 
−
padding: 7px 7px 7px 30px;
 
−
color: #FFF;
 
−
font-size: 17px;
 
−
font-weight: 700;
 
−
border-bottom: 1px solid #CCC;
 
−
position: relative;
 
−
}
 
−
.accordion li:last-child .link {
 
−
border-bottom: 0;
 
−
}
 
−
.accordion li.open .link {
 
−
color: #FFE153;
 
−
}
 
−
.submenu {
 
−
display: none;
 
−
background: #444359;
 
−
font-size: 5px;
 
−
list-style-type: none !important;
 
−
}
 
−
.submenu li {
 
−
border-bottom: 1px solid #4b4a5e;
 
−
list-style-type: none !important;
 
−
list-style: none;
 
−
}
 
−
.submenu a {
 
−
display: block;
 
−
text-decoration: none;
 
−
color: #d9d9d9;
 
−
}
 
−
.submenu a:hover {
 
−
background: #b63b4d;
 
−
color: #FFF;
 
−
}
 
−
#menuHome {
 
−
color: #FFF;
 
−
font-size: 17px;
 
−
margin-right: 60px;
 
−
}
 
−
#menuHome:hover {
 
−
color: #FFE153;
 
−
}
 
−
/*.overflow {  overflow: hidden;}*/
 
−
.bgwidth {
 
−
width: 100%;
 
−
}
 
−
.bgheight {
 
−
height: 100%;
 
−
}
 
−
aside {
 
−
width: 260px;
 
−
height:100%;
 
−
background-color:#000;
 
−
position: absolute;
 
−
top: 0;
 
−
left: 0;
 
−
bottom: 0;
 
−
z-index: 11111111;
 
−
-webkit-transition: all 200ms ease-out;
 
−
-moz-transition: all 200ms ease-out;
 
−
-ms-transition: all 200ms ease-out;
 
−
-o-transition: all 200ms ease-out;
 
−
transition: all 200ms ease-out;
 
−
-webkit-transform: translate3d(0, 0, 0);
 
−
-moz-transform: translate3d(0, 0, 0);
 
−
-ms-transform: translate3d(0, 0, 0);
 
−
-o-transform: translate3d(0, 0, 0);
 
−
transform: translate3d(0, 0, 0);
 
−
text-decoration:none;
 
  
−
}
+
#RightContent {
−
 
+
position: fixed;
−
aside #logo {
+
−
text-indent: -6000px;
+
−
margin: 20px 32px 50px 32px;
+
−
display: block;
+
−
}
+
−
aside #logo img {
+
−
display: block;
+
−
text-decoration:none;
+
−
width: 100%;
+
−
}
+
−
aside .separator {
+
−
background: url("https://static.igem.org/mediawiki/2015/d/df/CD_UESTC_Separator.jpg") no-repeat top left transparent;
+
−
display: block;
+
−
zoom: 1;
+
−
background-position: -23px -296px;
+
−
width: 143px;
+
−
height: 3px;
+
−
text-indent: -6000px;
+
−
text-align: left;
+
−
margin: 25px auto;
+
−
}
+
−
aside nav {
+
−
font-family: 'Open Sans', Arial, Helvetica, Sans-serif, Verdana, Tahoma;
+
−
padding:0 0 0 0 px;
+
−
}
+
−
aside nav a {
+
−
color: #ddd7d7;
+
−
line-height: 40px;
+
−
text-align: center;
+
−
text-decoration: none;
+
−
font-size: 23px;
+
−
display: block;
+
−
letter-spacing: 2px;
+
−
}
+
−
 
+
−
* {
+
−
margin: 0;
+
−
padding: 0;
+
−
-webkit-font-smoothing: antialiased;
+
−
-moz-osx-font-smoothing: grayscale;
+
−
}
+
−
.no-touch * {
+
−
-webkit-touch-callout: none;
+
−
-webkit-user-select: none;
+
−
-khtml-user-select: none;
+
−
-moz-user-select: none;
+
−
-ms-user-select: none;
+
−
user-select: none;
+
−
}
+
−
div, h1, h2, h3, h4, span, p, img, a {
+
−
-webkit-touch-callout: none;
+
−
-webkit-user-select: none;
+
−
-khtml-user-select: none;
+
−
-moz-user-select: none;
+
−
-ms-user-select: none;
+
−
user-select: none;
+
−
}
+
−
a {
+
−
color: #FFFFFF;
+
−
text-decoration: underline;
+
−
}
+
−
.fa {
+
−
text-shadow: rgba(0,0,0,0.01) 0 0 1px;
+
−
-webkit-text-stroke: 0.10px;
+
−
}
+
−
img {
+
−
-moz-user-select: none;
+
−
-webkit-user-select: none;
+
−
-ms-user-select: none;
+
−
user-select: none;
+
−
-webkit-user-drag: none;
+
−
user-drag: none;
+
−
}
+
−
html, body {
+
−
min-height: 100%;
+
−
width: 100%;
+
−
height: 100%;
+
−
background: #000000;
+
−
color: #ffffff;
+
−
overflow: hidden;
+
−
font-family: 'din-condensed-web';
+
−
font-size: 14px;
+
−
font-weight: 400;
+
−
}
+
−
#realcontent {
+
−
position: absolute;
+
 
left: 260px;
 
left: 260px;
 
top: 0;
 
top: 0;
 
right: 0;
 
right: 0;
−
height: 500px;
+
height:100%;
 +
background:#FFFFFF;
 +
background-image:url("https://static.igem.org/mediawiki/2015/d/df/CD_UESTC_Separator.jpg");
 +
background-size:cover;
 +
background-attachment:fixed;
 
overflow-y: scroll;
 
overflow-y: scroll;
−
-webkit-transition: all 200ms ease-out;
 
−
-moz-transition: all 200ms ease-out;
 
−
-ms-transition: all 200ms ease-out;
 
−
-o-transition: all 200ms ease-out;
 
 
transition: all 200ms ease-out;
 
transition: all 200ms ease-out;
−
-webkit-transform: translate3d(0, 0, 0);
 
−
-moz-transform: translate3d(0, 0, 0);
 
−
-ms-transform: translate3d(0, 0, 0);
 
−
-o-transform: translate3d(0, 0, 0);
 
 
transform: translate3d(0, 0, 0);
 
transform: translate3d(0, 0, 0);
−
z-index: 9999;
+
z-index: 0;
 
}
 
}
−
.owl-wrapper-outer, .owl-wrapper, .owl-item {
+
#RightContentText {
−
height: 100%;
+
−
}
+
−
.fullBg {
+
 
position: absolute;
 
position: absolute;
−
top: 0;
+
float: left;
−
left: 0;
+
left:0;
−
display: none;
+
right:0;
−
}
+
top:260px;
−
.fullBg.display {
+
background:#FFFFFF;
−
display: block;
+
color: #000000;
−
}
+
transition: all 200ms ease-out;
−
.layoutHide {
+
−
position: absolute;
+
−
top: 0;
+
−
left: 0;
+
−
bottom: 0;
+
−
width: 0%;
+
−
background: #000000;
+
−
z-index: 40;
+
−
-webkit-transform: translate3d(0, 0, 0);
+
−
-moz-transform: translate3d(0, 0, 0);
+
−
-ms-transform: translate3d(0, 0, 0);
+
−
-o-transform: translate3d(0, 0, 0);
+
 
transform: translate3d(0, 0, 0);
 
transform: translate3d(0, 0, 0);
−
-webkit-backface-visibility: hidden;
+
z-index: 10;
−
background: url(".../.../static/img/layout_hide.jpg") repeat top left transparent;
+
 
}
 
}
  
−
.touch .video .close {
 
−
top: 20px;
 
−
right: 20px;
 
−
}
 
−
@media screen and (max-height: 780px) {
 
−
html body aside #logo {
 
−
margin-top: 50px;
 
−
margin-bottom: 30px;
 
−
}
 
−
html body aside nav a {
 
−
line-height: 35px;
 
−
font-size: 18px;
 
−
}
 
−
html body aside .separator {
 
−
margin: 20px auto;
 
−
}
 
−
html body aside .contact {
 
−
font-size: 18px;
 
−
}
 
−
}
 
−
@media screen and (max-height: 680px) {
 
−
html body aside #logo {
 
−
margin-top: 20px;
 
−
margin-bottom: 20px;
 
−
}
 
−
html body aside nav a {
 
−
line-height: 31px;
 
−
font-size: 18px;
 
−
}
 
−
html body aside .separator {
 
−
margin: 10px auto;
 
−
}
 
−
}
 
−
@media screen and (max-width: 1050px) {
 
−
html aside {
 
−
width: 200px;
 
−
}
 
−
html aside #logo {
 
−
margin-left: 20px;
 
−
margin-right: 20px;
 
−
}
 
−
html #realcontent {
 
−
left: 200px;
 
−
}
 
−
}
 
−
@media screen and (max-width: 700px) {
 
−
html aside {
 
−
left: -200px;
 
−
}
 
−
html aside #mobileMenuButton {
 
−
display: block;
 
−
}
 
−
html #realcontent {
 
−
left: 0;
 
−
right: auto;
 
−
width: 100%;
 
−
}
 
−
}
 
−
/*float realcontent*/
 
−
#content {
 
−
width: 100%;
 
−
height: 1000px;
 
−
}
 
−
 
−
.firstHeading {
 
−
display: none;
 
−
}
 
−
#top {
 
−
display: none;
 
−
}
 
 
</style>
 
</style>
 
<body id="homeIndexBody">
 
<body id="homeIndexBody">
−
<aside>
+
 
−
  <h1 id="logo"> <img alt="White Frontier Brewery" src="https://static.igem.org/mediawiki/2015/b/bb/CD_UESTC_whitefrontier.png"> </h1>
+
<div id="RightContent">
−
  <div class="separator"></div>
+
<div id="RightContentText">
−
  <nav >
+
<p>正文测试</p>
−
    <!-- Contenedor -->
+
<p>正文测试</p>
−
    <ul id="accordion" class="accordion">
+
<p>正文测试</p>
−
      <li>
+
<p>正文测试</p>
−
        <div class="link"><a id="menuHome" href="./home.html">HOME</a></div>
+
<p>正文测试</p>
−
      </li>
+
<p>正文测试</p>
−
      <li>
+
<p>正文测试</p>
−
        <div class="link">PROJECT</div>
+
<p>正文测试</p>
−
        <ul class="submenu">
+
<p>正文测试</p>
−
          <li><a href="#">Problem</a></li>
+
<p>正文测试</p>
−
          <li><a href="#">Design</a></li>
+
<p>正文测试</p>
−
          <li><a href="#">Parts</a></li>
+
<p>正文测试</p>
−
        </ul>
+
<p>正文测试</p>
−
      </li>
+
<p>正文测试</p>
−
      <li>
+
<p>正文测试</p>
−
        <div class="link">RESULTS</div>
+
<p>正文测试</p>
−
        <ul class="submenu">
+
<p>正文测试</p>
−
          <li><a href="#">Results</a></li>
+
<p>正文测试</p>
−
          <li><a href="#">Future</a></li>
+
<p>正文测试</p>
−
        </ul>
+
<p>正文测试</p>
−
      </li>
+
<p>正文测试</p>
−
      <li>
+
<p>正文测试</p>
−
        <div class="link">MODELING</div>
+
<p>正文测试</p>
−
        <ul class="submenu">
+
<p>正文测试</p>
−
          <li><a href="#">Modeling</a></li>
+
<p>正文测试</p>
−
        </ul>
+
<p>正文测试</p>
−
      </li>
+
<p>正文测试</p>
−
      <li>
+
<p>正文测试</p>
−
        <div class="link">TEAM</div>
+
<p>正文测试</p>
−
        <ul class="submenu">
+
<p>正文测试</p>
−
          <li><a href="./teamMembers.html">Members</a></li>
+
<p>正文测试</p>
−
          <li><a href="#">Instructors</a></li>
+
<p>正文测试</p>
−
          <li><a href="#">Attributions</a></li>
+
<p>正文测试</p>
−
        </ul>
+
</div>
−
      </li>
+
−
      <li>
+
−
        <div class="link">HUMAN PRACTICES</div>
+
−
        <ul class="submenu">
+
−
          <li><a href="#">Google</a></li>
+
−
          <li><a href="#">Bing</a></li>
+
−
        </ul>
+
−
      </li>
+
−
      <li>
+
−
        <div class="link">NOTEBOOK</div>
+
−
        <ul class="submenu">
+
−
          <li><a href="#">Journal</a></li>
+
−
          <li><a href="#">Safety</a></li>
+
−
          <li><a href="#">Protocol</a></li>
+
−
        </ul>
+
−
      </li>
+
−
    </ul>
+
−
  </nav>
+
−
  <div class="separator"></div>
+
−
</aside>
+
−
<div id="realcontent">
+
−
  <p >测试！！</p>
+
−
  <br>
+
 
</div>
 
</div>
 
</div>
 
</div>
Line 455: Line 86:
 
<script type="text/javascript" src="./saved.js"></script>  
 
<script type="text/javascript" src="./saved.js"></script>  
 
<script src='./jquery.js'></script>  
 
<script src='./jquery.js'></script>  
−
<script type="text/javascript">
 
−
  //slide menu
 
−
  $(function() {
 
−
var Accordion = function(el, multiple) {
 
−
this.el = el || {};
 
−
this.multiple = multiple || false;
 
−
 
−
// Variables privadas
 
−
var links = this.el.find('.link');
 
−
// Evento
 
−
links.on('mouseenter', {el: this.el, multiple: this.multiple}, this.dropdown)
 
−
}
 
−
 
−
 
−
Accordion.prototype.dropdown = function(e) {
 
−
var $el = e.data.el;
 
−
$this = $(this),
 
−
$next = $this.next();
 
−
 
−
$next.slideToggle();
 
−
$this.parent().toggleClass('open');
 
−
 
−
if (!e.data.multiple) {
 
−
$el.find('.submenu').not($next).slideUp().parent().removeClass('open');
 
−
};
 
−
}
 
−
 
−
var accordion = new Accordion($('#accordion'), false);
 
−
});</script>
 
−
<script type="text/javascript">//<![CDATA[
 
−
var controllerName="home";
 
−
var actionName="index";
 
−
var base="";
 
−
var baseLang="/en";
 
−
var lang="en";
 
−
data=[];//]]>
 
−
</script>
 
−
<script type="text/javascript">
 
−
//experienceIntercal change
 
−
        var experienceInterval;
 
−
        function experienceGalleryNext() {
 
−
            var $active = $('#realcontent #homeIndex a.experience .gallery img.active');
 
−
            if ( $active.length == 0 ) $active = $('#realcontent #homeIndex a.experience .gallery img:last');
 
−
            var $next =  $active.next().length ? $active.next() : $('#realcontent #homeIndex a.experience .gallery img:first');
 
−
            $active.addClass('lastActive');
 
−
            $next.css({opacity: 0.0})
 
−
                .addClass('active')
 
−
                .animate({opacity: 1.0}, 700, function() {
 
−
                    $active.removeClass('active lastActive');
 
−
                });
 
−
        }
 
−
        $('.no-touch #realcontent #homeIndex a.experience').hover(function(){
 
−
            var $gallery = $(this).find('.gallery');
 
−
            $gallery.stop().animate({
 
−
                scale:1,
 
−
                opacity:1
 
−
            },500, 'easeOutCubic');
 
−
            experienceInterval = window.setInterval(experienceGalleryNext, 1000);
 
−
        }, function(){
 
−
            window.clearInterval(experienceInterval);
 
−
            var $gallery = $(this).find('.gallery');
 
−
            $gallery.stop().animate({
 
−
                scale:1.5,
 
−
                opacity:0
 
−
            },500, 'easeOutCubic', function(){
 
−
                window.clearInterval(experienceInterval);
 
−
            });
 
−
        });
 
−
 
−
 
−
 
−
        // swipe beer
 
−
        var swipeBeer = new Swipe(document.getElementById('swipeBeer'), {
 
−
            speed: 400,
 
−
            auto: false,
 
−
            continuous: true,
 
−
            disableScroll: false,
 
−
            stopPropagation: false,
 
−
            callback: function(index, elem) {},
 
−
            transitionEnd: function(index, elem) {}
 
−
        });
 
−
 
−
        var timeout;
 
−
        function again()
 
−
        {
 
−
            window.clearTimeout(timeout);
 
−
            timeout = window.setTimeout(function(){
 
−
                swipeBeer.next();
 
−
                again();
 
−
            }, 1400);
 
−
        }
 
−
        $('.no-touch #realcontent #homeIndex a.beer').hover(function(){
 
−
            swipeBeer.next();
 
−
            again();
 
−
        }, function(){
 
−
            window.clearTimeout(timeout);
 
−
        });
 
  
 
     </script>
 
     </script>
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 03:04, 21 May 2015

<!DOCTYPE html>

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试