Team:NEAU-Harbin/Sandbox

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
{{CSS/Main}}
{{CSS/Main}}
-
 
<!DOCTYPE html>
<!DOCTYPE html>
-
<!-- Thanks to http://90du.es/demo/ -->
+
<html>
-
 
+
-
<html>  
+
<head>
<head>
-
<style>#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .visualClear {display: none;} /*-- hides default wiki settings --*/</style>
+
<!--link href='http://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'-->
-
<script type="text/javascript" src="jquery.js"></script>
+
<style>/*-- hides default wiki settings --*/
-
<style>
+
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .visualClear {
-
/*shape*/
+
display: none;
-
#square {
+
}
-
width: 50px;
+
</style>
-
height: 50px;
+
<style><!--navigation.css-->
-
background: green;
+
.nav, .nav ul {
-
}</style>
+
margin: 0;
 +
padding: 0;
 +
list-style: none;
 +
line-height: 1;
 +
}
-
<!-- demo2 -->
+
.nav {
-
<style>
+
/* Layout & positioning */
-
/*accordion list*/
+
position: relative;
-
.demo2 {
+
margin: auto; /* Centering the menu */
-
    overflow: hidden;
+
height: 46px;
-
}
+
width: 1000px;
-
.demo2 .span3 label {
+
text-align: center;
-
    font-size: 18px;
+
-
    line-height: 27px;
+
/* Background & effects */
-
    border-bottom: 2px solid #4ce;
+
box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
-
    color: #4ce;
+
background: #65c0bb;
-
}
+
background-image: url(data:image/png;base64,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);
-
.demo2 .span3 input[type] {
+
}
-
    display: none;
+
-
    position: absolute;
+
-
    width: 100%;
+
-
    height: 36px;
+
-
    opacity: 0;
+
-
    cursor: pointer;
+
-
}
+
-
.demo2 .span3 label{
+
-
    font-weight: bold;
+
-
    display: block;
+
-
    margin-bottom: 10px;
+
-
    position: relative;
+
-
}
+
-
.demo2 .span3 label:after{
+
-
    content:'\25C0';
+
-
    position: absolute;
+
-
    right: 1%;
+
-
}
+
-
.demo2 .span3 .unstyled{
+
-
    height: 1px;
+
-
    overflow: hidden;
+
-
    opacity: 0;
+
-
    transition: min-height .5s,opacity 1s;
+
-
}
+
-
.demo2 .span3 input[type]:checked ~ .unstyled{
+
-
    min-height: 130px;
+
-
    opacity: 1;
+
-
}
+
-
.demo2 .span3 input[type]:checked ~ label:after {
+
-
    -webkit-transform: rotate(-90deg);
+
-
}
+
-
</style>
+
-
<!-- Scrollfixed Sidebar -->
+
 
