Difference between revisions of "Team:AHUT China/Project"

(Created page with "{{:Team:AHUT_China/Template/CSS_RESET}} <!--用来消除官方框架-->")
 
 
(99 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
{{:Team:AHUT_China/Template/CSS_RESET}}  <!--用来消除官方框架-->
+
{{:Team:AHUT_China/CSS_reset}}
 +
<html lang="en">
 +
<head>
 +
  <meta charset="UTF-8">
 +
  <meta name="Generator" content="EditPlus®">
 +
  <meta name="Author" content="">
 +
  <meta name="Keywords" content="">
 +
  <meta name="Description" content="">
 +
  <title>Document</title>
 +
 
 +
<style type="text/css">
 +
*{margin：0px;padding:0px}
 +
body{margin:0px;}
 +
 
 +
#nav{margin:0px auto;width:100%;}
 +
 
 +
/*---------------------------------daohang------------------------------*/
 +
#menu{height:80px;width:80%;background-color:#0066ff;z-index:11;position:absolute;margin-left:12rem}
 +
 
 +
.nav-menu {
 +
display: block;
 +
/* background: #74adaa;*/
 +
width:950px;
 +
margin: 50px auto 100px;
 +
}
 +
.nav-menu > li {
 +
display: inline;
 +
float:left;
 +
border-right:1px solid #94c0be;
 +
}
 +
.nav-menu > li:last-child {
 +
border-right: none;
 +
}
 +
.nav-menu li a {
 +
color: #000000;
 +
display: block;
 +
text-decoration: none;
 +
/*调用本地字体*/
 +
font-family:Segoe UI;
 +
font-weight:400;
 +
-webkit-font-smoothing: antialiased;
 +
-moz-font-smoothing: antialiased;
 +
font-smoothing: antialiased;
 +
text-transform: capitalize;
 +
overflow: visible;
 +
line-height: 20px;
 +
font-size: 1 rem;
 +
padding: 15px 30px 15px 31px;
 +
}
 +
.three-d {
 +
/* 任务三、设置3D舞台布景 */
 +
-webkit-perspective: 200px;
 +
-moz-perspective: 200px;
 +
-ms-perspective: 200px;
 +
-o-perspective: 200px;
 +
perspective: 200px;
 +
          /*任务四、设置3D舞台布景过渡效果*/
 +
-webkit-transition: all .07s linear;
 +
-moz-transition: all .07s linear;
 +
-ms-transition: all .07s linear;
 +
-o-transition: all .07s linear;
 +
transition:all .7s linear;
 +
position: relative;
 +
}
 +
.three-d:not(.active):hover {
 +
cursor: pointer;
 +
}
 +
/*任务五、给不是当前状态的3D舞台的悬浮与聚焦状态设置变形效果*/
 +
.three-d:not(.active):hover .three-d-box, .three-d:not(.active):focus .three-d-box {
 +
-wekbit-transform: translateZ(-25px) rotateX(90deg);
 +
-moz-transform: translateZ(-25px) rotateX(90deg);
 +
-o-transform: translateZ(-25px) rotateX(90deg);
 +
-ms-transform: translateZ(-25px) rotateX(90deg);
 +
transform: translateZ(-25px) rotateX(90deg);
 +
/*    -webkit-transform:rotateX(90deg) translatez(-25px);*/
 +
      /*  -webkit-transform:rotatex(90deg);*/
 +
}
 +
.three-d-box {
 +
          /*任务六、给3D舞台中“.three-d-box”设置过渡与变形效果*/
 +
-webkit-transition: all .3s ease-out;
 +
-moz-transition: all .3s ease-out;
 +
-ms-transition: all .3s ease-out;
 +
-o-transition: all .3s ease-out;
 +
transition: all .3s ease-out;
 +
-webkit-transform: translatez(-25px);
 +
-moz-transform: translatez(-25px);
 +
-ms-transform: translatez(-25px);
 +
-o-transform: translatez(-25px);
 +
transform: translatez(-25px);
 +
-webkit-transform-style: preserve-3d;
 +
-moz-transform-style: preserve-3d;
 +
-ms-transform-style: preserve-3d;
 +
-o-transform-style: preserve-3d;
 +
transform-style: preserve-3d;
 +
-webkit-pointer-events: none;
 +
-moz-pointer-events: none;
 +
-ms-pointer-events: none;
 +
-o-pointer-events: none;
 +
pointer-events: none;
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
display: block;
 +
width: 100%;
 +
height: 100%;
 +
}
 +
/*任务七、给导航设置3D前，与3D后变形效果*/
 +
.front {
 +
-webkit-transform: rotatex(0deg) translatez(25px);
 +
-moz-transform: rotatex(0deg) translatez(25px);
 +
-ms-transform: rotatex(0deg) translatez(25px);
 +
-o-transform: rotatex(0deg) translatez(25px);
 +
transform: rotatex(0deg) translatez(25px);
 +
}
 +
.back {
 +
-webkit-transform: rotatex(-90deg) translatez(25px);
 +
-moz-transform: rotatex(-90deg) translatez(25px);
 +
-ms-transform: rotatex(-90deg) translatez(25px);
 +
-o-transform: rotatex(-90deg) translatez(25px);
 +
transform: rotatex(-90deg) translatez(25px);
 +
color: #ffffff;
 +
}
 +
.front, .back {
 +
/*          border:1px solid red;*/
 +
display: block;
 +
width: 100%;
 +
height: 100%;
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
background:rgba(0, 0, 0, 0.8);
 +
 +
padding: 15px 30px 15px 31px;
 +
color: #ffffff;
 +
-webkit-pointer-events: none;
 +
-moz-pointer-events: none;
 +
-ms-pointer-events: none;
 +
-o-pointer-events: none;
 +
pointer-events: none;
 +
-webkit-box-sizing: border-box;
 +
box-sizing: border-box;
 +
}
 +
/*任务八、设置导航当前状态与悬浮状态下的背景效果*/
 +
.nav-menu li .active .front,  .nav-menu li .active .back,  .nav-menu li a:hover .front,  .nav-menu li a:hover .back {
 +
background-color: #000033;
 +
-webkit-background-size: 5px 5px;
 +
background-size: 5px 5px;
 +
background-position: 0 0, 30px 30px;
 +
background-image: -webit-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
 +
background-image: -moz-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
 +
background-image: -ms-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
 +
background-image: -o-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
 +
background-image: linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
 +
}
 +
.nav-menu ul {
 +
position: absolute;
 +
text-align: left;
 +
line-height: 40px;
 +
font-size: 14px;
 +
width: 200px;
 +
-webkit-transition: all 0.3s ease-in;
 +
-moz-transition: all 0.3s ease-in;
 +
-ms-transition: all 0.3s ease-in;
 +
-o-transition: all 0.3s ease-in;
 +
transition: all 0.3s ease-in;
 +
-webkit-transform-origin: 0px 0px;
 +
-moz-transform-origin: 0px 0px;
 +
-ms-transform-origin: 0px 0px;
 +
-o-transform-origin: 0px 0px;
 +
transform-origin: 0px 0px;
 +
-webkit-transform: rotateX(-90deg);
 +
-moz-transform: rotateX(-90deg);
 +
-ms-transform: rotateX(-90deg);
 +
-o-transform: rotateX(-90deg);
 +
transform: rotateX(-90deg);
 +
-webkit-backface-visibility: hidden;
 +
-moz-backface-visibility: hidden;
 +
-ms-backface-visibility: hidden;
 +
-o-backface-visibility: hidden;
 +
backface-visibility: hidden;
 +
}
 +
/*任务九、显示下拉导航菜单，并其设置一个变形效果*/
 +
.nav-menu > li:hover ul {
 +
-webkit-transform: rotateX(0deg);
 +
-moz-transform: rotateX(0deg);
 +
-ms-transform: rotateX(0deg);
 +
-o-transform: rotateX(0deg);
 +
transform: rotateX(0deg);
 +
}
 +
/*-------------------------------------------daohang_over---------------------------*/
 +
 
 +
 
 +
#banner{width:100%;height:800px;background-color:#0066ff;margin:0px}
 +
#name img{margin-left: 25rem;margin-top:-230px;position:absolute}
 +
#name{color:#ffffff;margin-left:0rem;margin-top:40%; position:relative;z-index:-100;}
 +
#name p{font-size:8em;font-family:Segoe UI;font-weight:100;position:relative;letter-spacing:0em;margin-left:23rem}
 +
#uptop  > img{margin-top:-6.5rem;margin-left:72%;position:fixed;}
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
#content{background-image:url("https://static.igem.org/mediawiki/2016/3/30/AHUT_CHINA_igem_2016_project.png" );width:100%;height:49rem;position:relative;}
 +
#con_inner{padding:0rem;background-color:rgba(0,0,0,1);height:49rem}
 +
#con_inner p{color:#ffffff}
 +
 
 +
 
 +
#table-menu{width:100%;margin-top:0.1rem;margin-left:auto;}
 +
#table-menu  li{
 +
float:left;
 +
margin:0.1rem;
 +
 
 +
}
 +
 
 +
