Team:LZU-China/tempfortest2

From 2014.igem.org

(Difference between revisions)
(Created page with "<html> <head> <title>图片说明的显示和隐藏动画</title> <meta charset='utf-8'/> <style type="text/css"> body,ul,li,ol{list-style:none;padding:0px;margin:0px;font-size:1...")
Line 1: Line 1:
-
<html>
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 +
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<head>
-
<title>图片说明的显示和隐藏动画</title>
+
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
-
<meta charset='utf-8'/>
+
<title>LZU-China 2014</title>
<style type="text/css">
<style type="text/css">
 +
body,ul,li,ol{list-style:none;padding:0px;margin:0px;font-size:12px;font-family:微软雅黑;}
body,ul,li,ol{list-style:none;padding:0px;margin:0px;font-size:12px;font-family:微软雅黑;}
img{border:0px;}
img{border:0px;}
.picList{width:100%;float:left;}
.picList{width:100%;float:left;}
-
.picList .col{width:300px;height:200px;position:relative;overflow:hidden;float:left;margin:10px 0 0 10px;}
+
.picList .col{width:600px;height:397px;position:relative;overflow:hidden;float:left;margin:10px 0 0 10px;}
.picList .col img,.col a{position:absolute;top:0px;left:0px;}
.picList .col img,.col a{position:absolute;top:0px;left:0px;}
.picList .col img{width:100%;}
.picList .col img{width:100%;}
-
.picList .col a{display:block;width:280px;height:180px;top:160px;background:rgba(0,0,0,0.7);color:white;font-style:normal;line-height:25px;padding:10px;opacity:0.8;text-decoration:none;}
+
.picList .col a{display:block;width:580;height:377px;top:357px;background:rgba(0,0,0,0.7);color:white;font-style:normal;line-height:25px;padding:10px;opacity:0.8;text-decoration:none;}
.msg{float:left;width:900px;position:relative;left:50%;margin:30px 0 0 -450px;font-size:14px;}
.msg{float:left;width:900px;position:relative;left:50%;margin:30px 0 0 -450px;font-size:14px;}
 +
 +
*{margin:0px;padding:0px;}
 +
body{background:#b1b1b1;margin:0px;padding:0px;font-size:14px;color:#000;}
 +
b#p1, b#p2, b#p3, b#p4, b#p5 {display:none;}
 +
#accordian {padding:0; margin:20px auto; list-style:none; width:730px; height:300px; overflow:hidden; position:relative; border:1px solid #682;}
 +
#accordian li {width:50px; height:300px; float:left;
 +
-moz-transition: 0.7s;
 +
-ms-transition: 0.7s;
 +
-o-transition: 0.7s;
 +
-webkit-transition: 0.7s;
 +
transition: 0.7s;
 +
}
 +
#accordian div {width:530px; height:300px; position:relative;}
 +
#accordian div span {display:block; background:rgba(0,0,0,.3); width:460px; height:30px; position:absolute; bottom:300px; right:0; padding:10px; color:#fff; font:normal 13px/30px 'georgia', serif; border-top:1px solid #000;
 +
}
 +
#accordian div span a {color:#fff;}
 +
#accordian li div > a {display:block; width:49px; height:300px; float:left; position:relative; color:#fff; text-decoration:none;box-shadow:-10px 0 10px -10px rgba(0,0,0,0.6);}
 +
#accordian li div > a b {display:block; width:280px; padding-left:20px; height:50px; position:absolute; left:50px; bottom:0; font:bold 24px/50px 'georgia', serif; text-shadow:0 0 2px rgba(0, 0, 0, 0.6);
 +
transform: rotate(-90deg);
 +
transform-origin:bottom left;
 +
-ms-transform: rotate(-90deg);
 +
-ms-transform-origin:bottom left;
 +
-webkit-transform: rotate(-90deg);
 +
-webkit-transform-origin:bottom left;
 +
-moz-transform: rotate(-90deg);
 +
-moz-transform-origin:bottom left;
 +
-o-transform: rotate(-90deg);
 +
-o-transform-origin:bottom left;
 +
}
 +
#accordian li div > a b {*left:0;}
 +
#accordian li img {display:block; float:left;}
 +
#accordian li.p1 {width:530px;}
 +
#accordian li.p1 div span {bottom:0;}
 +
#accordian li a.a1 {background:#b33866; border-left:1px solid #682;}
 +
#accordian li a.a2 {background:#8d4984; border-left:1px solid #9b5;}
 +
#accordian li a.a3 {background:#6559a1; border-left:1px solid #ce5;}
 +
#accordian li a.a4 {background:#3c6cc0; border-left:1px solid #ef7;}
 +
#accordian li a.a5 {background:#187adb; border-left:1px solid #28b;}
 +
#p1:target ~ #accordian li {width:50px;}
 +
#p1:target ~ #accordian li div span {bottom:300px;}
 +
#p1:target ~ #accordian li.p1 {width:530px;}
 +
#p1:target ~ #accordian li.p1 div span {bottom:0;}
 +
#p2:target ~ #accordian li {width:50px;}
 +
#p2:target ~ #accordian li div span {bottom:300px;}
 +
#p2:target ~ #accordian li.p2 {width:530px;}
 +
#p2:target ~ #accordian li.p2 div span {bottom:0;}
 +
#p3:target ~ #accordian li {width:50px;}
 +
#p3:target ~ #accordian li div span {bottom:300px;}
 +
#p3:target ~ #accordian li.p3 {width:530px;}
 +