-
<style>  
+
.nav>li {
-
.fixed {position:fixed;top:20px;background-color:#90EE90;border-color:green; }
+
margin: 0;
-
/* article{height:2800px;} */
+
line-height: 1;
 +
padding: 0;
 +
display: inline;
 +
position: relative;
 +
margin: 0 12px;
 +
}
 +
 
 +
.nav::after, .nav::before {
 +
content: "";
 +
display: block;
 +
position: absolute;
 +
top: 6px;
 +
height: 0px;
 +
width: 0px;
 +
border: 23px solid #65c0bb;
 +
z-index: -1;
 +
}
 +
 
 +
/* The left ribbon */
 +
.nav::before {
 +
border-left-color: transparent;
 +
left: -30px;
 +
}
 +
 
 +
/* The right ribbon */
 +
.nav::after {
 +
border-right-color: transparent;
 +
right: -30px;
 +
}
 +
 
 +
.nav>li>a {
 +
display: inline-block;
 +
padding: 15px 9px;
 +
position: relative;
 +
 
 +
font-family: 'Oswald', sans-serif;
 +
font-size: 16px;
 +
text-transform: uppercase;
 +
text-decoration: none;
 +
color: #fff;
 +
text-shadow: 1px 2px rgba(0, 0, 0, .2);
 +
 +
-webkit-transition: color .3s linear;
 +
  -moz-transition: color .3s linear;
 +
-o-transition: color .3s linear;
 +
-ms-transition: color .3s linear;
 +
transition: color .3s linear;
 +
}
 +
 
 +
.nav>li>a:hover, .nav>li:hover>a {
 +
color: #eae8a5;
 +
}
 +
 
 +
.nav>li>a::after {
 +
content: "";
 +
height: 15px;
 +
width: 15px;
 +
/*stars*/
 +
background-image: url(data:image/png;base64,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);
 +
position: absolute;
 +
right: -20px;
 +
top: 16px;
 +
display: block;
 +
}
 +
 
 +
.nav>li:last-child>a::after {
 +
display: none;
 +
}
 +
 
 +
.nav ul {
 +
position: absolute;
 +
left: -9999px;
 +
padding-top: 10px;
 +
border-bottom: 1px solid #ccc;
 +
opacity: 0;
 +
-webkit-transition: opacity .3s linear;
 +
-moz-transition: opacity .3s linear;
 +
-o-transition: opacity .3s linear;
 +
-ms-transition: opacity .3s linear;
 +
}
 +
 
 +
.nav>li:hover>ul {
 +
left: 0;
 +
opacity: 1;
 +
top: 30px;
 +
}
 +
 
 +
 
 +
.nav ul li:hover>ul {
 +
left: 150px;
 +
opacity: 1;
 +
top: -11px;
 +
padding-left: 12px;
 +
border-bottom: 0;
 +
box-shadow: none;
 +
}
 +
 
 +
.nav ul li {
 +
display: block;
 +
position: relative;
 +
border-top: 1px solid #ccc;
 +
border-left: 1px solid #ccc;
 +
border-right: 1px solid #ccc;
 +
width: 150px;
 +
text-align: justify;
 +
z-index: 9;
 +
background: #eee;
 +
box-shadow: 3px 4px 0 rgba(0, 0, 0, .1);
 +
-webkit-transition: background .3s linear;
 +
-moz-transition: background .3s linear;
 +
-ms-transition: background .3s linear;
 +
-o-transition: background .3s linear;
 +
}
 +
 
 +
.nav ul li a {
 +
font-family: "Oswald", sans-serif;
 +
font-size: 14px;
 +
text-decoration: none;
 +
display: block;
 +
padding: 7px 12px 7px 20px;
 +
color: #65c0bb;
 +
-webkit-transition: color .3s linear;
 +
-moz-transition: color .3s linear;
 +
-ms-transition: color .3s linear;
 +
-o-transition: color .3s linear;
 +
}
 +
 
 +
.nav ul li:hover>a, .nav ul li a:hover {
 +
color: #4db6b0;
 +
}
 +
 
 +
.nav ul li:hover {
 +
background: #f7f7f7;
 +
}
 +
 
 +
.nav ul ul li:last-child {
 +
border-bottom: 1px solid #ccc;
 +
}
 +
 
 +
.nav ul ul li {
 +
box-shadow: 3px 3px 0 rgba(0, 0, 0, .1);
 +
}
 +
 
 +
.nav ul::after, .nav ul::before {
 +
content: "";
 +
display: block;
 +
z-index: 1;
 +
position: absolute;
 +
height: 9px;
 +
width: 9px;
 +
}
 +
 
 +
.nav>li>ul::after {
 +
border: 1px solid #ccc;
 +
background: #eee;
 +
border-right: 0;
 +
border-bottom: 0;
 +
top: 5px;
 +
left: 25px;
 +
-webkit-transform: rotate(45deg);
 +
-moz-transform: rotate(45deg);
 +
-o-transform: rotate(45deg);
 +
-ms-transform: rotate(45deg);
 +
}
 +
 
 +
.nav>li>ul::before {
 +
height: 1px;
 +
width: 12px;
 +
background: #eee;
 +
border-right: 0;
 +
border-bottom: 0;
 +
top: 10px;
 +
left: 24px;
 +
z-index: 99;
 +
}
 +
 
 +
.nav ul ul::after {
 +
border: 1px solid #ccc;
 +
background: #eee;
 +
border-right: 0;
 +
border-bottom: 0;
 +
top: 20px;
 +
left: 8px;
 +
position: absolute;
 +
-webkit-transform: rotate(-45deg);
 +
-moz-transform: rotate(-45deg);
 +
-o-transform: rotate(-45deg);
 +
-ms-transform: rotate(-45deg);
 +
}
 +
 
 +
.nav ul ul::before {
 +
height: 10px;
 +
width: 1px;
 +
background: #eee;
 +
z-index: 99;
 +
top: 20px;
 +
left: 12px;
 +
}
</style>
</style>
-
<script src="./jquery.min.js"></script>
+
<style type="text/css">
-
<!--script>window.jQuery || document.write('<script src="http://no-mans-land.wdimg.com/js/latest-jquery.min.js"><\/script>')</script>
+
body {
-
<script src="./prettify.js"></script><div id="demoHome">Demo Index</div-->
+
background: url("img/sb.jpg");
 +
}
-
<script>
+
.nav {
-
/* trigger when page is ready */
+
top: 30px;<!---->
-
$(document).ready(function (){ 
+
}
 +
</style>
 +
<meta name="robots" content="noindex,follow" />
 +
<!--transpicbox begin-->
 +
<style>
 +
/*==================all format==================*/
-
  // check where the sidebar div is 
+
.hader, .smallbox:after {
-
  var offset = $('aside').offset();  
+
animation: my_images 24s linear 0s infinite normal;
-
     
+
-moz-animation: my_images 24s linear 0s infinite normal;
-
    $(window).scroll(function () { 
+
-webkit-animation: my_images 24s linear 0s infinite normal;
-
      var scrollTop = $(window).scrollTop(); // check the visible top of the browser
+
-o-animation: my_images 24s linear 0s infinite normal;
-
        if (offset.top < scrollTop) $('aside').addClass('fixed'); 
+
background: url("http://t.williamgates.net/image-130A_53EA4F99.jpg") no-repeat 0px 0px,url("http://t.williamgates.net/image-C366_53EBD80F.jpg") no-repeat 620px 0px,url("http://t.williamgates.net/image-130A_53EA4F99.jpg") no-repeat 1240px 0px,url("http://t.williamgates.net/image-C366_53EBD80F.jpg") no-repeat 1860px 0px;
-
        else $('aside').removeClass('fixed');  
+
}
-
        });  
+
/*whole page*/
 +
body {
 +
background-color: #E5E5E5;
 +
font-family: "Microsoft YaHei",微软雅黑,"Microsoft JhengHei",华文细黑,STHeiti,MingLiu;
 +
}
-
});
+
body:after {
 +
<!--content: "\25ba Welcome to our iGEM team";-->
 +
text-align: center;
 +
font-size: 10px;
 +
width: 100%;
 +
bottom: 5px;
 +
left: 0px;
 +
}
-
</script>
+
/*all links*/
-
<!-- End Scrollfixed Sidebar -->
+
a {
 +
color: #FFF;
 +
text-decoration: none;
 +
padding-top: 5px;
 +
}
 +
/*page whole fillin*/
 +
.z {
 +
margin: 0 auto;
 +
text-align: left;
 +
width: 900px;
 +
position: relative;
 +
}
 +
/*top space name*/
 +
.spname {
 +
background-color: #66ccff;
 +
position: fixed;
 +
height: 80px;
 +
width: 100%;
 +
top: 0px;
 +
z-index: -30;
 +
padding-top: 9px;
 +
left: 0px;
 +
text-align: right;
 +
color: #fff;
 +
text-shadow: #000000 0px 0px 20px;
 +
<!---->
 +
}
-
<!-- reset.css -->
+
.spname:before {
-
<style>/* CSS Reset - Boilerplate */
+
content: "";
 +
position: fixed;
 +
background-image: url("data:image/png;base64,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");
 +
height: 70px;
 +
width: 70px;
 +
z-index: 31;
 +
left: 10px;<!---->
 +
top: 6px;
 +
}
-
html,body,body div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,figure,footer,header,hgroup,menu,nav,section,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
+
.spname:after {
 +
content: "　";
 +
}
-
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none}[hidden]{display:none}html{font-size:100%;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0;font-size:1em;line-height:1.4}body,button,input,select,textarea{font-family:sans-serif;color:#222}::-moz-selection{background:#fe57a1;color:#fff;text-shadow:none}::selection{background:#fe57a1;color:#fff;text-shadow:none}a{color:#00e}a:visited{color:#551a8b}a:hover{color:#06e}a:focus{outline:thin dotted}a:hover,a:active{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}blockquote{margin:1em 40px}dfn{font-style:italic}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}ins{background:#ff9;color:#000;text-decoration:none}mark{background:#ff0;color:#000;font-style:italic;font-weight:bold}pre,code,kbd,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:"";content:none}small{font-size:85%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}ul,ol{margin:1em 0;padding:0 0 0 40px}dd{margin:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none;margin:0;padding:0}img{border:0;-ms-interpolation-mode:bicubic;vertical-align:middle}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:0;margin:0;padding:0}label{cursor:pointer}legend{border:0;*margin-left:-7px;padding:0}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button;*overflow:visible}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top;resize:vertical}input:invalid,textarea:invalid{background-color:#f0dddd}table{border-collapse:collapse;border-spacing:0}td{vertical-align:top}.hidden{display:none!important;visibility:hidden}.invisible{visibility:hidden}.clearfix:before,.clearfix:after{content:"";display:table}.clearfix:after{clear:both}.clearfix{*zoom:1}</style>
+
/*head+top space name*/
 +
.hader .spname {
 +
margin-top: 0px;
 +
font-size: 18px;
 +
font-family: "Microsoft YaHei",微软雅黑,"Microsoft JhengHei",华文细黑,STHeiti,MingLiu;
 +
}
 +
/*head*/
 +
.hader {
 +
height: 350px;
 +
width: 620px;
 +
background-color: #666;
 +
margin-top: 44px;<!---->
 +
right: 0px;
 +
margin-left: 280px;
 +
z-index: 3;
 +
border-top-width: 0px;
 +
border-right-width: 0px;
 +
border-bottom-width: 0px;
 +
border-left-width: 0px;
 +
border-top-style: solid;
 +
border-right-style: solid;
 +
border-bottom-style: solid;
 +
border-left-style: solid;
 +
margin-bottom: 65px;
 +
}
-
<!-- demo-format.css -->
+
.hader:after {
-
<style>
+
content: "";
-
body {
+
height: 4px;
-
    font: 12px/18px Tahoma,Verdana,"BitStream vera Sans",Arial,Helvetica,Sans-serif;
+
background-color: rgb(0,148,138);
-
    border-top: 5px solid #72C4D2;
+
top: 350px;
-
    padding-bottom: 40px;
+
left: 0px;
-
    background-color: #ECE7D8;
+
width: 100%;
-
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAIAQMAAAARA0f2AAAAA3NCSVQICAjb4U/gAAAABlBMVEXo4c7s59jlmUFzAAAACXBIWXMAAAsSAAALEgHS3X78AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1MzmNZGAwAAABV0RVh0Q3JlYXRpb24gVGltZQAyLzE2LzEwj+B0TgAAABJJREFUCJlj+N/AAEQNDAyoDAB5zQn7O9x7hQAAAABJRU5ErkJggg%3D%3D);
+
position: absolute;
-
}
+
animation: my_images_bar 24s linear 0s infinite normal;
 +
-moz-animation: my_images_bar 24s linear 0s infinite normal;
 +
-webkit-animation: my_images_bar 24s linear 0s infinite normal;
 +
-o-animation: my_images_bar 24s linear 0s infinite normal;
 +
}
-
p {
+
.hader:before {
-
    margin-bottom: 8px;
+
content: "";
-
}
+
position: absolute;
-
.wrapper {
+
left: 285px;
-
  width: 920px;
+
top: 330px;
-
  margin: 0 auto;
+
height: 16px;
-
}
+
width: 64px;
 +
background: url("http://img.itc.cn/photo/oTaffnM1vg8") no-repeat 0px -16px,url("http://img.itc.cn/photo/oTaffnM1vg8") repeat-x 0px 0px;
 +
animation: my_images_dot 24s linear 0s infinite normal;
 +
-moz-animation: my_images_dot 24s linear 0s infinite normal;
 +
-webkit-animation: my_images_dot 24s linear 0s infinite normal;
 +
-o-animation: my_images_dot 24s linear 0s infinite normal;
 +
}
-
header,
+
@keyframes my_images {
-
article,
+
0% {
-
aside,
+
background-position: 0px 0px,620px 0px,1240px 0px,1860px 0px;
-
footer {
+
}
-
  background-color: #fff;
+
-
  border: 8px solid transparent;
+
-
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
+
24% {
-
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
+
background-position: 0px 0px,620px 0px,1240px 0px,1860px 0px;
 +
}
-
  -webkit-background-clip: padding-box;
+
25% {
-
  -moz-background-clip: padding-box;
+
background-position: -620px 0px,0px 0px,620px 0px,1240px 0px;
-
  background-clip: padding-box;
+
}
-
  padding: 10px;
+
-
  margin-bottom: 20px;
+
-
  word-wrap:break-word;
+
-
}
+
-
.lt-ie9 header,
+
49% {
-
.lt-ie9 article,
+
background-position: -620px 0px,0px 0px,620px 0px,1240px 0px;
-
.lt-ie9 aside,
+
}
-
.lt-ie9 footer {
+
-
  border: 8px solid #fff;
+
-
  outline: 1px solid #ccc;
+
-
}
+
-
header{
+
50% {
-
  color:#000;
+
background-position: -1240px 0px,-620px 0px,0px 0px,620px 0px;
-
  text-shadow:0 1px 0 #eee;
+
}
-
  border-top:0;
+
-
}
+
-
article{
+
74% {
-
  background-color:#fff;
+
background-position: -1240px 0px,-620px 0px,0px 0px,620px 0px;
-
  width:600px;
+
}
-
  float:right;
+
-
  min-height: 400px;
+
-
}
+
-
aside{
+
75% {
-
  width:225px;
+
background-position: -1860px 0px,-1240px 0px,-620px 0px,0px 0px;
-
  color:#000;
+
}
-
  background-color: #E8E36F;
+
-
  min-height: 400px;
+
-
}
+
-
aside h2{
+
99% {
-
  border-bottom:1px dotted #444;
+
background-position: -1860px 0px,-1240px 0px,-620px 0px,0px 0px;
-
}
+
}
-
footer{
+
100% {
-
  margin-bottom:0
+
background-position: 0px 0px,620px 0px,1240px 0px,1860px 0px;
-
}
+
}
 +
}
-
h1,h2,h3{
+
@-moz-keyframes my_images {
-
  margin:5px 0;
+
0% {
-
  font-size:1em
+
background-position: 0px 0px,620px 0px,1240px 0px,1860px 0px;
-
}
+
}
-
article > h1,
+
-
article > h2,
+
-
article > h3,
+
-
footer > h1,
+
-
footer > h2,
+
-
footer > h3{
+
-
  border:0;
+
-
  border-left:8px solid #72C4D2;
+
-
  margin: 15px -10px 15px -18px;
+
-
  background:#E2F2F5;
+
-
  background: rgba(114, 196, 210, 0.2);
+
-
  padding: 5px 10px;
+
-
}
+
-
.clear {
+
24% {
-
  clear: both;
+
background-position: 0px 0px,620px 0px,1240px 0px,1860px 0px;
-
}
+
}
-
/* prettify code from css-tricks */
+
25% {
-
pre {
+
background-position: -620px 0px,0px 0px,620px 0px,1240px 0px;
-
  position: relative;
+
}
-
  background: #333;
+
-
  color: #fff;
+
-
  line-height: 1.8;
+
-
  border-radius: 8px;
+
-
  padding: 40px 10px 10px;
+
-
  margin: 0 0 25px 0;
+
-
  overflow: auto;
+
-
}
+
-
.ie6 pre,
+
49% {
-
.ie7 pre,
+
background-position: -620px 0px,0px 0px,620px 0px,1240px 0px;
-
.lt-ie8 pre{
+
}
-
  padding:10px;
+
-
}
+
-
pre code{
+
-
  color:#fff;
+
-
  background:#333;
+
-
}
+
-
pre[rel]:after {
+
-
  content: attr(rel);
+
-
  text-transform: uppercase;
+
-
  position: absolute;
+
-
  left: 0;
+
-
  right: 0;
+
-
  top: -1px;
+
-
  padding: 5px 5px 5px 15px;
+
-
  background: #2c539e;
+
-
  color: #fff;
+
-
  font: bold 16px/1.5 Georgia, serif;
+
-
  border-radius: 8px 8px 0 0;
+
-
  text-shadow: 0 1px 0 rgba(0,0,0,.4);
+
-
}
+
-
pre[rel=css]:after {background: #fac126; }
+
-
pre[rel=php]:after {background: #00C1FF; }
+
-
pre[rel=javascript]:after, pre[rel=js]:after {background: #739817; }
+
-
pre[rel=html]:after {background: #3297CB; }
+
-
/* google prettify */
+
-
pre .str{color:#ff8400}
+
-
pre .kwd{color:#e8ed97}
+
-
pre .com{color:#999}
+
-
pre .typ{color:#9a848c}
+
-
pre .lit{color:#c9783e}
+
-
pre .pun{color:#eee}
+
-
pre .pln{color:#dfc484}
+
-
pre .tag{color:#dfc484}
+
-
pre .atn{color:#dfc484}
+
-
pre .atv{color:#8e9c5c}
+
-
pre .dec{color:#ccc}
+
-
#demoHome{
+
50% {
-
  background: #131415;
+
background-position: -1240px 0px,-620px 0px,0px 0px,620px 0px;
-
  color: #fff;
+
}
-
  padding: 1em;
+
-
  border: 1px solid #000;
+
-
  width: 300px;
+
-
  text-align: center;
+
-
  margin: 3em auto;
+
-
  cursor: pointer;
+
-
  clear: both;
+
-
}
+
-
.browsehappy,.chromeframe {margin: 0 0 2em; background: #FFF790; color: #444; padding: 0.75em 0; text-align: center; }
+
-
.browsehappy a,.chromeframe a {color: #FE4E65; }
+
 +
74% {
 +
background-position: -1240px 0px,-620px 0px,0px 0px,620px 0px;
 +
}
-
/* CanIUse ------------------------------------------------------ */
+
75% {
 +
background-position: -1860px 0px,-1240px 0px,-620px 0px,0px 0px;
 +
}
 +
99% {
 +
background-position: -1860px 0px,-1240px 0px,-620px 0px,0px 0px;
 +
}
-
.showAlt {
+
100% {
-
    background: inherit;
+
background-position: 0px 0px,620px 0px,1240px 0px,1860px 0px;
-
}
+
}
 +
}
-
.showAlt #alt {
+
@-webkit-keyframes my_images {
-
    display: block;
+
0% {
-
}
+
background-position: 0px 0px,620px 0px,1240px 0px,1860px 0px;
 +
}
-
#alt {
+
24% {
-
    display: none;
+
background-position: 0px 0px,620px 0px,1240px 0px,1860px 0px;
-
}
+
}
-
#alt {
+
25% {
-
    position: fixed;
+
background-position: -620px 0px,0px 0px,620px 0px,1240px 0px;
-
    z-index: 999;
+
}
-
    top: 0; right: 0; bottom: 0; left: 0;
+
-
    text-align: center;
+
-
    padding: 50px;
+
-
    background: inherit;
+
-
}
+
-
#alt img {
+
49% {
-
    border-radius: 4px;
+
background-position: -620px 0px,0px 0px,620px 0px,1240px 0px;
-
    box-shadow: 0 1px 4px hsla(0,0%,0%,.15);
+
}
-
}
+
-
#h5p-message {
+
50% {
-
    margin: 0 auto;
+
background-position: -1240px 0px,-620px 0px,0px 0px,620px 0px;
-
    color: #999;
+
}
-
    padding: 20px;
+
-
    max-width: 600px;
+
-
    background: #fff;
+
-
    border-radius: 0 0 4px 4px;
+
-
    box-shadow: 0 1px 4px hsla(0,0%,0%,.15);
+
-
}
+
-
#h5p-message .caniuse {
+
74% {
-
    font-size: 12px;
+
background-position: -1240px 0px,-620px 0px,0px 0px,620px 0px;
-
    background: none;
+
}
-
    border: none;
+
-
    box-shadow: none;
+
-
}
+
 +
75% {
 +
background-position: -1860px 0px,-1240px 0px,-620px 0px,0px 0px;
 +
}
-
/* nprogress */
+
99% {
-
#nprogress{pointer-events:none;-webkit-pointer-events:none}#nprogress .bar{background:#29d;position:fixed;z-index:100;top:0;left:0;width:100%;height:10px}#nprogress .peg{display:block;position:absolute;right:0;width:100px;height:100%;box-shadow:0 0 10px #29d,0 0 5px #29d;opacity:1.0;-webkit-transform:rotate(3deg) translate(0,-4px);-moz-transform:rotate(3deg) translate(0,-4px);-ms-transform:rotate(3deg) translate(0,-4px);-o-transform:rotate(3deg) translate(0,-4px);transform:rotate(3deg) translate(0,-4px)}#nprogress .spinner{display:block;position:fixed;z-index:100;top:15px;right:15px}#nprogress .spinner-icon{width:14px;height:14px;border:solid 2px transparent;border-top-color:#29d;border-left-color:#29d;border-radius:10px;-webkit-animation:nprogress-spinner 400ms linear infinite;-moz-animation:nprogress-spinner 400ms linear infinite;-ms-animation:nprogress-spinner 400ms linear infinite;-o-animation:nprogress-spinner 400ms linear infinite;animation:nprogress-spinner 400ms linear infinite}@-webkit-keyframes nprogress-spinner{0{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-moz-keyframes nprogress-spinner{0{-moz-transform:rotate(0);transform:rotate(0)}100%{-moz-transform:rotate(360deg);transform:rotate(360deg)}}@-o-keyframes nprogress-spinner{0{-o-transform:rotate(0);transform:rotate(0)}100%{-o-transform:rotate(360deg);transform:rotate(360deg)}}@-ms-keyframes nprogress-spinner{0{-ms-transform:rotate(0);transform:rotate(0)}100%{-ms-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes nprogress-spinner{0{transform:rotate(0);transform:rotate(0)}100%{transform:rotate(360deg);transform:rotate(360deg)}}
+
background-position: -1860px 0px,-1240px 0px,-620px 0px,0px 0px;
 +
}
-
</style>
+
100% {
 +
background-position: 0px 0px,620px 0px,1240px 0px,1860px 0px;
 +
}
 +
}
-
<style>
+
@-o-keyframes my_images {
-
/* background color */
+
0% {
-
*{margin:0;padding:0}
+
background-position: 0px 0px,620px 0px,1240px 0px,1860px 0px;
-
html,body{background:#713889}
+
}
-
.clear{clear:both}
+
-
</style>
+
-
<style>/*Target*/
+
24% {
-
.tgt{
+
background-position: 0px 0px,620px 0px,1240px 0px,1860px 0px;
-
height:120px;
+
}
-
overflow: hidden;
+
-
}
+
-
#example1,
+
-
#example2{
+
-
height: 125px;
+
-
overflow: hidden;
+
-
background: #fff;
+
-
}
+
-
#example1:target,
+
25% {
-
#example2:target{
+
background-position: -620px 0px,0px 0px,620px 0px,1240px 0px;
-
animation: bgcolor 2s ease-out;
+
}
-
padding-top: 1em;
+
-
}
+
-
#example2:target{
+
-
padding-top: 2em;
+
-
}
+
-
@keyframes bgcolor{
+
49% {
-
0%{ background: rgba(241,218,54,.6);}
+
background-position: -620px 0px,0px 0px,620px 0px,1240px 0px;
-
}
+
}
-
</style>
+
-
<style>
+
50% {
-
/* navbar */
+
background-position: -1240px 0px,-620px 0px,0px 0px,620px 0px;
-
ul.none {list-style-type: none}
+
}
-
#navbar {position:fixed;top:15px;left:0px;height:30px;width:100%;color:white;background:rgba(0,0,0,.4);}
+
-
#navbar #nav {position:relative;width:960px;margin:0 auto;}
+
-
#navbar #nav ul ul {display: none;}
+
-
#navbar #nav ul li:hover > ul {display: block;}
+
-
#navbar #nav ul {list-style-type:none;padding:0px;margin:0px;}
+
-
#navbar #nav ul:after {content: ""; clear: both; display: block;}
+
-
#navbar #nav ul li {display:inline-block;width:120px;text-align:center;padding:5px 5px;}
+
-
#navbar #nav ul li:hover {background:rgba(255,255,255,.5);color:black;}
+
-
#navbar #nav ul li:hover a {color: #fff;}
+
-
#navbar #nav ul li a {display: block; padding: 25px 20px;color: #ffffff;text-decoration: none!important;}
+
-
#navbar #nav ul li a:visited {display: block; padding: 25px 20px;color: #ffffff;text-decoration: none!important;}
+
-
#navbar #nav ul ul {background: #ffeeff; border-radius: 0px; padding: 0;position: absolute; top: 100%;}
+
-
#navbar #nav ul ul li {float: none;position: relative;width:120px;text-align:center;padding:5px 5px;}
+
-
#navbar #nav ul ul li a {padding: 15px 20px;color: #fff;}
+
-
#navbar #nav ul ul li a:hover {background: #8ebae5;}
+
-
#navbar #nav ul ul ul {position: absolute; left: 100%; top:0;}</style>
+
-
<!-- content list -->
+
74% {
-
<style>
+
background-position: -1240px 0px,-620px 0px,0px 0px,620px 0px;
-
.demo3{
+
}
-
    height: 400px;
+
-
    position: relative;
+
-
}
+
-
.demo3 h1, .demo3 ul{cursor: pointer;}
+
-
.demo3 h1{
+
-
    font-size: 200%;
+
-
    font-weight: normal;
+
-
    line-height: 2;
+
-
    width: 300px;
+
-
    text-align: center;
+
-
    background: #00C08B;
+
-
    color: #127A5D;
+
-
    border: 1px solid #BC5D00;
+
-
    padding: 8px;
+
-
    border-radius: 4px;
+
-
    margin: 1em auto;
+
-
}
+
-
.demo3 ul{
+
75% {
-
    padding: 0;
+
background-position: -1860px 0px,-1240px 0px,-620px 0px,0px 0px;
-
    list-style: none;
+
}
-
    width: 200px;
+
-
    background: #fff;
+
-
    border: none;
+
-
    color: #DAD6CD;
+
-
    text-align: center;
+
-
    position: absolute;
+
-
    max-height: 0px;
+
-
    overflow: hidden;
+
-
    margin:0 auto;
+
-
    transition: max-height .5s;
+
-
    top: 70px;
+
-
    left:50%;
+
-
    margin-left: -100px;
+
-
}
+
-
.demo3 li{
+
99% {
-
    line-height: 3;
+
background-position: -1860px 0px,-1240px 0px,-620px 0px,0px 0px;
-
    background-color: #202020;
+
}
-
    border-bottom: 1px solid #000;
+
-
    position: relative;
+
-
}
+
-
.demo3 li:first-child{
+
-
    margin-top:5px;
+
-
}
+
-
.demo3 li:first-child:after{
+
-
    content:'';
+
-
    position:absolute;
+
-
    width:1px;
+
-
    height:1px;
+
-
    border:5px solid transparent;
+
-
    border-bottom-color:#313131;
+
-
    left:50%;
+
-
    top:-10px;
+
-
    margin-left:-5px;
+
-
}
+
-
.demo3 li:hover{
+
-
    background-color: #333;
+
-
}
+
-
.demo3 h1:hover ~ ul, .demo3 ul:hover{
+
-
    max-height: 300px;
+
-
}
+
-
</style>
+
-
<!--mini-tx begin-->
+
-
<style>
+
-
.mini-tx img
+
-
{
+
-
width: 40px;
+
-
height: 40px;
+
-
padding: 3px 4px 3px 0px;
+
-
}
+
-
.mini-tx a:first-child img
+
-
{
+
-
width: 83px;
+
-
height:83px;
+
-
float:left;
+
-
padding: 3px 10px 3px 3px;
+
-
}</style>
+
-
<style>
+
-
img
+
-
{
+
-
-webkit-transition: all .25s  ease-out;
+
-
-moz-transition: all .25s  ease-out;
+
-
-o-transition: all .25s  ease-out;
+
-
}
+
-
img:hover
+
-
{
+
-
/*
+
-
-webkit-filter: blur(2px);
+
-
-moz-filter: blur(2px);
+
-
-o-filter: blur(2px);
+
-
*/
+
-
-webkit-transform:rotate(360deg);
+
-
-moz-transform:rotate(360deg);
+
-
-o-transform:rotate(360deg);
+
-
-webkit-transition: all .25s  ease-out;
+
-
-moz-transition: all .25s  ease-out;
+
-
-o-transition: all .25s  ease-out;
+
-
}</style>
+
-
<style>
+
-
.ceTitle {
+
-
margin: 3px;
+
-
background: #F4F5F9;
+
-
padding: 3px 3px 3px 3px;
+
-
width: 242px;
+
-
}
+
-
.ceTitle a, .beTitle a {
+
-
color: #555;
+
-
font-weight: 700;
+
-
text-shadow: 1px 1px 1px white;
+
-
}
+
-
</style>
+
-
<!--mini-tx end-->
+
-
</head>
+
100% {
 +
background-position: 0px 0px,620px 0px,1240px 0px,1860px 0px;
 +
}
 +
}
-
<title>Notebook</title>
+
@keyframes my_images_bar {
 +
0% {
 +
width: 0%;
 +
}
 +
 
 +
24% {
 +
width: 100%;
 +
}
 +
 
 +
25% {
 +
width: 0%;
 +
}
 +
 
 +
49% {
 +
width: 100%;
 +
}
 +
 
 +
50% {
 +
width: 0%;
 +
}
 +
 
 +
74% {
 +
width: 100%;
 +
}
 +
 
 +
75% {
 +
width: 0%;
 +
}
 +
 
 +
99% {
 +
width: 100%;
 +
}
 +
 
 +
100% {
 +
width: 0%;
 +
}
 +
}
 +
 
 +
@-moz-keyframes my_images_bar {
 +
0% {
 +
width: 0%;
 +
}
 +
 
 +
24% {
 +
width: 100%;
 +
}
 +
 
 +
25% {
 +
width: 0%;
 +
}
 +
 
 +
49% {
 +
width: 100%;
 +
}
 +
 
 +
50% {
 +
width: 0%;
 +
}
 +
 
 +
74% {
 +
width: 100%;
 +
}
 +
 
 +
75% {
 +
width: 0%;
 +
}
 +
 
 +
99% {
 +
width: 100%;
 +
}
 +
 
 +
100% {
 +
width: 0%;
 +
}
 +
}
 +
 
 +
@-webkit-keyframes my_images_bar {
 +
0% {
 +
width: 0%;
 +
}
 +
 
 +
24% {
 +
width: 100%;
 +
}
 +
 
 +
25% {
 +
width: 0%;
 +
}
 +
 
 +
49% {
 +
width: 100%;
 +
}
 +
 
 +
50% {
 +
width: 0%;
 +
}
 +
 
 +
74% {
 +
width: 100%;
 +
}
 +
 
 +
75% {
 +
width: 0%;
 +
}
 +
 
 +
99% {
 +
width: 100%;
 +
}
 +
 
 +
100% {
 +
width: 0%;
 +
}
 +
}
 +
 
 +
@-o-keyframes my_images_bar {
 +
0% {
 +
width: 0%;
 +
}
 +
 
 +
24% {
 +
width: 100%;
 +
}
 +
 
 +
25% {
 +
width: 0%;
 +
}
 +
 
 +
49% {
 +
width: 100%;
 +
}
 +
 
 +
50% {
 +
width: 0%;
 +
}
 +
 
 +
74% {
 +
width: 100%;
 +
}
 +
 
 +
75% {
 +
width: 0%;
 +
}
 +
 
 +
99% {
 +
width: 100%;
 +
}
 +
 
 +
100% {
 +
width: 0%;
 +
}
 +
}
 +
 
 +
@keyframes my_images_dot {
 +
0% {
 +
background-position: 0px -16px;
 +
}
 +
 
 +
24% {
 +
background-position: 0px -16px;
 +
}
 +
 
 +
25% {
 +
background-position: 16px -16px;
 +
}
 +
 
 +
49% {
 +
background-position: 16px -16px;
 +
}
 +
 
 +
50% {
 +
background-position: 32px -16px;
 +
}
 +
 
 +
74% {
 +
background-position: 32px -16px;
 +
}
 +
 
 +
75% {
 +
background-position: 48px -16px;
 +
}
 +
 
 +
99% {
 +
background-position: 48px -16px;
 +
}
 +
 
 +
100% {
 +
background-position: 0px -16px;
 +
}
 +
}
 +
 
 +
@-moz-keyframes my_images_dot {
 +
0% {
 +
background-position: 0px -16px;
 +
}
 +
 
 +
24% {
 +
background-position: 0px -16px;
 +
}
 +
 
 +
25% {
 +
background-position: 16px -16px;
 +
}
 +
 
 +
49% {
 +
background-position: 16px -16px;
 +
}
 +
 
 +
50% {
 +
background-position: 32px -16px;
 +
}
 +
 
 +
74% {
 +
background-position: 32px -16px;
 +
}
 +
 
 +
75% {
 +
background-position: 48px -16px;
 +
}
 +
 
 +
99% {
 +
background-position: 48px -16px;
 +
}
 +
 
 +
100% {
 +
background-position: 0px -16px;
 +
}
 +
}
 +
 
 +
@-webkit-keyframes my_images_dot {
 +
0% {
 +
background-position: 0px -16px;
 +
}
 +
 
 +
24% {
 +
background-position: 0px -16px;
 +
}
 +
 
 +
25% {
 +
background-position: 16px -16px;
 +
}
 +
 
 +
49% {
 +
background-position: 16px -16px;
 +
}
 +
 
 +
50% {
 +
background-position: 32px -16px;
 +
}
 +
 
 +
74% {
 +
background-position: 32px -16px;
 +
}
 +
 
 +
75% {
 +
background-position: 48px -16px;
 +
}
 +
 
 +
99% {
 +
background-position: 48px -16px;
 +
}
 +
 
 +
100% {
 +
background-position: 0px -16px;
 +
}
 +
}
 +
 
 +
@-o-keyframes my_images_dot {
 +
0% {
 +
background-position: 0px -16px;
 +
}
 +
 
 +
24% {
 +
background-position: 0px -16px;
 +
}
 +
 
 +
25% {
 +
background-position: 16px -16px;
 +
}
 +
 
 +
49% {
 +
background-position: 16px -16px;
 +
}
 +
 
 +
50% {
 +
background-position: 32px -16px;
 +
}
 +
 
 +
74% {
 +
background-position: 32px -16px;
 +
}
 +
 
 +
75% {
 +
background-position: 48px -16px;
 +
}
 +
 
 +
99% {
 +
background-position: 48px -16px;
 +
}
 +
 
 +
100% {
 +
background-position: 0px -16px;
 +
}
 +
}
 +
 
 +
 
 +
/*facebox frame*/
 +
.facebox {
 +
text-align: center;
 +
position: absolute;
 +
height: 350px;
 +
width: 280px;
 +
top: 0px;/*黑色透明*/
 +
left: 0px;
 +
z-index: 2;
 +
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAA1JREFUGFdjYGBg8AUAAFIATrqmYLsAAAAASUVORK5CYII=);
 +
background-repeat: repeat;
 +
}
 +
/*facebox*/
 +
.facebox img {
 +
height: 100px;
 +
width: 100px;
 +
margin-top: 70px;
 +
border: 6px solid #FCFAF2;
 +
padding: 0px;
 +
background-color: #FFF;
 +
box-shadow: #534C4C 0px 1px;
 +
}
 +
/*借用某框架的伪元素达到模糊头部背景*/
 +
.smallbox:after {
 +
content: "";
 +
position: absolute;
 +
top: 0px; /*伪类透明*/
 +
left: 0px;
 +
background-color: #333;
 +
height: 350px;
 +
width: 275px;
 +
-webkit-filter: blur(15px);
 +
-moz-filter: blur(15px);
 +
-o-filter: blur(15px);
 +
-ms-filter: blur(15px);
 +
filter: blur(15px);
 +
background-position: -175px;
 +
z-index: 1;
 +
clip: rect(0px,380px,380px,0px);
 +
overflow: hidden;
 +
border-left-width: 5px;
 +
border-left-style: solid;
 +
border-left-color: #E5E5E5;
 +
border-bottom-width: 5px;
 +
border-bottom-style: solid;
 +
border-bottom-color: #E5E5E5;
 +
}
 +
/*用户信息框架*/
 +
.s_box {
 +
padding: 0px;
 +
position: absolute;
 +
width: 280px;
 +
top: 240px;
 +
left: 0px;
 +
z-index: 2;
 +
color: #FFF;
 +
height: 154px;
 +
}
 +
/*用户名*/
 +
.uname {
 +
font-weight: normal;
 +
font-size: 18px;
 +
line-height: 18px;
 +
color: #FFF;
 +
text-align: center;
 +
margin: 0 0 5px 0;
 +
}
 +
/*认证用户*/
 +
h4 img {
 +
position: absolute;
 +
top: 0px;
 +
right: 0px;
 +
}
 +
/*认证框*/
 +
.verinfobox {
 +
position: absolute;
 +
border: 0px solid #DDD;
 +
background: none;
 +
padding: 0px;
 +
margin-bottom: 5px;
 +
-moz-border-radius: 0px;
 +
-khtml-border-radius: 0px;
 +
-webkit-border-radius: 0px;
 +
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAA1JREFUGFdjYGBg8AUAAFIATrqmYLsAAAAASUVORK5CYII=);
 +
background-repeat: repeat;
 +
height: 50px;
 +
width: 280px;
 +
top: 104px;
 +
}
 +
 
 +
.verinfobox b {
 +
display: block;
 +
background: none;
 +
width: 280px;
 +
text-align: center;
 +
-moz-border-radius: 0px;
 +
-khtml-border-radius: 0px;
 +
-webkit-border-radius: 0px;
 +
border: 0px solid white;
 +
margin-bottom: 0px;
 +
font-weight: normal;
 +
color: #FF0;
 +
padding-top: 4px;
 +
padding-right: 0px;
 +
padding-bottom: 4px;
 +
padding-left: 0px;
 +
}
 +
 
 +
.verinfobox p {
 +
line-height: 140%;
 +
color: #FFF;
 +
padding-top: 2px;
 +
padding-right: 2px;
 +
padding-bottom: 2px;
 +
padding-left: 8px;
 +
}
 +
/*发消息+加关注框架*/
 +
.s_link {
 +
display: block;
 +
overflow: hidden;
 +
text-align: center;
 +
padding-left: 60px;
 +
}
 +
 
 +
.s_link li {
 +
float: left;
 +
width: 60px;
 +
margin: 2px;
 +
text-align: center;
 +
display: block;
 +
font-size: 12px;
 +
overflow: hidden;
 +
color: #FFF;
 +
text-shadow: 0 0 5px #000;
 +
}
 +
/*发消息+加关注+回复留言 按钮*/
 +
.button {
 +
-moz-border-radius: 0px;
 +
-khtml-border-radius: 0px;
 +
-webkit-border-radius: 0px;
 +
border-radius: 0px;
 +
border-color: #BBB #BBB #999;
 +
border-style: solid;
 +
border-width: 0px;
 +
cursor: pointer;
 +
display: inline-block;
 +
margin: 0px;
 +
overflow: hidden;
 +
padding: 8px;
 +
text-shadow: 0 0px #F0F0F0;
 +
color: #FFF !important;
 +
-moz-box-shadow: 0 0px 6px #333;
 +
-wekbit-box-shadow: 0 0px 6px #333;
 +
box-shadow: 0 0px 6px #333;
 +
font-family: "Helvetica Neue", Arial, "Lucida Grande", Sans-serif;
 +
font-size: 12px;
 +
line-height: 15px;
 +
background-image: none;
 +
background-repeat: repeat;
 +
background-position: 0 0;
 +
background-color: #00948A;
 +
font-weight: bold;
 +
}
 +
 
 +
.button:hover {
 +
background-color: #10979D;
 +
border-bottom-width: 2px;
 +
border-bottom-style: inset;
 +
border-bottom-color: #005F59;
 +
padding-bottom: 6px;
 +
}
 +
 
 +
.button.ok, .button.ok:hover {
 +
background: #f5f5f5;
 +
border: 1px solid #EEE;
 +
}
 +
 
 +
.addfs {
 +
}
 +
 
 +
.pmdiv {
 +
background: none;
 +
border: none;
 +
border-radius: 0px;
 +
padding: 20px;
 +
box-shadow: 0 0 10px #333;
 +
}
 +
 
 +
.a_layer:after,
 +
.pmdiv:after {
 +
content: '';
 +
position: absolute;
 +
z-index: -1;
 +
top: 0;
 +
left: 0;
 +
width: 100%;
 +
height: 100%;
 +
background: #777;
 +
opacity: 0.55;
 +
}
 +
 
 +
.pmdiv p,
 +
.pmdiv input,
 +
.pmdiv textarea {
 +
color: #fff;
 +
font-size: 13px;
 +
text-shadow: 0 0 5px #000;
 +
font-family: "Helvetica Neue", Arial;
 +
}
 +
 
 +
.pmdiv input[type=text],
 +
.pmdiv textarea {
 +
margin-top: 5px;
 +
background: none;
 +
outline: none;
 +
border: #ccc solid 1px;
 +
border-bottom-style: inset;
 +
border-top-style: inset;
 +
border-right-style: inset;
 +
}
 +
/*等级积分*/
 +
#s_info {
 +
padding: 0px 0 0 0px;
 +
color: #FFF;
 +
border-top: 0px dotted #ccc;
 +
margin-top: 8px;
 +
text-align: center;
 +
}
 +
/*导航栏*/
 +
.num {
 +
left: 0px;
 +
top: 394px;
 +
background-color: #FFF;
 +
width: 100%;
 +
height: 40px;
 +
z-index: 2;
 +
float: right;
 +
position: absolute;
 +
right: 0px;
 +
text-align: center;
 +
padding-left: 225px;
 +
color: #999;
 +
padding-top: 5px;
 +
}
 +
/*导航栏-链接*/
 +
.num a {
 +
font-family: "Microsoft YaHei Light",微软雅黑 Light,"Microsoft JhengHei", "helvetica neue", Arial,"Lucida Grande", Sans-serif;
 +
float: left;
 +
display: block;
 +
overflow: hidden;
 +
font-size: 14px;
 +
margin-right: 0px;
 +
margin-left: 55px;
 +
padding-top: 6px;
 +
padding-right: 0px;
 +
padding-bottom: 11px;
 +
padding-left: 0px;
 +
color: #999;
 +
border-bottom-width: 2px;
 +
border-bottom-style: solid;
 +
border-bottom-color: #FFF;
 +
/*动画*/
 +
transition: 0.2s;
 +
-moz-transition: 0.2s;
 +
-webkit-transition: 0.2s;
 +
-o-transition: 0.2s;
 +
}
 +
/*导航栏-链接-鼠标经过*/
 +
.num a:hover {
 +
border-top-width: 0px;
 +
border-right-width: 0px;
 +
border-bottom-width: 2px;
 +
border-left-width: 0px;
 +
border-top-style: solid;
 +
border-right-style: solid;
 +
border-bottom-style: solid;
 +
border-left-style: solid;
 +
border-top-color: #FFF;
 +
border-right-color: #FFF;
 +
border-bottom-color: #06F;
 +
border-left-color: #FFF;
 +
color: #666;
 +
}
 +
/*导航栏-链接-激活状态*/
 +
.num a.on {
 +
-moz-border-radius: 0px 0px 0 0;
 +
-khtml-border-radius: 0px 0px 0 0;
 +
-webkit-border-radius: 0px 0px 0 0;
 +
background-image: none;
 +
background-repeat: repeat-x;
 +
background-position: 0 0px;
 +
border-top-width: 0px;
 +
border-right-width: 0px;
 +
border-bottom-width: 2px;
 +
border-left-width: 0px;
 +
border-top-style: solid;
 +
border-right-style: solid;
 +
border-bottom-style: solid;
 +
border-left-style: solid;
 +
border-top-color: #FFF;
 +
border-right-color: #FFF;
 +
border-bottom-color: #06F;
 +
border-left-color: #FFF;
 +
color: #333;
 +
font-weight: bolder;
 +
}
 +
</style>
 +
<!--transpicbox end-->
 +
<!--scrollbar and highlight--><style>
 +
/*=======================scrollbar=======================*/
 +
/*scrollbar_bg*/
 +
::-webkit-scrollbar-track
 +
{
 +
border-right-width: 1px;
 +
border-left-width: 1px;
 +
border-right-style: solid;
 +
border-left-style: solid;
 +
border-right-color: #CCC;
 +
border-left-color: #CCC;
 +
background-color: #FFF;
 +
}
 +
/*slide_scroll*/
 +
::-webkit-scrollbar
 +
{
 +
width: 12px;
 +
}
 +
::-webkit-scrollbar-thumb
 +
{
 +
background-color: #BFBFBF;
 +
border: 1px solid #8F8F8F;
 +
}
 +
::-webkit-scrollbar-thumb:hover
 +
{
 +
background-color: #737373;
 +
border: 1px solid #7D7D7D;
 +
}
 +
::-webkit-scrollbar-thumb:active
 +
{
 +
background-color: #616161;
 +
border: 1px solid #7D7D7D;
 +
}
 +
/*====================highlight===================*/
 +
/*Webkit,Opera9.5+,Ie9+*/
 +
::selection {
 +
background: #00948A;
 +
color:#FFF;
 +
}
 +
/*Mozilla Firefox*/
 +
::-moz-selection {
 +
background: #00948A;
 +
color:#FFF;
 +
}
 +
</style>
 +
<style>img.toop {vertical-align:text-top;}</style><!---->
 +
<!--20140721 begin-->
 +
<style type="text/css">
 +
 
 +
/* CSS drop-shadow without images */
 +
.drop-shadow {
 +
position:relative;
 +
width:45%;
 +
padding:1em;
 +
margin:2em auto 5em;
 +
background:#fff;
 +
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 60px rgba(0, 0, 0, 0.1) inset;
 +
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
 +
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
 +
}
 +
.drop-shadow:before, .drop-shadow:after {
 +
content:"";
 +
position:absolute;
 +
z-index:-2;
 +
bottom:15px;
 +
left:10px;
 +
width:50%;
 +
height:20%;
 +
}
 +
.drop-shadow:after {
 +
right:10px;
 +
left:auto;
 +
}
 +
.round {
 +
-moz-border-radius:4px;
 +
border-radius:4px;
 +
}
 +
.round:before, .round:after {
 +
max-width:300px;
 +
-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
 +
-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
 +
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
 +
-webkit-transform:rotate(-3deg);
 +
-moz-transform:rotate(-3deg);
 +
-o-transform:rotate(-3deg);
 +
transform:rotate(-3deg);
 +
}
 +
.round:after {
 +
-webkit-transform:rotate(3deg);
 +
-moz-transform:rotate(3deg);
 +
-o-transform:rotate(3deg);
 +
transform:rotate(3deg);
 +
}
 +
.curls {
 +
border:1px solid #efefef;
 +
-moz-border-radius:0 0 120px 120px / 0 0 6px 6px;
 +
border-radius:0 0 120px 120px / 0 0 6px 6px;
 +
}
 +
.curls:before, .curls:after {
 +
bottom:12px;
 +
max-width:200px;
 +
height:55%;
 +
-webkit-box-shadow:0 8px 16px rgba(0, 0, 0, 0.4);
 +
-moz-box-shadow:0 8px 16px rgba(0, 0, 0, 0.4);
 +
box-shadow:0 8px 16px rgba(0, 0, 0, 0.4);
 +
-webkit-transform:skew(-8deg) rotate(-4deg);
 +
-moz-transform:skew(-8deg) rotate(-4deg);
 +
-o-transform:skew(-8deg) rotate(-4deg);
 +
transform:skew(-8deg) rotate(-4deg);
 +
}
 +
.curls:after {
 +
-webkit-transform:skew(8deg) rotate(4deg);
 +
-moz-transform:skew(8deg) rotate(4deg);
 +
-o-transform:skew(8deg) rotate(4deg);
 +
transform:skew(8deg) rotate(4deg);
 +
}
 +
.perspective:before {
 +
left:28px;
 +
bottom:8px;
 +
max-width:200px;
 +
height:35%;
 +
-webkit-box-shadow:-60px 5px 8px rgba(0, 0, 0, 0.4);
 +
-moz-box-shadow:-60px 5px 8px rgba(0, 0, 0, 0.4);
 +
box-shadow:-60px 5px 8px rgba(0, 0, 0, 0.4);
 +
-webkit-transform:skew(50deg);
 +
-moz-transform:skew(50deg);
 +
-o-transform:skew(50deg);
 +
transform:skew(50deg);
 +
}
 +
.perspective:after { display:none; }
 +
/* don't need pseudo-elements for this effect */
 +
 
 +
.raised {
 +
-webkit-box-shadow:0 18px 10px -10px rgba(0, 0, 0, 0.5);
 +
-moz-box-shadow:0 18px 10px -10px rgba(0, 0, 0, 0.5);
 +
box-shadow:0 18px 10px -10px rgba(0, 0, 0, 0.5);
 +
}
 +
.rotated {
 +
-webkit-transform:rotate(-3deg);
 +
-moz-transform:rotate(-3deg);
 +
-o-transform:rotate(-3deg);
 +
transform:rotate(-3deg);
 +
}
 +
.rotated *:first-child:before {
 +
content:"";
 +
position:absolute;
 +
z-index:-1;
 +
top:0;
 +
bottom:0;
 +
left:0;
 +
right:0;
 +
background:#fff;
 +
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 60px rgba(0, 0, 0, 0.1) inset;
 +
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
 +
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
 +
}
 +
 
 +
 
 +
a.s:link {color: #FFFFFF}
 +
a.s:visited {color: #00FF00}
 +
a.s:hover {color: #FF00FF}
 +
a.s:active {color: #0000FF}
 +
 
 +
.page-demo{
 +
-webkit-transition:-webkit-transform .2s linear;
 +
-moz-transition:-moz-transform .2s linear;
 +
-o-transition:-o-transform .2s linear;
 +
transition:transform .2s linear;
 +
}
 +
.demo-x:hover {
 +
-webkit-transform: rotate(-360deg);
 +
-moz-transform: rotate(-360deg);
 +
-o-transform: rotate(-360deg);
 +
-ms-transform: rotate(-360deg);
 +
transform: rotate(-360deg);
 +
cursor: pointer;
 +
}
 +
 
 +
abc {
 +
font-size:14px;
 +
font-family:Arial;
 +
font-weight:normal;
 +
-moz-border-radius:20px;
 +
-webkit-border-radius:20px;
 +
border-radius:20px;
 +
border:1px solid #dcdcdc;
 +
padding:5px 12px;
 +
text-decoration:none;
 +
background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ffffff), color-stop(100%, #f6f6f6) );
 +
background:-moz-linear-gradient( center top, #ffffff 5%, #f6f6f6 100% );
 +
background:-ms-linear-gradient( top, #ffffff 5%, #f6f6f6 100% );
 +
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6');
 +
background-color:#ffffff;
 +
color:#666666;
 +
display:inline-block;
 +
text-shadow:1px 1px 0px #ffffff;
 +
-webkit-box-shadow:inset 1px 1px 0px 0px #ffffff;
 +
-moz-box-shadow:inset 1px 1px 0px 0px #ffffff;
 +
box-shadow:inset 1px 1px 0px 0px #ffffff;
 +
}abc:hover {
 +
background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #f6f6f6), color-stop(100%, #ffffff) );
 +
background:-moz-linear-gradient( center top, #f6f6f6 5%, #ffffff 100% );
 +
background:-ms-linear-gradient( top, #f6f6f6 5%, #ffffff 100% );
 +
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#ffffff');
 +
background-color:#f6f6f6;
 +
}abc:active {
 +
position:relative;
 +
top:1px;
 +
}
 +
 
 +
.transparent {
 +
position:absolute;
 +
top:50%;left:50%;
 +
margin:-150px 0 0 -150px;
 +
height: 300px;
 +
width:300px;
 +
padding: 1em;
 +
border: 1px solid rgba(255,255,255,.5);
 +
border-radius: 10px;
 +
box-sizing: border-box;
 +
background: rgba(255,255,255,.2);
 +
font: 150%/1.6 sans-serif;
 +
text-align: center;
 +
box-shadow: -1px -1px 10px rgba(255,255,255,.3) inset, 2px 2px 20px rgba(0,0,0,.5);
 +
text-shadow: 0 1px 1px rgba(255,255,255,.6);
 +
}
 +
 
 +
</style>
 +
<!--20140721 end-->
 +
</head>
<body>
<body>
-
<div id="navbar"> <!-- nav -->
+
<!--navbar begin-->
-
<div id="nav">
+
<div class"container"=class"container">
-
<ul>
+
<ul class="nav">
-
<li>Home</li>
+
<li><a href="https://2014.igem.org/Team:NEAU-Harbin" class="s">Home</a></li>
-
<li>Team
+
<li>
-
<ul class="none">
+
<a href="#">Team</a>
-
<li>Members</li>
+
<ul>
-
<li>Advisors</li>
+
<li><a href="#">1.Students</a></li>
-
<li>Instructors</li>
+
<li><a href="#">2.Advisors</a></li>
-
<li>Attributions</li>
+
<li><a href="#">3.University</a></li>
-
<li>Thanks</li>
+
<li>
-
</ul></li>
+
<a href="#">Identity</a>
-
<li>Project</li>
+
<!--ul>
-
<li>Results</li>
+
<li><a href="#">Level 2</a></li>
-
<li>Notebook
+
<li><a href="#">Level 2</a></li>
-
<ul>
+
<li>
-
<li>May
+
<a href="#">Level 2</a>
 +
<ul>
 +
<li><a href="#">Level 3</a></li>
 +
<li><a href="#">Level 3</a></li>
 +
<li><a href="#">Level 3</a></li>
 +
<li><a href="#">Level 3</a></li>
 +
</ul>
 +
</li>
 +
<li><a href="#">Level 2</a></li>
 +
</ul-->
 +
</li>
 +
<li><a href="#">Marketing</a></li>
 +
</ul>
</li>
</li>
-
<li>June
+
<li><a href="#">Project</a></li>
 +
<li>
 +
<a href="#">Notebook</a>
 +
<ul>
 +
<li><a href="#">Notebook_of_system</a></li>
 +
<li><a href="#">Notebook_of_practice</a></li>
 +
<li><a href="#">Reagent_and_ormulation</a></li>
 +
<li><a href="#">Notebook_of_meetings</a></li>
 +
</ul>
</li>
</li>
-
<li>July
+
<li><a href="#">Safety</a></li>
 +
<li>
 +
<a href="#">Human practice</a>
 +
<ul>
 +
<li><a href="#">1.台湾见面会</a></li>
 +
<li><a href="#">2.工大见面会</a></li>
 +
<li><a href="#">3.高中宣讲</a></li>
 +
<li><a href="#">4.药厂</a></li>
 +
<li><a href="#">5.游戏</a></li>
 +
<li><a href="#">6.赞助</a></li>
 +
</ul>
</li>
</li>
-
<li>August
+
<li>
 +
<a href="#">Results</a>
 +
<ul>
 +
<li><a href="#">1.实验结果-孙昊</a></li>
 +
<li><a href="#">1.实验结果-郭强</a></li>
 +
<li><a href="#">3.contribution-砖</a></li>
 +
</ul>
</li>
</li>
-
<li>September
+
<li><a href="#"><img class="page-demo demo-x toop" src="https://static.igem.org/mediawiki/igem.org/6/60/Igemlogo_300px.png" width="30px";></a></li><!---->
-
</li>
+
</ul>
-
<li>October
+
-
</li>
+
-
</ul></li>
+
-
<li>Human practice
+
-
<ul>
+
-
<li>Interesting</li>
+
-
<li>Presentation</li>
+
-
<li>Video</li>
+
-
<li>Article</li>
+
-
<li>A small rest</li>
+
-
</ul></li>
+
-
<li>iGEM</li>
+
-
</ul> </div>
+
</div><!--navbar end-->
</div><!--navbar end-->
-
 
+
<!--navbar end-->
-
<p>-</p>
+
<!--css gallary begin-->
-
<p>-</p>
+
<div class="pmdiv" style="display:none; ">
-
<p>-</p>
+
-
<p>-</p>
+
-
<p>-</p>
+
-
<p>-</p>
+
-
<p>-</p>
+
-
<p>-</p>
+
-
 
+
-
<div class="wrapper">
+
-
   
+
-
<!-- main content -->
+
-
<article id="body">
+
-
<!-- ↓↓↓↓↓正文↓↓↓↓↓ -->
+
-
 
+
-
<div class="demo3">
+
-
    <h1>Hover Me</h1>
+
-
    <ul>
+
-
        <li>Link 51</li>
+
-
        <li>Link 52</li>
+
-
        <li>Link 53</li>
+
-
        <li>Link 54</li>
+
-
        <li>Link 55</li>
+
-
        <li>Link 56</li>
+
-
        <li>Link 57</li>
+
-
    </ul>
+
</div>
</div>
-
<h1>Members</h1>
+
<div class="z">
-
<div id="square"></div><p><a href="#example1">123</a></p>
+
<p class="my-uid" style="display:none;">277119</p>
-
<br /><!-- 空行 -->
+
<p class="h-mid" style="display:none;">2</p>
-
<div id="square"></div><p><a href="#example2">abc</a></p>
+
<div class="hader">
-
<hr /><div class="ceTitle">
+
<div class="spname">Welcome to my iGEM</div>
-
<div class="mini-tx">  
+
</div>
-
<a href="#example1"><img src="http://t.williamgates.net/image-81AE_53DE7AAA.jpg" title="石岩"/></a>
+
<div class="smallbox">
-
<a href="#example1"><img src="http://t.williamgates.net/image-81AE_53DE7AAA.jpg" title="石岩"/></a>
+
<!--transparent box-->
-
<a href="#example1"><img src="http://t.williamgates.net/image-81AE_53DE7AAA.jpg" title="石岩"/></a>
+
<div class="facebox">
-
<a href="#example1"><img src="http://t.williamgates.net/image-81AE_53DE7AAA.jpg" title="石岩"/></a>
+
<img src="http://t.williamgates.net/image-F471_53DF344F.jpg" />
-
<a href="#example1"><img src="http://t.williamgates.net/image-81AE_53DE7AAA.jpg" title="石岩"/></a>
+
</div>
-
<a href="#example1"><img src="http://t.williamgates.net/image-81AE_53DE7AAA.jpg" title="石岩"/></a>
+
<div class="s_box">
-
<a href="#example1"><img src="http://t.williamgates.net/image-81AE_53DE7AAA.jpg" title="石岩"/></a>
+
<p class="verify" style="display:none;">1</p>
-
<a href="#example2"><img src="http://t.williamgates.net/image-BE8C_53DE8BAE.jpg" title="吴雨蒙"/></a>
+
Hello world!
-
<a href="#example2"><img src="http://t.williamgates.net/image-BE8C_53DE8BAE.jpg" title="吴雨蒙"/></a>
+
<ul class="s_link" id="s_link">
-
<a href="#example2"><img src="http://t.williamgates.net/image-BE8C_53DE8BAE.jpg" title="吴雨蒙"/></a>
+
<li class="button">
-
<a href="#example2"><img src="http://t.williamgates.net/image-BE8C_53DE8BAE.jpg" title="吴雨蒙"/></a>
+
<g>Follow me</g>
-
<a href="#example2"><img src="http://t.williamgates.net/image-BE8C_53DE8BAE.jpg" title="吴雨蒙"/></a>
+
</li>
-
<a href="#example2"><img src="http://t.williamgates.net/image-BE8C_53DE8BAE.jpg" title="吴雨蒙"/></a>
+
<li class="button">
-
<a href="#example2"><img src="http://t.williamgates.net/image-BE8C_53DE8BAE.jpg" title="吴雨蒙"/></a>
+
<g>A tour!</g>
-
<a href="#example2"><img src="http://t.williamgates.net/image-BE8C_53DE8BAE.jpg" title="吴雨蒙"/></a>
+
</li>
-
<a href="#example2"><img src="http://t.williamgates.net/image-BE8C_53DE8BAE.jpg" title="吴雨蒙"/></a>
+
</ul>
-
<a href="#example2"><img src="http://t.williamgates.net/image-BE8C_53DE8BAE.jpg" title="吴雨蒙"/></a>
+
</div>
 +
<div id="h-f" class="n_box">
 +
<br />
 +
<br />
 +
<br />
 +
</div>
</div>
</div>
</div>
</div>
-
<!-- ↑↑↑↑↑正文↑↑↑↑↑ -->
+
<!--css gallary end-->
-
<div class="tgt"><div id="example1"><h1>biaoti</h1><p>123456789123456789123456789234567823456789234567892345678934567893456789415431543453254354324325432543245325432</p></div>
+
<table width="70%" align="center">
-
<div id="example2"><h1>title</h1><p>dfgsghfdgdsgfdsgfdsgfdjhgjnbvcxzcvbxgdfzxvcvhcgxfdzghcjvgfhjvgcfxhcjvgfchjgfchjfgcjgchvjgdghfxvvbxbxbvbbvxvbxvb</p></div></div>
+
<!--welcome box -->
-
<!-- ↑↑↑↑↑正文↑↑↑↑↑ -->
+
<tr>
-
</article>
+
<td class="drop-shadow round" style="border:1px solid black;" colspan="3" align="center" height="150px" bgColor="#ff6666">
 +
<h1 ><abbr title="Thank you!">Thanks for visiting our wiki!</abbr></h1>
 +
<p>Our team has been approved and we are ready to start the iGEM season!
 +
<br>On this page we can document our project, introduce our team members, document our progress <br> and share our iGEM experience with the rest of the world! </p>
 +
<br>
 +
<p style="color:#E7E7E7"> <a href="https://2014.igem.org/wiki/index.php?title=Team:NEAU-Harbin/Sandbox&action=edit"style="color:#114514"> Click here to edit this page!</a> </p>
 +
</td>
 +
</tr>
-
    <!-- sidebar -->
+
<tr> <td colspan="3"  height="5px"> </td></tr>
-
    <aside id="sidebar">
+
<!-- end welcome box -->
 +
<tr>  
-
<div class="demo2">
+
</tr>
-
    <div class="span3">
+
-
        <input type="radio" id="demo21" name="ex111" checked="">
+
-
        <label for="demo21">May
+
-
</label>
+
-
        <ul class="unstyled">
+
-
                <li>1~5</li>
+
-
                <li>6~10</li>
+
-
                <li>11~15</li>
+
-
                <li>16~20</li>
+
-
                <li>21~25</li>
+
-
                <li>26~31</li>
+
-
                <li>link 7</li>
+
-
        </ul>
+
-
    </div>
+
-
    <div class="span3">
+
-
        <input type="radio" id="demo22" name="ex111">
+
-
        <label for="demo22">June</label>
+
-
          <ul class="unstyled">
+
-
                <li>1~5</li>
+
-
                <li>6~10</li>
+
-
                <li>11~15</li>
+
-
                <li>16~20</li>
+
-
                <li>21~25</li>
+
-
                <li>26~30</li>
+
-
                <li>link 7</li>
+
-
          </ul>
+
-
    </div>
+
-
    <div class="span3">
+
-
        <input type="radio" id="demo23" name="ex111">
+
-
        <label for="demo23">July</label>
+
-
          <ul class="unstyled">
+
-
                <li>1~5</li>
+
-
                <li>6~10</li>
+
-
                <li>11~15</li>
+
-
                <li>16~20</li>
+
-
                <li>21~25</li>
+
-
                <li>26~31</li>
+
-
                <li>link 7</li>
+
-
          </ul>
+
-
    </div>
+
-
    <div class="span3">
+
-
        <input type="radio" id="demo24" name="ex111">
+
-
        <label for="demo24">August</label>
+
-
          <ul class="unstyled">
+
-
                <li>1~5</li>
+
-
                <li>6~10</li>
+
-
                <li>11~15</li>
+
-
                <li>16~20</li>
+
-
                <li>21~25</li>
+
-
                <li>26~31</li>
+
-
                <li>link 7</li>
+
-
          </ul>
+
-
    </div>
+
-
    <div class="span3">
+
-
        <input type="radio" id="demo25" name="ex111">
+
-
        <label for="demo25">September</label>
+
-
          <ul class="unstyled">
+
-
                <li>1~5</li>
+
-
                <li>6~10</li>
+
-
                <li>11~15</li>
+
-
                <li>16~20</li>
+
-
                <li>21~25</li>
+
-
                <li>26~30</li>
+
-
                <li>link 7</li>
+
-
          </ul>
+
-
    </div>
+
-
    <div class="span3">
+
-
        <input type="radio" id="demo26" name="ex111">
+
-
        <label for="demo26">October</label>
+
-
          <ul class="unstyled">
+
-
                <li>1~5</li>
+
-
                <li>6~10</li>
+
-
                <li>11~15</li>
+
-
                <li>16~20</li>
+
-
                <li>21~25</li>
+
-
                <li>26~31</li>
+
-
                <li>link 7</li>
+
-
          </ul>
+
-
    </div>
+
-
</div>
+
-
    </aside>
 
-
    <!-- clear float -->
+
</tr>
-
    <!-- <div class="clear"></div> -->
+
   
-
    <!-- footer -->
 
-
    <footer id="footer" class="clear">
 
-
    </footer>
 
-
</div>
+
 
 +
 
 +
</td>
 +
 
 +
<tr> <td colspan="3"  height="15px"> </td></tr>
 +
<tr><td bgColor="#e7e7e7" colspan="3" height="1px"> </tr>
 +
<tr> <td colspan="3"  height="5px"> </td></tr>
 +
 
 +
 
 +
<!--requirements section -->
 +
<tr><td colspan="3"> <h3> Requirements </h3></td></tr>
 +
<tr>
 +
<td width="45%"  valign="top">
 +
 
 +
<ol>Target</ol><p>
 +
Firstly, we aim to introduce the new expression host Aspergillus Niger, which is a significant industrial fermentation microbial to iGEM. It's well known for efficient capacity of secreting proteins and recognized as the safe strain for heterologous protein production. Secondly, we want to exploit the visual gene replacement system. We design to utilize the fluorescent proteins to realize the indication of the target gene replacement and make the process continuable. The fluorescent proteins work as selective markers to help us pick out our target transformants without complex molecular detections. Thirdly, we import carotenoid metabolic pathway where all the enzymes are connected by the linker peptides to our vector, so that we can examine the feasibility of our system.
 +
 
 +
 
 +
Now we are still constructing our expression vectors. We have ligated HPH, GFP with linker and one of GlaA3s. Now we are trying to ligate GlaA5 and another GlaA3. When we finish our expression vector, we will transform the well-constructed plasmid into the Agrobacterium and use the Agrobacterium to infect the Aspergillus niger to carry our plasmid in the Aspergillus niger. </p>
 +
 
</body>
</body>
</html>
</html>

Revision as of 12:49, 14 August 2014

<!DOCTYPE html>

Welcome to my iGEM
Hello world!



Thanks for visiting our wiki!

Our team has been approved and we are ready to start the iGEM season!
On this page we can document our project, introduce our team members, document our progress
and share our iGEM experience with the rest of the world!


Click here to edit this page!

Requirements

    Target

Firstly, we aim to introduce the new expression host Aspergillus Niger, which is a significant industrial fermentation microbial to iGEM. It's well known for efficient capacity of secreting proteins and recognized as the safe strain for heterologous protein production. Secondly, we want to exploit the visual gene replacement system. We design to utilize the fluorescent proteins to realize the indication of the target gene replacement and make the process continuable. The fluorescent proteins work as selective markers to help us pick out our target transformants without complex molecular detections. Thirdly, we import carotenoid metabolic pathway where all the enzymes are connected by the linker peptides to our vector, so that we can examine the feasibility of our system. Now we are still constructing our expression vectors. We have ligated HPH, GFP with linker and one of GlaA3s. Now we are trying to ligate GlaA5 and another GlaA3. When we finish our expression vector, we will transform the well-constructed plasmid into the Agrobacterium and use the Agrobacterium to infect the Aspergillus niger to carry our plasmid in the Aspergillus niger.

Retrieved from "http://2014.igem.org/Team:NEAU-Harbin/Sandbox"