#table-menu  li a{
 +
color:#ffffff;
 +
font-size:2em;
 +
margin-top:4rem;
 +
margin-left:4rem;
 +
text-align:center;
 +
position:absolute;
 +
}
 +
 
 +
 
 +
 
 +
 
 +
 
 +
/*-------------------footer-----------------------*/
 +
 
 +
#footer{
 +
height:300px;
 +
width:100%;
 +
color:#ccc;
 +
font-size:12px;
 +
position:relative;
 +
z-index:top;
 +
background-color:#3c3e3f;
 +
}
 +
 
 +
#footer  .conent{
 +
width:960px;
 +
 +
left:50%;
 +
bottom:0;
 +
margin-left:14%;
 +
z-index:2;
 +
}
 +
 
 +
#foot_list {
 +
width:759px;
 +
height:175px;
 +
float:left;
 +
padding-top:5px;
 +
margin:0;
 +
}
 +
#foot_list  li{
 +
float:left;
 +
text-align:left;
 +
width:115px;
 +
margin-left:0;
 +
margin-right:10px;
 +
    line-height:18px;
 +
    display:block;
 +
    color:#FFF;
 +
    font-size:16px;
 +
text-decoration: none;
 +
font-family:Arial, Helvetica, sans-serif;
 +
}
 +
