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

 
(11 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;
 
margin-left:40px;
 
}
 
.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 {
 
+
aside #logo {
+
text-indent: -6000px;
+
margin: 0px 32px 0px 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;
+
}
+
img {
+
user-select: 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: fixed;
 
position: fixed;
 
left: 260px;
 
left: 260px;
Line 272: Line 20:
 
right: 0;
 
right: 0;
 
height:100%;
 
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;
 
transition: all 200ms ease-out;
 
transition: all 200ms ease-out;
 
transform: translate3d(0, 0, 0);
 
transform: translate3d(0, 0, 0);
z-index: 99;
+
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: 0px;
 
margin-bottom:0px;
 
}
 
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: 0px;
 
margin-bottom: 0px;
 
}
 
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%;
 
    height:100%;
 
}
 
}
 
/*float realcontent*/
 
#content {
 
width:auto;
 
height: 2000px;
 
 
}
 
 
.firstHeading {
 
display: none;
 
}
 
#top {
 
display: none;
 
}
 
h1 {
 
text-decoration:none;
 
font-size:100%;}
 
 
</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 class="separator"></div>
 
  <nav >
 
    <!-- Contenedor -->
 
    <ul id="accordion" class="accordion">
 
      <li>
 
        <div class="link"><a id="menuHome" href="./home.html">HOME</a></div>
 
      </li>
 
      <li>
 
        <div class="link">PROJECT</div>
 
        <ul class="submenu">
 
          <li><a href="#">Problem</a></li>
 
          <li><a href="#">Design</a></li>
 
          <li><a href="#">Parts</a></li>
 
        </ul>
 
      </li>
 
      <li>
 
        <div class="link">RESULTS</div>
 
        <ul class="submenu">
 
          <li><a href="#">Results</a></li>
 
          <li><a href="#">Future</a></li>
 
        </ul>
 
      </li>
 
      <li>
 
        <div class="link">MODELING</div>
 
        <ul class="submenu">
 
          <li><a href="#">Modeling</a></li>
 
        </ul>
 
      </li>
 
      <li>
 
        <div class="link">TEAM</div>
 
        <ul class="submenu">
 
          <li><a href="./teamMembers.html">Members</a></li>
 
          <li><a href="#">Instructors</a></li>
 
          <li><a href="#">Attributions</a></li>
 
        </ul>
 
      </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 >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  <p >高度测试!!<br></p>
 
  
  <br>
+
<div id="RightContent">
 +
<div id="RightContentText">
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
<p>正文测试</p>
 +
</div>
 
</div>
 
</div>
 
</div>
 
</div>
Line 480: 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>
 
     </script>
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 03:04, 21 May 2015

<!DOCTYPE html>

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试

正文测试