#p3:target ~ #accordian li.p3 div span {bottom:0;}
 +
#p4:target ~ #accordian li {width:50px;}
 +
#p4:target ~ #accordian li div span {bottom:300px;}
 +
#p4:target ~ #accordian li.p4 {width:530px;}
 +
#p4:target ~ #accordian li.p4 div span {bottom:0;}
 +
#p5:target ~ #accordian li {width:50px;}
 +
#p5:target ~ #accordian li div span {bottom:300px;}
 +
#p5:target ~ #accordian li.p5 {width:530px;}
 +
#p5:target ~ #accordian li.p5 div span {bottom:0;}
 +
 +
 +
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .visualClear {display: none;} /*-- hides default wiki settings --*/
 +
 +
.firstHeading {
 +
width: 975px;
 +
margin: 0px auto;
 +
padding-top: 100px;
 +
margin-bottom: 20px;
 +
font-family: Georgia, Times, "Times New Roman", serif;
 +
}
 +
 +
h1, h2, h3, h4, h5 { font-family: Georgia, Times, "Times New Roman", serif;}
 +
 +
#top-section { /*-- styling for default menu bar (edit, page, history, etc.) --*/
 +
background-color: #383838;
 +
border: 0 none;
 +
height: 14px;
 +
z-index: 100;
 +
top: 0;
 +
position: fixed;
 +
width: 975px;
 +
left: 50%;
 +
margin-left: -487px;
 +
}
 +
 +
#top-section-bar { /*-- styling full width bar which hides behind default menu bar (edit, page, history, etc.) --*/
 +
background-color: #383838;
 +
height: 14px;
 +
display: block;
 +
z-index: 10;
 +
position: fixed;
 +
width: 100%;
 +
top: 0;
 +
}
 +
 +
#menubar a:link, #menubar a:active, #menubar a:visited, #menubar a:hover, #menubar:hover { /*-- styling for default menu bar links (edit, page, history, etc.) --*/
 +
color: #727272;
 +
text-decoration: none;
 +
background-color: transparent;
 +
}
 +
 +
body {
 +
background-color: #fff;
 +
}
 +
 +
#globalWrapper, #content { /*-- changes default wiki settings --*/
 +
width: 100%;
 +
height: 100%;
 +
border: 0px;
 +
background-color: transparent;
 +
margin: 0px;
 +
padding: 0px;
 +
}
 +
 +
html, body, .wrapper { /*-- changes default wiki settings --*/
 +
width: 100%;
 +
height: 100%;
 +
background-color: transparent;
 +
}
 +
 +
#contentcontainer { /*-- creates container for all content on page --*/
 +
font-family: Arial, Helvetica, sans-serif;
 +
font-weight: normal;
 +
font-size: 14px;
 +
color: #414141;
 +
width: 960px;
 +
margin-left: auto;
 +
margin-right: auto;
 +
background-color: #transparent;
 +
margin-top: 0px;
 +
}
 +
 +
.sidemenu, .sidemenu li {
 +
list-style-type: none;
 +
list-style-image: none;
 +
font-family: verdana;
 +
text-decoration: none;
 +
color:#000;
 +
font-size: 14px;
 +
}
 +
 +
.sidemenu li {display: block;}
 +
 +
.sidemenu a {
 +
text-decoration:none;
 +
color: #000;
 +
display: block;
 +
width: 180px;
 +
height: 100%;
 +
padding: 3px 5px;
 +
transition: .25s ease-in-out;
 +
-moz-transition: .25s ease-in-out;
 +
-webkit-transition: .25s ease-in-out;
 +
}
 +
 +