#foot_list  li ul li:first-child {
 +
font-size:20px;
 +
color:#b4b4b4;
 +
line-height:28px;
 +
}
 +
 
 +
#foot_list  li ul li a {
 +
font-size:12px;
 +
color:#a1a1a1;
 +
line-height:18px;
 +
text-decoration:none;
 +
}
 +
 
 +
#foot_list li ul li a:hover {
 +
color:#fff;
 +
transition: color 0.3s ease 0s;
 +
}
 +
 
 +
 
 +
#foot_igem{
 +
padding:38px 33px 24px 18px;
 +
float:right;
 +
}
 +
#foot_igem > a {
 +
width:150px;
 +
height:118px;
 +
display:block;
 +
background-image:url(https://static.igem.org/mediawiki/2016/8/87/AHUT_CHINA_2015_index_igem_gray.jpg);
 +
}
 +
#foot_igem > a:hover {
 +
background-image:url(https://static.igem.org/mediawiki/2016/d/d8/AHUT_CHINA_2015_index_igem_origin.jpg);
 +
}
 +
#foot_copyright {
 +
 
 +
margin-left:14%;
 +
clear:both;
 +
width:960px;
 +
line-height:36px;
 +
text-align:center;
 +
vertical-align:middle;
 +
color:#777777;
 +
font-size:12px;
 +
font-family:Arial, Helvetica, sans-serif;
 +
}
 +
 
 +
 
 +
 
 +
 
 +
 
 +
</style>
 +
</head>
 +
<body>
 +
 
 +
 
 +
<div id="nav">
 +
<!---------------------------------------------------------------------------->
 +
<!----------------------banner----------------------------------------------->
 +
<div id="banner">
 +
 
 +
<div id="menu">
 +
<ul class="nav-menu clearfix unstyled">
 +
<li><a href="https://2016.igem.org/Team:AHUT_China" class="three-d "> Home <span class="three-d-box"><span class="front">Home</span><span class="back">Home</span></span> </a></li>
 +
 +
<li><a href="https://2016.igem.org/Team:AHUT_China/Attributions" class="three-d">Attributions <span class="three-d-box"><span class="front"> Attributions</span><span class="back"> Attributions</span></span> </a>
 +
    <ul class="clearfix unstyled drop-menu">
 +
<li><a href="https://2016.igem.org/Team:AHUT_China/Attributions#attributions" class="three-d";href="#attributions"> Attributions <span class="three-d-box"><span class="front">Attributions</span><span class="back">Attributions</span></span> </a></li>
 +
 
 +
        <li><a href="https://2016.igem.org/Team:AHUT_China/Attributions#menbers" class="three-d";href="#menbers"> Menbers <span class="three-d-box"><span class="front">Members</span><span class="back">Members</span></span> </a></li>
 +
        <li><a href="https://2016.igem.org/Team:AHUT_China/Attributions#instructions" class="three-d";href="#instructions">Instructions <span class="three-d-box"><span class="front">Instructors</span><span class="back">Instructors</span></span> </a></li>
 +
<li><a href="https://2016.igem.org/Team:AHUT_China/Attributions#acknowledgement" class="three-d";href="#acknowledgement"> Acknowledgement <span class="three-d-box"><span class="front"> Acknowledgement</span><span class="back">Acknowledgement</span></span> </a></li>
 +
    </ul>
 +
 
 +
<li><a href="https://2016.igem.org/Team:AHUT_China/Project " class="three-d active">  Project <span class="three-d-box"><span class="front"> Project</span><span class="back"> Project</span></span> </a>
 +
<ul class="clearfix unstyled drop-menu">
 +
        <li><a href="https://2016.igem.org/Team:AHUT_China/Project/Pathway and Design" class="three-d";href="#Pathway and Design">Pathway and Design<span class="three-d-box"><span class="front">Pathway & Design</span><span class="back">Pathway & Design</span></span> </a></li>
 +
        <li><a href="https://2016.igem.org/Team:AHUT_China/Project/Result" class="three-d";href="#Result">Result<span class="three-d-box"><span class="front">Result</span><span class="back">Result</span></span> </a></li>
 +
<li><a href="https://2016.igem.org/Team:AHUT_China/Project/Biobrick" class="three-d";href="#Biobrick"> Biobrick <span class="three-d-box"><span class="front">Biobrick</span><span class="back">Biobrick</span></span> </a></li>
 +
        <li><a href="https://2016.igem.org/Team:AHUT_China/Project/Protools" class="three-d";href="#Protools">Protocols<span class="three-d-box"><span class="front">Protocols</span><span class="back">Protocols</span></span> </a></li>
 +
<li><a href="https://2016.igem.org/Team:AHUT_China/Project/Notebook" class="three-d";href="#Notebook">Notebook<span class="three-d-box"><span class="front">Notebook</span><span class="back">Notebook</span></span> </a></li>
 +
        <li><a href="https://2016.igem.org/Team:AHUT_China/Project/Lab Pictures" class="three-d";href="#Lab Pictures">Lab Pictures<span class="three-d-box"><span class="front">Lab Pictures</span><span class="back">Lab Pictures</span></span> </a></li>
 +
        <li><a href="https://2016.igem.org/Team:AHUT_China/Project/Future Work" class="three-d";href="#Future Work">Future Work<span class="three-d-box"><span class="front">Future Work</span><span class="back">Future Work</span></span> </a></li>
 +
    </ul>
 +
 
 +
 +
 
 +
<li><a href="https://2016.igem.org/Team:AHUT_China/HP" class="three-d "> HP <span class="three-d-box"><span class="front">HP </span><span class="back">HP </span></span> </a>
 +
<ul class="clearfix unstyled drop-menu">
 +
      <li><a href="https://2016.igem.org/Team:AHUT_China/HP/Silver" class="three-d";href="#silver">silver<span class="three-d-box"><span class="front">silver</span><span class="back">silver</span></span> </a></li>
 +
<li><a href="https://2016.igem.org/Team:AHUT_China/HP/Gold" class="three-d";href="#gold">gold<span class="three-d-box"><span class="front">gold</span><span class="back">Gold</span></span> </a></li>
 +
        <li><a href="https://2016.igem.org/Team:AHUT_China/HP/Human Practice" class="three-d";href="#Overview">Human Practice <span class="three-d-box"><span class="front">Human Practice</span><span class="back">Human Practice</span></span> </a></li>
 +
       
 +
    </ul>
 +
 
 +
<li><a href="https://2016.igem.org/Team:AHUT_China/Collaborations" class="three-d"> Collaborations <span class="three-d-box"><span class="front">Collaborations</span><span class="back">Collaborations</span></span></a>
 +
      <ul class="clearfix unstyled drop-menu">
 +
        <li><a href="https://2016.igem.org/Team:AHUT_China/Collaborations" class="three-d"> Collaborations <span class="three-d-box"><span class="front">Collaborations</span><span class="back">Collaborations</span></span> </a></li>
 +
     
 +
      </ul>
 +
 
 +