.sidemenu a.greyout { color: #909090; }
 +
 +
.sidemenu a:hover {
 +
color:#666;
 +
background-color: #d9f5aa;
 +
}
 +
 +
.sub-sidemenu {font-size: 10px; margin-bottom: 20px; color: #666; display: none;}
 +
.sub-sidemenu a {color: #666;}
 +
 +
div.underconst
 +
{
 +
padding:10px;
 +
border-radius:5px;
 +
background-color:pink;
 +
text-align:center;
 +
}
 +
 +
a.anchor{display: block; position: relative; top: -80px; visibility: hidden;}
 +
 +
.contentpara {margin-bottom: 30px;}
 +
 +
span.email{font-family: monospace; font-weight: normal;}
 +
 +
fieldset {border: 1px solid #337f53;}
 +
 +
.greyout {color: #A0A0A0;}
 +
.highlightme {background-color: #FFFF00;}
 +
 +
#alertContainer {border: 2px solid red; margin-bottom: 10px; width: 936px;}
 +
#annContainer {margin-left: 8px;}
 +
#newsContainer {border: 1px solid #ccc;}
 +
 +
.newsTitle {
 +
display: block;
 +
color: #414141;
 +
font-size: 25px; 
 +
        font-family: Georgia, Times, "Times New Roman", serif;
 +
padding: 10px 15px 5px 10px;
 +
border-bottom: 1px solid #ccc;
 +
margin-bottom: 0px;
 +
}
 +
 +
.newsItem {
 +
border-bottom: 1px solid #ccc;
 +
display: block;
 +
padding: 5px 15px 0px 10px;
 +
margin-bottom: 0px;
 +
}
 +
 +
.newsItem h3 {
 +
width: auto;
 +
display: inline;
 +
font-size: 14px;
 +
font-family: Arial, Helvetica, sans-serif;
 +
padding: 0px;
 +
margin: 0px;
 +
}
 +
 +
.newsItem img {
 +
float: right;
 +
clear: right;
 +
width: 80px;
 +
padding-left: 15px;
 +
display: inline-block;
 +
}
 +
 +
.newsItem .newsDate {
 +
font-style: italic;
 +
font-size: 14px;
 +
display: inline-block;
 +
color: #999;
 +
float: right;
 +
padding: 0px 0px 10px 15px;
 +
}
 +
 +
.newsItem p, .newsItem ul, .newsItem li {
 +
padding: 0px;
 +
margin-left: 20px;
 +
font-size: 12px;
 +
line-height: 1.2;
 +
}
 +
 +
.newsItem p {margin-top: 10px;}
 +
 +
.annItem {
 +
border: 2px solid #49b677;
 +
display: block;
 +
padding: 0px 15px 10px 10px;
 +
margin-bottom: 18px;
 +
position: relative;
 +
height: 160px;
 +
vertical-align: middle;
 +
}
 +
 +
.annItem .annCentered {
 +
display: table-cell;
 +
vertical-align: middle;
 +
height: 160px;
 +
}
 +
 +
.annCentered h3 {
 +
padding: 0px;
 +
display: block;
 +
margin-left: auto;
 +
margin-right: auto;
 +
text-align: center;
 +
}
 +
 +
.annItem ul, .annItem li {padding: 0px; margin: 0px;}
 +
.annItem li {list-style: none; margin: 5px}
 +
 +
@charset "utf-8";
 +
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td,figure{
 +
margin:0;
 +
padding:0;
 +
font-size: 14px;
 +
text-align: left;
 +
}
 +
html{background-color:#e9ecec}
 +
table{table-layout:fixed;border-collapse:collapse}
 +
section,article,aside,header,footer,nav,dialog,figure{display:block}
 +
.clearfix:after{content:"\20";display:block;height:0;line-height:0;font-size:0;clear:both}
 +
body,button,input,select,textarea,td,th{color:#333;font:12px/1.5 tahoma,arial,\5b8b\4f53}
 +
h1,h2,h3,h4,h5,h6{font-size:100%}
 +
address,cite,dfn,em,var{font-style:normal}
 +
code,kbd,pre,samp{font-family:courier new,courier,monospace}
 +
small{font-size:12px}ul,ol{list-style:none}a{text-decoration:none;color:#06C}
 +
a:hover{text-decoration:underline;color:#06C}
 +
sup{vertical-align:text-top}
 +
sub{vertical-align:text-bottom}
 +
legend{color:#000}
 +
fieldset,img{border:0 none}
 +
button,input,select,textarea{font-size:100%}
 +
table{
 +
border-collapse:collapse;
 +
border-spacing:0;
 +
text-align: center;
 +
}
 +
input:focus{outline:none}
 +
.hd-main{height:60px;background:#fff;z-index:15;border-bottom:#b3b3b3 1px solid;box-shadow:0 0 5px #333}
 +
.f-icon{background-image:url('http://www.codefans.net/jscss/demoimg/201403//frame-icon.png');background-repeat:no-repeat}
 +
.hd-main{padding:0 5px;height:49px;min-width:800px;background:#252525;border-bottom:0}
 +
.hd-main .has-pulldown{cursor:pointer;position:relative;*z-index:10000}
 +
.hd-main .pulldown{position:absolute;cursor:default;display:none;top:30px;left:0}
 +
.hd-main .pulldown .arrow{*margin-bottom:-1px;_margin-bottom:0;height:0;width:0;font-size:0;line-height:0;border-width:7px;border-style:solid;border-color:transparent transparent rgba(255, 255, 255,0.8) transparent;_filter:chroma(color=tomato);_border-color:tomato tomato rgba(255, 255, 255,0.8) tomato;position:relative;display:block;left:20px;z-index:7}
 +
.hd-main .pulldown .content{background:rgba(255, 255, 255,0.8);color:#333;text-align:left;border-radius:3px;border:rgb(175,175,175) 1px solid;border-width:0 1px 1px 1px;box-shadow:0 2px 4px rgba(0,0,0,.2);position:relative;z-index:6}
 +
.hd-main .pulldown-canvas{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;filter:alpha(opacity=0)}
 +
.hd-main .logo{background-image:url('https://static.igem.org/mediawiki/2014/7/72/2014logomin.png');background-repeat:no-repeat;display:block;height:36px;width:175px;float:left;margin-left:10px;background-position:0 0;margin-top:5px;display:inline}
 +
.hd-main .navs{padding:0 0 3px 25px;height:45px;float:left}
 +
.hd-main .navs a,.hd-main .info a,.hd-main .navs a:visited,.hd-main .info a:visited,.hd-main .navs a:active,.hd-main .info a:active{color:#d8d8d8}
 +
.hd-main .navs a:hover,.hd-main .navs a:active{text-decoration:none;background-color:#0f0f0f}
 +
.hd-main .navs .def-nav,.hd-main .navs .pulldown-nav,.hd-main .navs .separate{display:block;float:left;height:48px;font:18px/30px "Microsoft YaHei","Microsoft JhengHei";color:#d8d8d8;text-align:center;width:125px;line-height:48px}
 +
.hd-main .navs .def-nav .app-url{left:185px;width:425px;top:48px}
 +
.hd-main .navs .def-nav .pulldown-canvas-url{width:575px;height:109px}
 +
.hd-main .navs .def-nav .app-url .arrow{left:140px}
 +
.hd-main .navs .app-url .content{padding:17px 0 0 22px;height:91px}
 +
.hd-main .navs .app-url .content a,.hd-main .navs .app-url .content a:hover{color:#333}
 +
.hd-main .navs .app-url .li{cursor:pointer;padding-top:8px;width:66px;height:66px;border-radius:3px;display:block;float:left;text-align:center}
 +
.hd-main .navs .app-url .li:hover{background-color:#e0e1e5}
 +
.hd-main .navs .app-url .li .icon{margin:0 auto;width:50px;height:50px;display:block;background:url('https://static.igem.org/mediawiki/2014/9/94/Icons50X50nb.png') no-repeat}
 +
.hd-main .navs .app-url .li:hover .icon{background-image:url('https://static.igem.org/mediawiki/2014/9/94/Icons50X50nb.png')}
 +
.hd-main .navs .app-url .tongxunlu .icon{background-position:-50px 0}
 +
.hd-main .navs .app-url .xiangce .icon{background-position:-100px 0}
 +
.hd-main .navs .app-url .note .icon{background-position:-150px 0}
 +
.hd-main .navs .app-url .duanxin .icon{background-position:-200px 0}
 +
.hd-main .navs .app-url .zhaohui .icon{background-position:-250px 0}
 +
.hd-main .navs .app-url .youxi .icon{background-position:-300px 0}
 +
.hd-main .navs .app-url .li .text{height:30px;display:block;font:10px/30px "Microsoft YaHei","Microsoft JhengHei"}
 +
.hd-main .navs .separate{margin:0;height:48px;width:2px;background:#2A2B2D}
 +
.hd-main .navs .pulldown-nav{position:relative}
 +
.hd-main .navs .pulldown-nav em{
 +
position:absolute;
 +
display:block;
 +
left:99px;
 +
top:18px;
 +
height:12px;
 +
width:12px;
 +
font-size:0;
 +
background-position:-89px -45px
 +
}
 +
.hd-main .navs .pulldown-nav:hover .f-icon,.hd-main .navs .pulldown-nav:active .f-icon{position:absolute;display:block;right:11px;top:18px;height:12px;width:12px;font-size:0;background-position:-89px -55px}
 +
.hd-main .navs .current,.hd-main .navs .current .pulldown-nav{font-weight:bold;color:#FFF;display:inline-block;width:125px;height:49px;background-color:#0f0f0f;text-align:center;line-height:48px}
 +
.hd-main .navs .current:hover{color:#ECECEC}
 +
.hd-main .navs .current .hover{background-color:#dedede;color:#333;}
 +
.hd-main .info,.hd-main .info ul{height:36px;float:right;text-align:right;margin-top:3px;white-space:nowrap}
 +
.hd-main .info a{color:#d8d8d8}
 +
.hd-main .info a:hover{color:#FFF;text-decoration:underline}
 +
.hd-main .info .info-i{padding:0 10px;margin:10px 0;display:inline-block;*display:inline;*zoom:1;height:16px;border-right:#393939 1px solid;color:#d8d8d8;font:12px/16px "SimSun"}
 +
.hd-main{padding:0 5px;height:49px;min-width:800px;background:#252525;border-bottom:0}
 +
.hd-main .info .has-pulldown{padding-right:28px}
 +
.hd-main .info .has-pulldown .pull-arrow{position:absolute;display:block;right:10px;top:1px;height:12px;width:12px;font-size:0;background-position:-89px -45px}
 +
.hd-main .info .no-separate{border:none}
 +
.hd-main .info .user-name{position:relative;padding-left:24px}
 +
.hd-main .info .user-name .name{display:inline-block;display:inline\0;white-space:nowrap;max-width:75px;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
 +
.hd-main .info .user-name .identity{position:absolute;top:0;left:0;height:16px;width:16px;background-position:-89px -88px}
 +
.hd-main .info .user-name .is-vip{background-position:-89px -68px}
 +
.hd-main .info .user-info,.hd-main .info .more-info{top:9px;left:auto;right:-24px;width:170px} /*User栏目宽度*/
 +
.hd-main .info .notice-nu{display:inline-block;padding-left:4px;background-position:-86px -109px;height:14px;-webkit-text-size-adjust:none;font-size:10px;font-style:normal}
 +
.hd-main .info .notice-nu .f-icon{display:inline-block;padding-right:4px;background-position:right -109px;color:#FFF}  /*此处原为#FFF*/
 +
.hd-main .info .user-info .arrow{left:70px;*left:-32px}
 +
.hd-main .info .user-info .content,.hd-main .info .more-info .content{padding:10px 0;height:180px}
 +
.hd-main .info .more{padding:0;display:inline;line-height:inherit;background:none}
 +
.hd-main .info .more-info .content{height:150px}
 +
.hd-main .info .user-info .content a,.hd-main .info .more-info .content a{display:block;padding-left:33px;height:30px;line-height:30px;color:#888}
 +
.hd-main .info .user-info .content a:hover,.hd-main .info .more-info .content a:hover{color:#333;text-decoration:none;background:#e0e1e5}
 +
.hd-main .info .user-info .li,.hd-main .info .more-info .li{display:block;padding:2px 0;height:30px}
 +
.hd-main .info .user-info .separate-li,.hd-main .info .more-info .separate-li{display:block;margin:3px 11px;border-top:#EBEBEC 1px solid;border-bottom:#FFF 1px solid}
 +
.hd-main .info .more-info{right:0}
 +
.hd-main .info .more-info .arrow{left:94px;*left:-8px}
 +
#apDiv1 {
 +
position:absolute;
 +
left:3px;
 +
top:4px;
 +
width:100%;
 +
height:900px;
 +
z-index:0;
 +
background-color: #66CCFF;
 +
}
 +
/*<![CDATA[*/
 +
body {
 +
margin:0;
 +
padding:0 10px 0 10px;
 +
border:0;
 +
height:100%;
 +
overflow:auto;
 +
background-color: #FFF;
 +
}
 +
#menu {right:0; top:0; width:100%; position:fixed; padding:10px; text-align:center; font-weight:bold; background:rgba(0,83,163,0);}
 +
* html #menu {position:absolute; right:16px; top:0;}/*only for ie*/
 +
html {overflow:auto !important; overflow:hidden;}
 +
 +
#apDiv2 {
 +
position:absolute;
 +
left:0;
 +
top:50px;
 +
width:100%;
 +
height:265px;
 +
z-index:0;
 +
background-color: #187BDB;
 +
}
 +
#apDiv3 {
 +
position:absolute;
 +
left:0px;
 +
top:328px;
 +
width:100%;
 +
height:150px;
 +
z-index:0;
 +
}
 +
#apDiv3 table tr td p {
 +
font-size: 15px;
 +
text-align: center;
 +
}
 +
#apDiv4 {
 +
position:absolute;
 +
left:0;
 +
top:704px;
 +
width:100%;
 +
height:56px;
 +
z-index:0;
 +
}
 +
#apDiv5 {
 +
position:absolute;
 +
left:0;
 +
top:2888px;
 +
width:100%;
 +
height:25;
 +
z-index:1;
 +
background-color: #5FC1C5;
 +
}
 +
#apDiv3 div {
 +
font-size: 46px;
 +
text-align: center;
 +
}
 +
#apDiv4 table tr td div {
 +
font-size: 45px;
 +
color: #000;
 +
text-align: left;
 +
}
 +
#apDiv4 table tr td table tr td {
 +
font-size: 16px;
 +
line-height: 30px;
 +
}
 +
body,td,th {
 +
color: #000;
 +
}
 +
#apDiv6 {
 +
position:absolute;
 +
left:41%;
 +
top:2777px;
 +
width:220px;
 +
height:221px;
 +
z-index:2;
 +
}
 +
#apDiv2 table tr td p {
 +
font-size: 45px;
 +
text-align: center;
 +
color: #FFF;
 +
font-weight: bold;
 +
}
 +
#apDiv7 {
 +
position:absolute;
 +
left:50%;
 +
top:226px;
 +
width:257px;
 +
height:151px;
 +
z-index:auto;
 +
}
 +
#apDiv3 div {
 +
font-size: 14px;
 +
}
 +
#apDiv8 {
 +
position:absolute;
 +
left:0;
 +
top:1680px;
 +
width:100%;
 +
height:470px;
 +
z-index:3;
 +
}
 +
#apDiv4 table tr td table tr td p {
 +
font-size: 18px;
 +
line-height: 32px;
 +
}
 +
#apDiv8 table tr td table tr td {
 +
font-size: 45px;
 +
}
 +
#apDiv8 table tr td table tr td p {
 +
font-size: 18px;
 +
line-height: 31px;
 +
}
 +
#apDiv9 {
 +
position:absolute;
 +
left:0px;
 +
top:2251px;
 +
width:100%;
 +
height:55px;
 +
z-index:4;
 +
}
 +
#apDiv9 table tr td table tr td table tr td {
 +
font-size: 35px;
 +
}
 +
#apDiv9 table tr td table tr td table tr td p {
 +
font-size: 18px;
 +
line-height: 31px;
 +
}
 +
#apDiv4 table tr td table tr td div div {
 +
font-size: 15px;
 +
}
</style>
</style>
</head>
</head>
-
<body>
+
 
-
<div class='picList'>
+
<body id="" class="">
 +
<div id="apDiv2">
 +
  <table width="100%" border="0" background="5.HP.jpg">
 +
    <tr>
 +
      <td width="1201" height="265" rowspan="2"><p>&nbsp;</p></td>
 +
      <td width="261" height="199" bgcolor="#187ADB">&nbsp;</td>
 +
    </tr>
 +
    <tr>
 +
      <td height="70">&nbsp;</td>
 +
    </tr>
 +
  </table>
 +
</div>
 +
<div id="apDiv3">
 +
  <p>&nbsp;</p>
 +
  <div>
 +
  <div id="info">
 +
<b id="p1"></b>
 +
<b id="p2"></b>
 +
<b id="p3"></b>
 +
<b id="p4"></b>
 +
<b id="p5"></b>
 +
<ul id="accordian">
 +
<li class="p1">
 +
<div>
 +
<a class="a1" href="#p1"><b>Investigate & Survey</b></a>
 +
<img src="ques1.jpg" alt="" title="">
 +
<span>幻灯片一的介绍</span>
 +
</div>
 +
</li>
 +
<li class="p2">
 +
<div>
 +
<a class="a2" href="#p2"><b>Team meeting</b></a>
 +
<img src="meeting1.JPG" alt="" title="">
 +
<span>幻灯片二的介绍</span>
 +
</div>
 +
</li>
 +
<li class="p3">
 +
<div>
 +
<a class="a3" href="#p3"><b>Meetups</b></a>
 +
<img src="mup2.JPG" alt="" title="">
 +
<span>幻灯片三的介绍</span>
 +
</div>
 +
</li>
 +
<li class="p4">
 +
<div>
 +
<a class="a4" href="#p4"><b>Information Sessions</b></a>
 +
<img src="is1.JPG" alt="" title="">
 +
<span>幻灯片三的介绍</span>
 +
</div>
 +
</li>
 +
<li class="p5">
 +
<div>
 +
<a class="a5" href="#p5"><b>Cooperations</b></a>
 +
<img src="/jscss/demoimg/201209/pic5.jpg" alt="" title="">
 +
<span>幻灯片四的介绍</span>
 +
</div>
 +
</li>
 +
</ul>
 +
</div>
 +
  </div>
 +
  <p>&nbsp;</p>
 +
  <table width="100%" border="0" align="center">
 +
    <tr>
 +
      <td width="20%">&nbsp;</td>
 +
    </tr>
 +
    <tr>
 +
      <td width="20%">&nbsp;</td>
 +
    </tr>
 +
    <tr>
 +
      <td width="20%">&nbsp;</td>
 +
    </tr>
 +
  </table>
 +
</div>
 +
<div id="apDiv4" >
 +
  <p>&nbsp;</p>
 +
  <table width="100%" height="627" border="0" background="huils.jpg">
 +
    <tr>
 +
      <td height="623" valign="top"><p>&nbsp;</p>
 +
      <p>&nbsp;</p>
 +
      <div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;INVESTIGATE AND SURVEY</div>
 +
      <table width="100%" border="0">
 +
        <tr>
 +
          <td width="30%">&nbsp;</td>
 +
          <td width="57%">&nbsp;
 +
            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;We have designed  a questionnaire to survey the masses' attitude toward sewage treatment, power  generation, and MFCs. This questionnaire was made up by 16 questions and the  respondents are random selected by all ages, genders and positions in China and  U.K.&nbsp;</p>
 +
            <div>
 +
              <div class='picList'>
<div class='col'>
<div class='col'>
<img src='/jscss/demoimg/wall_s5.jpg'/><a href='#'>古老巨石阵<br/>巨石阵又称索尔兹伯里石环、环状列石、太阳神庙、史前石桌、斯通亨治石栏、斯托肯立石圈等名，是欧洲著名的史前时代文化神庙遗址，位于英格兰威尔特郡索尔兹伯里平原。</a>
<img src='/jscss/demoimg/wall_s5.jpg'/><a href='#'>古老巨石阵<br/>巨石阵又称索尔兹伯里石环、环状列石、太阳神庙、史前石桌、斯通亨治石栏、斯托肯立石圈等名，是欧洲著名的史前时代文化神庙遗址，位于英格兰威尔特郡索尔兹伯里平原。</a>
</div>
</div>
-
<div class='col'>
+
          </div>
-
<img src='/jscss/demoimg/wall_s9.jpg'/><a href='#'>加拿大自然风光<br/>加拿大国家森林公园在加拿大塞尔客克山和珞矶山上，掩映于积雪的峰巅、庞大的冰河和澄澈的湖沼之间的，是全世界最壮丽的国家公园。</a>
+
            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;We have found that in China, 69.35%  of the respondents believe that they suffer from water pollution and 14.52% of  them think their hometown is seriously polluted. But in U.K., surprisingly, 64%  of the people believe that they do not suffer from any kind of water pollution.  This interesting phenomenon appears in London (which we initially thought the  water was serious polluted by industry long times ago), all of the respondents  from London think that the water, for example in Thames, was clean and clear. </p>
-
</div>
+
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;People  show hesitation towards sewage treatment using bacteria. 32.26% of the Chinese  respondents can fully accept the recycled water using bacteria. For 64.52% of  them, recycled water using bacteria is not drinkable but it is acceptable for  toilet flushing. When gene modified bacteria involved, this number is decreased  to 59.68%. Obviously, 12.91% of the Chinese people refuse to using this kind of  water and even 3.23% of them fight against gene modified gem using for sewage  treatment. This situation is similar in U.K.&nbsp;  Things have changed in Microbial Fuel Cells, Thermo power are the main  power supply for China and UK (although most of the Englishmen do not know  that.&nbsp; These two countries, although  located in different continent, share different incomes and outcomes,  demonstrates a similar trend about MFC. Over 85.49% of Chinese think that the  electric bill is not expensive and 78.94% of Britain respondents hold the same  view. 76.78% of the respondents in china believe that it is necessary for their  own country to develop the use of MFCs, in U.K., this number is 63.16%.  </p>
 +
            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Overall, many people doubt it is safe to drink the water purified by bacteria,  but they are still optimistic to the future of MFCs.&nbsp;&nbsp;<br />
 +
            </p></td>
 +
          <td width="13%">&nbsp;</td>
 +
        </tr>
 +
      </table>
 +
      <p>&nbsp;</p>
 +
      <p>&nbsp;</p>
 +
      <p>&nbsp;</p></td>
 +
    </tr>
 +
  </table>
</div>
</div>
 +
<div id="apDiv5">
 +
  <table width="1365" border="0" background="bluebar.png">
 +
    <tr>
 +
      <td width="1365" height="463">&nbsp;</td>
 +
    </tr>
 +
  </table>
 +
  <p>&nbsp;</p>
 +
</div>
 +
<div id="apDiv6"><img src="lzulogo.png" width="220" height="221" /></div>
 +
<div id="apDiv8">
 +
  <p>&nbsp;</p>
 +
  <table width="100%" border="0">
 +
    <tr>
 +
      <td><table width="100%" border="0">
 +
        <tr>
 +
          <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;TEAM MEETING &amp; MEETUPS</td>
 +
        </tr>
 +
      </table></td>
 +
    </tr>
 +
    <tr>
 +
      <td><table width="100%" border="0">
 +
        <tr>
 +
          <td width="30%">&nbsp;</td>
 +
          <td width="57%"><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#我们队每周都会举办全体队员参加的研讨会。会上，队员们相互交流一周以来的工作进展，探讨实验以及human practice中遇到的各种问题，并一起寻求解决方法。有时，我们还会邀请指导老师和学术顾问出席我们的研讨会，为我们提出各种意见和建议。</p>
 +
            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;In addition, our  team attended several meetups, we joined CCiC (Central China iGEMers&rsquo;  Consortium) hold in Central China Agricultural University, Wuhan, China. The  conference aims to help teams improve performance in the 2014 iGEM competition,  arouse awareness of intra-regional collaboration so as to enhance better  communication among iGEM teams in China by establishing the CCiC. We listened  to the reports given by peer groups shared our ideas with them as well in  August. In October, we went to Beijing to visit another team-BIT and cooperated  with them.</p></td>
 +
          <td width="13%">&nbsp;</td>
 +
        </tr>
 +
      </table></td>
 +
    </tr>
 +
    <tr>
 +
      <td><p>&nbsp;</p>
 +
      <p>&nbsp;</p></td>
 +
    </tr>
 +
  </table>
 +
</div>
 +
<div id="apDiv9">
 +
  <h5>&nbsp;</h5>
 +
  <table width="100%" border="0" background="huils.jpg">
 +
    <tr>
 +
      <td><table width="100%" border="0">
 +
        <tr>
 +
          <td><p>&nbsp;</p>
 +
            <p>&nbsp;</p>
 +
            <table width="100%" border="0">
 +
            <tr>
 +
              <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; INFORMATION SESSIONS</td>
 +
            </tr>
 +
          </table></td>
 +
        </tr>
 +
        <tr>
 +
          <td height="218"><table width="100%" border="0">
 +
            <tr>
 +
              <td width="30%">&nbsp;</td>
 +
              <td width="57%"><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#我们在兰州大学的各个校区举办了多场宣讲会。为不同专业不同年级的同学们普及基本合成生物学知识，介绍iGEM比赛，以及我们的项目。讲座让数以百计的同学们了解了MFC的基本原理，以及使用MFC解决环境污染问题的美好前景。</p>
 +
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;此外，我们还联系了兰州市的一些中学，并计划在赴美参加GJ前在兰州市的多所高中举办类似的宣讲会，为高中生普及相关科学知识，让他们感受到合成生物学的魅力。</p>
 +
                <p>&nbsp;&nbsp;&nbsp;</p></td>
 +
              <td width="13%">&nbsp;</td>
 +
            </tr>
 +
          </table>
 +
            <p>&nbsp;</p></td>
 +
        </tr>
 +
        <tr>
 +
          <td><p>&nbsp;</p>
 +
            <p>&nbsp;</p></td>
 +
        </tr>
 +
      </table></td>
 +
    </tr>
 +
  </table>
 +
  <h5>&nbsp;</h5>
 +
</div>
 +
<div >
 +
  <div style=" height:890px;"> </div>
 +
<div id="menu">
<script type="text/javascript" src="/ajaxjs/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="/ajaxjs/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
<script type="text/javascript">
-
var temp=160;
+
$(document).ready(function(){
-
$('.picList .col').hover(function(){
+
$(".def-nav,.info-i").hover(function(){
-
$(this).find('a').stop(true).animate({top: temp=(temp==0?160:0) });
+
$(this).find(".pulldown-nav").addClass("hover");
 +
$(this).find(".pulldown").show();
 +
},function(){
 +
$(this).find(".pulldown").hide();
 +
$(this).find(".pulldown-nav").removeClass("hover");
 +
});
});
});
</script>
</script>
 +
<div class="hd-main clearfix" id="header">
 +
<a class="logo" href=""></a>
 +
<div class="navs">
 +
<a class="def-nav" href="">Home</a>
 +
<span class="separate"></span>
 +
<div class="def-nav current has-pulldown-special">
 +
<a class="pulldown-nav" href=""><em class="f-icon"></em>Project</a>
 +
<div class="pulldown app-url">
 +
<div class="content">
 +
<a class="li disk" href="">
 +
<span class="icon"></span>
 +
<span class="text">Background</span>
 +
</a>
 +
<a class="li tongxunlu" href="">
 +
<span class="icon"></span>
 +
<span class="text">Wet Lab</span>
 +
</a>
 +
<a class="li xiangce" href="">
 +
<span class="icon"></span>
 +
<span class="text">Dry Lab</span>
 +
</a>
 +
<a class="li note" href="">
 +
<span class="icon"></span>
 +
<span class="text">Parts</span>
 +
</a>
 +
                    <a class="li duanxin" href="">
 +
<span class="icon"></span>
 +
<span class="text">Interlab</span>
 +
</a>
 +
<a class="li zhaohui" href="">
 +
<span class="icon"></span>
 +
<span class="text">Future Work</span>
 +
</a>
 +
</div>
 +
  </div>
 +
</div>
 +
    <span class="separate"></span>
 +
<a class="def-nav" href="">Note Book</a>
 +
        <span class="separate"></span>
 +
<a class="def-nav" href="">Safety</a>
 +
        <span class="separate"></span>
 +
<a class="def-nav" href="">H. Practice</a>
 +
</div>
 +
<div class="info">
 +
<ul>
 +
<li class="info-i user-name has-pulldown">
 +
<em class="f-icon pull-arrow"></em>
 +
<a class="f-icon identity" href="" title="Our team"></a>
 +
<span class="name top-username">Our Team</span>
 +
<div class="pulldown user-info">
 +
<em class="arrow"></em>
 +
<div class="content">
 +
<span class="li"><a href="">Team Members</a></span>
 +
<span class="li"><a href="">Advisors</a></span>
 +
<span class="li"><a href="">Instructors</a></span>
 +
                        <span class="separate-li no-height"></span>
 +
<span class="li"><a href="">Attribution</a></span>
 +
                <span class="li"><a href="">Acknowledgement</a></span>
 +
<span class="separate-li no-height"></span>
 +
</div>
 +
</div>
 +
</li>
 +
<li class="info-i no-separate default-text has-pulldown">
 +
<em class="f-icon pull-arrow"></em>
 +
<span class="more" hideFocus="hideFocus">More</span>
 +
<div class="pulldown more-info">
 +
<em class="arrow"></em>
 +
<div class="content">
 +
<span class="separate-li no-height"></span>
 +
<span class="li"><a href="">Team Profile</a></span>
 +
<span class="li"><a href="">Lanzhou University</a></span>
 +
<span class="li"><a href="">LZU-CHINA 2013</a></span>
 +
</div>
 +
</div>
 +
</li>
 +
</ul>
 +
</div>
 +
</div>
 +
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
 +
</div>
 +
 +
 +
 +
 +
 +
</div>
 +
</div>
</body>
</body>
-
</html>
+
 
 +
 
 +
 
 +
 
 +
 
 +
<script type="text/javascript">
 +
function MM_showHideLayers() { //v9.0
 +
  var i,p,v,obj,args=MM_showHideLayers.arguments;
 +
  for (i=0; i<(args.length-2); i+=3)
 +
  with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
 +
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
 +
    obj.visibility=v; }
 +
}
 +
</script>

Revision as of 03:14, 15 October 2014

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> LZU-China 2014

 

  
 

 

 

 
 
 

 

 

 

        INVESTIGATE AND SURVEY
   

        We have designed a questionnaire to survey the masses' attitude toward sewage treatment, power generation, and MFCs. This questionnaire was made up by 16 questions and the respondents are random selected by all ages, genders and positions in China and U.K. 

古老巨石阵
巨石阵又称索尔兹伯里石环、环状列石、太阳神庙、史前石桌、斯通亨治石栏、斯托肯立石圈等名，是欧洲著名的史前时代文化神庙遗址，位于英格兰威尔特郡索尔兹伯里平原。

        We have found that in China, 69.35% of the respondents believe that they suffer from water pollution and 14.52% of them think their hometown is seriously polluted. But in U.K., surprisingly, 64% of the people believe that they do not suffer from any kind of water pollution. This interesting phenomenon appears in London (which we initially thought the water was serious polluted by industry long times ago), all of the respondents from London think that the water, for example in Thames, was clean and clear.

        People show hesitation towards sewage treatment using bacteria. 32.26% of the Chinese respondents can fully accept the recycled water using bacteria. For 64.52% of them, recycled water using bacteria is not drinkable but it is acceptable for toilet flushing. When gene modified bacteria involved, this number is decreased to 59.68%. Obviously, 12.91% of the Chinese people refuse to using this kind of water and even 3.23% of them fight against gene modified gem using for sewage treatment. This situation is similar in U.K.  Things have changed in Microbial Fuel Cells, Thermo power are the main power supply for China and UK (although most of the Englishmen do not know that.  These two countries, although located in different continent, share different incomes and outcomes, demonstrates a similar trend about MFC. Over 85.49% of Chinese think that the electric bill is not expensive and 78.94% of Britain respondents hold the same view. 76.78% of the respondents in china believe that it is necessary for their own country to develop the use of MFCs, in U.K., this number is 63.16%.

        Overall, many people doubt it is safe to drink the water purified by bacteria, but they are still optimistic to the future of MFCs.  

  

 

 

 
 

 

 

        TEAM MEETING & MEETUPS
 

        #我们队每周都会举办全体队员参加的研讨会。会上，队员们相互交流一周以来的工作进展，探讨实验以及human practice中遇到的各种问题，并一起寻求解决方法。有时，我们还会邀请指导老师和学术顾问出席我们的研讨会，为我们提出各种意见和建议。

        In addition, our team attended several meetups, we joined CCiC (Central China iGEMers’ Consortium) hold in Central China Agricultural University, Wuhan, China. The conference aims to help teams improve performance in the 2014 iGEM competition, arouse awareness of intra-regional collaboration so as to enhance better communication among iGEM teams in China by establishing the CCiC. We listened to the reports given by peer groups shared our ideas with them as well in August. In October, we went to Beijing to visit another team-BIT and cooperated with them.

  

 

 
 

 

 

         INFORMATION SESSIONS
 

        #我们在兰州大学的各个校区举办了多场宣讲会。为不同专业不同年级的同学们普及基本合成生物学知识，介绍iGEM比赛，以及我们的项目。讲座让数以百计的同学们了解了MFC的基本原理，以及使用MFC解决环境污染问题的美好前景。

        此外，我们还联系了兰州市的一些中学，并计划在赴美参加GJ前在兰州市的多所高中举办类似的宣讲会，为高中生普及相关科学知识，让他们感受到合成生物学的魅力。

   

  

 

 

 
 

Retrieved from "http://2014.igem.org/Team:LZU-China/tempfortest2"