<li><a href="https://2016.igem.org/Team:AHUT_China/Description" class="three-d">Description <span class="three-d-box"><span class="front">Description</span><span class="back">Description</span></span></a>
 +
      <ul class="clearfix unstyled drop-menu">
 +
        <li><a href="https://2016.igem.org/Team:AHUT_China/Description" class="three-d"> Description <span class="three-d-box"><span class="front">Description</span><span class="back">Description</span></span> </a></li>
 +
     
 +
      </ul>
 +
 
 +
  <li><a href="https://2016.igem.org/Team:AHUT_China/Proof" class="three-d">Proof <span class="three-d-box"><span class="front">Proof</span><span class="back">Proof</span></span></a>
 +
      <ul class="clearfix unstyled drop-menu">
 +
        <li><a href="https://2016.igem.org/Team:AHUT_China/Proof" class="three-d";>Proof<span class="three-d-box"><span class="front">Proof</span><span class="back">Proof</span></span> </a></li>
 +
     
 +
      </ul>
 +
 
 +
  <li><a href="https://2016.igem.org/Team:AHUT_China/Demonstrate" class="three-d"> Demonstrate<span class="three-d-box"><span class="front">Demonstrate</span><span class="back">Demonstrate</span></span></a>
 +
      <ul class="clearfix unstyled drop-menu">
 +
        <li><a href="https://2016.igem.org/Team:AHUT_China/Demonstrate" class="three-d";href="#Safety"> Demonstrate<span class="three-d-box"><span class="front">Demonstrate</span><span class="back">Demonstrate</span></span> </a></li>
 +
     
 +
      </ul>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 +
 
 +
  </ul>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
<div id="name">
 +
<img src="https://static.igem.org/mediawiki/2016/f/f6/AHUT_CHINA_igem_2016_project_max.png" width="250" height="250" border="0" alt="">
 +
<p>Project</p>
 +
 
 +
</div>
 +
<a id="uptop" href="#menu"><img src="https://static.igem.org/mediawiki/2016/d/da/Up.png" width="60" height="60" border="0" ></a>
 +
</div>
 +
 
 +
</div>
 +
 
 +
 
 +
<div id="content">
 +
<div id ="con_inner">
 +
 
 +
<ul id="table-menu">
 +
 
 +
<li style="width:20rem;height:24rem;background-color:#ff6600;float:left" id="Pad"><a href="https://2016.igem.org/Team:AHUT_China/Project/Pathway and Design">Pathway and Design</a>
 +
<img src=""></>
 +
</li>
 +
 
 +
<li style="width:20rem;height:24rem;background-color:#000066" id="res"><a href="https://2016.igem.org/Team:AHUT_China/Project/Result">Result</a>
 +
<img src=""></>
 +
</li>
 +
 
 +
<li style="width:38rem ;height:16rem;background-color:#006600" id="bio"><a href="https://2016.igem.org/Team:AHUT_China/Project/Biobrick">Biobrick</a>
 +
<img src=""></>
 +
 
 +
<li style="width:38rem ;height:16rem;background-color:#9933cc;" id="protocol"><a href="https://2016.igem.org/Team:AHUT_China/Project/Protools">Protocols</a>
 +
<img src=""></>
 +
</li>
 +
 
 +
<li style="width:20rem;height:24rem;background-color:#0033ff;margin-top:-8rem" id="notebook"><a href="https://2016.igem.org/Team:AHUT_China/Project/Notebook">Notebook</a>
 +
<img src=""></>
 +
</li>
 +
 
 +
<li  style="width:20rem;height:24rem;background-color:#ff6666;margin-top:-8rem" id="lp"><a href="https://2016.igem.org/Team:AHUT_China/Project/Lab Pictures">Lab Pictures</a>
 +
<img src=""></>
 +
 
 +
<li  style="width:38rem ;height:16rem;background-color:#6600ff;" id="fw"><a href="https://2016.igem.org/Team:AHUT_China/Project/Future_Work">Future Work</a>
 +
<img src=""></>
 +
</li>
 +
 
 +
 
 +
</li>
 +
 
 +
 
 +
 
 +
</ul>
 +
 
 +
 
 +
</div>
 +
 
 +
</div>
 +
 +
 +
 +
 +
 
 +
<!---------------------banner_over---------------------------------------->
 +
 
 +
 
 +
 +
 +
 
 +
<!----------------------------------------------------------------------------------------------->
 +
</div>
 +
 
 +
 
 +
 
 +
</body>
 +
</html>

Latest revision as of 09:45, 19 October 2016

Document