Difference between revisions of "Team:SCAU-China/Safety"

(Prototype team page)
 
Line 1: Line 1:
−
{{SCAU-China}}
+
<style type="text/css">
−
<html>
+
#top_title{
 +
display:none;
 +
}
 +
* {
 +
            box-sizing: border-box;
 +
        }
  
 +
        a {
 +
            text-decoration: none;
 +
        }
  
−
<div class="column full_size">
+
        ul,
 +
        ol {
 +
            list-style: none;
 +
        }
  
−
<h1> Safety </h1>
+
        body {
−
<p>Please visit the <a href="https://2018.igem.org/Safety">Safety Hub</a> to find this year's safety requirements & deadlines, and to learn about safe & responsible research in iGEM.</p>
+
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 +
            font-size: 14px;
 +
            line-height: 1.42857143;
 +
            color: #333;
 +
            min-width: 768px;
 +
        }
  
−
<p>On this page of your wiki, you should write about how you are addressing any safety issues in your project. The wiki is a place where you can <strong>go beyond the questions on the safety forms</strong>, and write about whatever safety topics are most interesting in your project. (You do not need to copy your safety forms onto this wiki page.)</p>
+
        .navbar-default {
 +
            background-color: #EEE;
 +
            border-color: #e7e7e7;
 +
            top: 16px;
 +
            border-width: 0 0 1px;
 +
            position: fixed;
 +
            right: 0;
 +
            left: 0;
 +
            z-index: 1030;
 +
            min-height: 50px;
 +
            margin-bottom: 20px;
 +
            border: 1px solid transparent;
 +
            min-width: 768px;
 +
        }
  
−
</div>
+
        .container {
 +
            padding-right: 15px;
 +
            padding-left: 15px;
 +
            margin-right: auto;
 +
            margin-left: auto;
 +
        }
  
 +
        @media screen and (min-width: 768px) {
 +
            .container {
 +
                width: 750px;
 +
            }
 +
        }
  
−
<div class="column two_thirds_size">
+
        @media screen and (min-width: 992px) {
−
<h3>Safe Project Design</h3>
+
            .container {
 +
                width: 970px;
 +
            }
 +
        }
  
−
<p>Does your project include any safety features? Have you made certain decisions about the design to reduce risks? Write about them here! For example:</p>
+
        @media screen and (min-width: 1200px) {
 +
            .container {
 +
                width: 1170px;
 +
            }
 +
        }
  
−
<ul>
+
        .navbar-header {
−
<li>Choosing a non-pathogenic chassis</li>
+
            float: left;
−
<li>Choosing parts that will not harm humans / animals / plants</li>
+
        }
−
<li>Substituting safer materials for dangerous materials in a proof-of-concept experiment</li>
+
−
<li>Including an "induced lethality" or "kill-switch" device</li>
+
−
</ul>
+
  
−
</div>
+
        .navbar-brand {
 +
            color: #777;
 +
            float: left;
 +
            height: 50px;
 +
            padding: 15px 15px;
 +
            font-size: 18px;
 +
            line-height: 20px;
 +
        }
  
−
<div class="column third_size">
+
        .navbar>ul>li {
−
<h3>Safe Lab Work</h3>
+
            float: left;
 +
        }
  
−
<p>What safety procedures do you use every day in the lab? Did you perform any unusual experiments, or face any unusual safety issues? Write about them here!</p>
+
        .nav>li {
 +
            position: relative;
 +
            display: block;
 +
            margin-right: 10px;
 +
        }
  
 +
        .nav>li>a {
 +
            color: #777;
 +
            position: relative;
 +
            display: block;
 +
            padding: 8px 15px;
 +
            cursor: pointer;
 +
        }
  
−
<h3>Safe Shipment</h3>
+
        .nav>li>a:hover {
 +
            color: #333;
 +
        }
  
−
<p>Did you face any safety problems in sending your DNA parts to the Registry? How did you solve those problems?</p>
+
        .caret {
 +
            display: inline-block;
 +
            width: 0;
 +
            height: 0;
 +
            margin-left: 2px;
 +
            vertical-align: middle;
 +
            border-top: 4px solid #777;
 +
            border-right: 4px solid transparent;
 +
            border-left: 4px solid transparent;
 +
            position: absolute;
 +
            top: 18px;
 +
            right: 1px;
 +
        }
 +
 
 +
        .nav>li>a:hover+span {
 +
            border-top: 4px solid #333;
 +
        }
 +
 
 +
        .nav>li .dropdown-menu {
 +
            margin-top: 0;
 +
            border-top-left-radius: 0;
 +
            border-top-right-radius: 0;
 +
            position: absolute;
 +
            top: 35px;
 +
            left: 0;
 +
            z-index: 1000;
 +
            float: left;
 +
            min-width: 160px;
 +
            padding: 5px 0;
 +
            margin: 2px 0 0;
 +
            font-size: 14px;
 +
            text-align: left;
 +
            list-style: none;
 +
            background-color: #fff;
 +
            -webkit-background-clip: padding-box;
 +
            background-clip: padding-box;
 +
            border: 1px solid #ccc;
 +
            border: 1px solid rgba(0, 0, 0, .15);
 +
            border-radius: 4px;
 +
            -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
 +
            box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
 +
            display: none;
 +
        }
 +
 
 +
        .dropdown-menu>li {
 +
            display: list-item;
 +
        }
 +
 
 +
        .dropdown-menu>li>a {
 +
            display: block;
 +
            padding: 3px 20px;
 +
            clear: both;
 +
            font-weight: normal;
 +
            line-height: 1.42857143;
 +
            color: #333;
 +
            white-space: nowrap;
 +
        }
 +
        .dropdown-menu>li>a:hover {
 +
            background-color: #eee;
 +
        }
 +
html {
 +
  font-family: sans-serif;
 +
  -webkit-text-size-adjust: 100%;
 +
      -ms-text-size-adjust: 100%;
 +
}
 +
#mainDiv{
 +
 +
  margin: 0;
 +
  min-height: 1000px;
 +
  padding-top: 70px;
 +
  min-width: 1140px;
 +
  background: url('https://static.igem.org/mediawiki/2018/4/4b/T--SCAU-China--ziyeMain.jpg') no-repeat center center;
 +
}
 +
.heart {
 +
  width: 1140px;
 +
  margin: 0 auto;/* 通用的版心 */
 +
}
 +
#mask {
 +
    width: 100%;
 +
    height: 1000px;
 +
    background: rgba(0, 0, 0, 0.3);
 +
    margin-top: -15px;
 +
    padding-top: 15px;
 +
}
 +
.DBoard {/* 展板样式 */
 +
    margin: 0px auto 40px auto;
 +
    width: 1000px;
 +
    height: 500px;
 +
    border-radius: 3px;
 +
    background-color: #fff;
 +
    overflow: hidden;
 +
    position: relative;
 +
}
 +
.DBoard0 {/*文字样式*/
 +
    margin: 0px auto 40px auto;
 +
    width: 1000px;
 +
    height: 500px;
 +
    border-radius: 3px;
 +
    color: white;
 +
    overflow: hidden;
 +
    position: relative;
 +
}
 +
#mask p {
 +
    color: #fff;
 +
    text-align: center;
 +
}
 +
#lists-DB {
 +
    cursor: pointer;
 +
}
 +
#lists-DB:hover #arr-l,#lists-DB:hover #arr-r{
 +
    display: block;
 +
}
 +
#lists {
 +
    position: relative;
 +
    width: 4000px;
 +
}
 +
#lists img {
 +
    float: left;
 +
}
 +
#arr-l,#arr-r {
 +
    display: block;
 +
    position: absolute;
 +
    width: 40px;
 +
    height: 60px;
 +
    background: rgba(0, 0, 0, .4);
 +
    top: 50%;
 +
    margin-top: -30px;
 +
    color: #fff;
 +
    font: 600 30px/60px "宋体";
 +
    line-height: 60px;
 +
    text-align: center;
 +
    display: none;
 +
}
 +
#arr-l:hover,#arr-r:hover {
 +
    background: rgba(0, 0, 0, .7);
 +
}
 +
#arr-l {
 +
    left: 0;
 +
}
 +
#arr-r {
 +
    right: 0;
 +
}
 +
#buttons {
 +
    position: absolute;
 +
    bottom: 15px;
 +
    left: 50%;
 +
}
 +
#buttons span {
 +
    width: 12px;
 +
    height: 12px;
 +
    background: #ccc;
 +
    float: left;
 +
    border-radius: 50%;
 +
    margin: 0 5px 0 5px;
 +
}
 +
.on {
 +
    background-color: #333 !important;
 +
}
 +
#toTop {
 +
    width: 50px;
 +
    height: 50px;
 +
    background: url("https://static.igem.org/mediawiki/2018/b/b6/T--SCAU-China--toTop.png") no-repeat center center rgba(0, 0, 0, .3);
 +
    position: fixed;
 +
    right: 50px;
 +
    bottom: 5px;
 +
    cursor: pointer;
 +
    display: none;
 +
}
 +
 
 +
   
 +
}
 +
#img4{
 +
    width: 10%;
 +
}
 +
#content {
 +
    width: 101%;
 +
    padding: 15px;
 +
    border: none;
 +
    color: black;
 +
    margin-left: 20px;
 +
    margin-right: auto;
 +
    background-color: #ffffff;
 +
    position: relative;
 +
}
 +
#content {
 +
    position: relative;
 +
    width: 101%;
 +
    margin: 0 auto;
 +
    padding: 5px 5px 5px 5px;
 +
    background: white;
 +
    color: black;
 +
    border-left: 1px solid #444444;
 +
    border-right: 1px solid #444444;
 +
    line-height: 1.5em;
 +
    z-index: 2;
 +
}
 +
#title{
 +
    height: 100px;
 +
    background: rgba(0, 0, 0, 0.3);
 +
    text-align: left;
 +
    font-size: 60px;
 +
    color: white;
 +
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 +
    line-height: 100px;
 +
 
 +
}
 +
#article1{
 +
    background: rgba(0, 0, 0, 0);
 +
 
 +
}
 +
#article1 p{
 +
 
 +
    text-align: left;
 +
    position: relative;
 +
    color: white;
 +
    margin-top: 20px;
 +
   
 +
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 +
    font-size:20px;
 +
}
 +
 
 +
 
 +
</style>
 +
<div class="navbar-default">
 +
        <div class="container">
 +
            <div class="navbar-header">
 +
                <a href="https://2018.igem.org/Team:SCAU-China" class="navbar-brand">SCAU-2018</a>
 +
            </div>
 +
            <div class="navbar">
 +
                <ul style="float: left;" class="nav">
 +
                    <li class="dropdown">
 +
                        <a href="javascript:void(0)">TEAM</a>
 +
                        <span class="caret"></span>
 +
                        <ul class='dropdown-menu'>
 +
                            <li>
 +
                                <a href="#">Time shaft</a>
 +
                            </li>
 +
                            <li>
 +
                                <a href="#">Members</a>
 +
                            </li>
 +
                            <li>
 +
                                <a href="#">Advisors</a>
 +
                            </li>
 +
                            <li>
 +
                                <a href="#">Teachers</a>
 +
                            </li>
 +
                            <li>
 +
                                <a href="#">Attributions</a>
 +
                            </li>
 +
                            <li>
 +
                                <a href="#">Collaborations</a>
 +
                            </li>
 +
                        </ul>
 +
                    </li>
 +
                    <li class="dropdown">
 +
                        <a href="javascript:void(0)">PROJECT</a>
 +
                        <span class="caret"></span>
 +
                        <ul class='dropdown-menu'>
 +
                            <li><a href="#">Description</a></li>
 +
                            <li><a href="#">Design</a></li>
 +
                        </ul>
 +
                    </li>
 +
                    <li class="dropdown">
 +
                        <a href="javascript:void(0)">PART</a>
 +
                        <span class="caret"></span>
 +
                        <ul class='dropdown-menu'>
 +
                            <li><a href="#">Basic parts</a></li>
 +
                        </ul>
 +
                    </li>
 +
                    <li class="dropdown">
 +
                        <a href="javascript:void(0)">RESULT</a>
 +
                        <span class="caret"></span>
 +
                        <ul class='dropdown-menu'>
 +
                            <li><a href="#">Experiments</a></li>
 +
                            <li><a href="#">Proof</a></li>
 +
                            <li><a href="#">Demonstrate</a></li>
 +
                            <li><a href="#">Model</a></li>
 +
                        </ul>
 +
                    </li>
 +
                    <li class="dropdown">
 +
                        <a href="javascript:void(0)">NOTE</a>
 +
                        <span class="caret"></span>
 +
                        <ul class='dropdown-menu'>
 +
                          <li><a href="#">NoteBook</a></li>
 +
                          <li><a href="#">Gallery</a></li>
 +
                          <li><a href="#">Protocol</a></li>
 +
                        </ul>
 +
                    </li>
 +
                </ul>
 +
                <ul style="float: right;" class="nav">
 +
                    <li class="dropdown">
 +
                        <a href="javascript:void(0)">SAFETY</a>
 +
                        <span class="caret"></span>
 +
                        <ul class='dropdown-menu'>
 +
                            <li><a href="#">Safety</a></li>
 +
                        </ul>
 +
                    </li>
 +
                    <li class="dropdown">
 +
                        <a href="javascript:void(0)">HUMAN PRACTICES</a>
 +
                        <span class="caret"></span>
 +
                        <ul class='dropdown-menu'>
 +
                            <li><a href="#">Integrated</a></li>
 +
                            <li><a href="#">Engagement</a></li>
 +
                            <li><a href="#">Entrepreneurship</a></li>
 +
                            <li><a href="#"></a></li>
 +
                            <li><a href="#"></a></li>
 +
                        </ul>
 +
                    </li>
 +
                </ul>
 +
            </div>
 +
        </div>
 +
    </div>
 +
 
 +
 
 +
 
 +
<div id="mainDiv">
 +
<div class="heart"><!-- 版心 -->
 +
    <div id="mask"><!-- 半透明底板 -->
 +
     
 +
      <div class="DBoard" id="title">   
 +
      Safety
 +
      </div>
 +
      <div class="DBoard" id="article1"><!-- 展板 -->
 +
        <p>In many of the world's countries drought, chronic water shortage is a fact of life. Therefore, to find a efficient way
 +
        to preserve water in the arid and semiarid environments is imminent.</p>
 +
 
 +
      <p>The use of cyanobacteria as soil conditioners has been studied intermittently for many decades. Some of the documented direct effects of cyanobacterial inoculation are related to soil stabilization and improvement, enrichment in nutrients and increase in moisture content. Recently inoculation approaches have proven to be effective tools also for triggering land rehabilitation in arid and semiarid environments.
 +
 
 +
</p>
 +
      <p>Bacterial cellulose is a strong and ultrapure form of cellulose produced naturally by several species of the Acetobacteraceae. Bacterial cellulose produced by Gluconacetobacter xylinus possesses an abundance of desirable properties, its special 3D structure make it has a good water-retaining property.</p>
 +
      <p>Our project try to investigates the potential for using cellulose synthesized by cyanobacteria as an alternative.Makes our product has both the advantages of cyanobacterial crust, but also have the ability to produces high water-retention bacterial cellulose.To produce BC in Cyanobacteria, a suite of genes involved with cellulose synthesis in G. xylinus will be transferred to into the terricolous, unicellular cyanobacterium,  Scytonema javanicum and Microcolus vaginatus.</p>
 +
 
 +
      </div>
 +
 
 +
   
 +
 
 +
 
 +
   
 +
      <p>School's name:SCAU</p>
 +
      <p>Member's name:SCAU</p>
 +
      <p>Designed by:SCAU</p>
 +
    </div>
 +
  </div>
 
</div>
 
</div>
 +
  <!-- 回到顶部按钮 -->
 +
  <em id="toTop"></em>
 +
 +
<script>
 +
        var dropdownBoxs = document.getElementsByClassName('dropdown');
 +
        var dropdownMenus = document.getElementsByClassName('dropdown-menu');
 +
        for (let i = 0 ; i < dropdownBoxs.length ; i ++) {
 +
            // console.log(dropdownBoxs[i]);
 +
            // console.log(dropdownMenus[i]);
 +
            dropdownBoxs[i].index = i;
 +
            dropdownBoxs[i].onclick = function () {
 +
                var styles = document.defaultView.getComputedStyle(dropdownMenus[i]) || dropdownMenus[i].currentStyle;
 +
                // console.log(styles.display);
 +
                if (styles.display == 'none') {
 +
                    for (let j = 0 ; j < dropdownBoxs.length ; j ++) {
 +
                        dropdownMenus[j].style.display = 'none';
 +
                        dropdownMenus[i].style.display = 'block';
 +
                    }
 +
                } else {
 +
                    for (let j = 0 ; j < dropdownBoxs.length ; j ++) {
 +
                        dropdownMenus[j].style.display = 'none';
 +
                    }
 +
                }
 +
            }
 +
        }
 +
    </script>
 +
 +
 +
    <script type="text/javascript">
 +
 
 +
      var a= function() {
 +
    var box01 = document.getElementById("lists-DB");
 +
    var lis = document.getElementById("lists");//获得轮播图图片盒子
 +
    var btns = document.getElementById("buttons");//获得按钮盒子
 +
    var imgs = lis.getElementsByTagName("img");//获得图片伪数组
 +
    btns.style.width = 24 * (imgs.length - 2) + "px";
 +
    btns.style.marginLeft = -(12 * (imgs.length - 2)) + "px";//动态赋值
 +
    for(var i = 0;i < imgs.length - 2; i++){
 +
        //动态生成小圆点
 +
        var span = document.createElement("span");
 +
        btns.appendChild(span);
 +
    }
 +
 +
 +
    //轮播图正式部分
 +
    var prev = document.getElementById("arr-l");
 +
    var next = document.getElementById("arr-r");
 +
    var animated = false;//防止计时器多次被触发变量
 +
 +
    function animate(offset) {
 +
        var time = 300;//滚动一张图片总用时
 +
        var inteval = 10;//滚动一次的间隔时间
 +
        var speed = offset / (time / inteval);//每次滚动滑动的像素
 +
        var left = parseInt(lis.style.left) + offset;//先计算出滚动后的left值
 +
        function go() {
 +
            animated = true;//为true代表正在运行
 +
            //滑动函数
 +
            if(((speed > 0) + (parseInt(lis.style.left) < left)===2) || ((speed < 0) + (parseInt(lis.style.left)) > left===2)){
 +
                lis.style.left = parseInt(lis.style.left) + speed + "px";
 +
                setTimeout(go,inteval);//设置计时器
 +
            }
 +
            else {
 +
                lis.style.left = left + "px";
 +
                if(parseInt(lis.style.left) > -1000) lis.style.left = -(1000 * (imgs.length - 2)) + "px";
 +
                if(parseInt(lis.style.left) < -(1000 * (imgs.length - 2))) lis.style.left = -1000 + "px";
 +
                animated = false;//结束运行
 +
            }
 +
        }
 +
        go();//调用函数
 +
       
 +
    }
 +
    prev.onclick = function() {
 +
        if(animated) return;//正在轮播停止
 +
        if(index == 0) index = spans.length - 1;
 +
        else index --;
 +
        animate(1000);
 +
        showButton();
 +
    }
 +
    next.onclick = function() {
 +
        if(animated) return;
 +
        if(index == spans.length - 1) index = 0;
 +
        else index ++;
 +
        animate(-1000);
 +
        showButton();
 +
    }
 +
    var index = 0;//记录现在className为on的按钮
 +
 +
    var spans = btns.getElementsByTagName("span");//得到btns下所有的span标签
 +
    spans[0].className = "on";
 +
    for(var i = 0;i < spans.length;i ++ ) {
 +
        spans[i].index = i;//自定义属性
 +
        spans[i].onclick = function() {
 +
            if(animated) return;
 +
            if(this.className == "on") return;
 +
            animate((index - this.index) * 1000);
 +
            index = this.index;
 +
            showButton();
 +
        }
 +
    }
 +
 +
    function showButton() { //显示按钮运动的函数
 +
        for(var j = 0;j < spans.length;j ++) {//排它思想
 +
                //if(spans[j].className == "on") oldIndex = j;
 +
                spans[j].className = "";
 +
                spans[index].className = "on";
 +
        }
 +
    }
 +
 +
    var timer;//计时器变量 , 这里为什么不能为null
 +
    var interval = 3000;//点击间隔时间
 +
 +
    function play() {//自动点击next函数
 +
        timer = setTimeout(function(){
 +
            next.onclick();//自动点击next
 +
            play();//递归调用
 +
        },interval);
 +
    }
 +
 +
    function stop() {
 +
        //停止函数
 +
        clearTimeout(timer);
 +
    }
 +
 +
 +
    box01.onmouseover = stop; //鼠标悬浮在轮播图上时停止
 +
    box01.onmouseout = play;//鼠标离开轮播图继续
 +
    play();//先自己调用一次
 +
}
 +
a();
 +
  </script>
 +
    <script type="text/javascript">
 +
            //封装函数js文件，方便调用
 +
    function $(id) {return document.getElementById(id);}//封装获取id对象函数
 +
    function show(obj) {obj.style.display = "block";}//封装显示函数
 +
    function hidden(obj) {obj.style.display = "none";}//封装隐藏函数
 +
    function scroll(){
 +
        if(window.pageYOffset != null) {
 +
            //ie9+ 和 其他浏览器
 +
            return {
 +
                top: window.pageYOffset,
 +
                left: window.pageXOffset
 +
            }
 +
        }
 +
        else if(document.compatMode == "CSS1Compat") {
 +
            //非怪异浏览器：没有头部的
 +
            return {
 +
                top: document.documentElement.scrollTop,
 +
                left: document.documentElement.scrollLeft
 +
            }
 +
        }
 +
        return {//剩下的全部都是怪异浏览器
 +
            top: document.body.scrollTop,
 +
            left: document.body.scrollLeft
 +
        }
 +
    }
 +
 +
    var leader = 0,target = 0,timer = null;//计时器变量
 +
    window.onscroll = function() {
 +
        //滚动时执行的函数
 +
        scroll().top > 0 ? show($("toTop")) : hidden($("toTop"));//隐藏和显示totop
 +
        leader = scroll().top; //实时记录滚动距离
 +
    }
  
 +
    $("toTop").onclick = function() {
 +
        //toTop被点击时执行的函数
 +
        target = 0;
 +
        timer = setInterval(function() {
 +
            leader = leader + (target - leader) / 10;
 +
            window.scrollTo(0,leader);
 +
            if(leader == target) clearInterval(timer);//当到达顶端清除计时器
 +
            //必须写在里面,因为在计时器执行时判断
 +
        },20);
 +
    }
  
−
</html>
+
    </script>

Revision as of 13:01, 28 June 2018

<style type="text/css">

  1. top_title{

display:none; } 

* {
           box-sizing: border-box;
       }

       a {
           text-decoration: none;
       }

       ul,
       ol {
           list-style: none;
       }

       body {
           font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
           font-size: 14px;
           line-height: 1.42857143;
           color: #333;
           min-width: 768px;
       }

       .navbar-default {
           background-color: #EEE;
           border-color: #e7e7e7;
           top: 16px;
           border-width: 0 0 1px;
           position: fixed;
           right: 0;
           left: 0;
           z-index: 1030;
           min-height: 50px;
           margin-bottom: 20px;
           border: 1px solid transparent;
           min-width: 768px;
       }

       .container {
           padding-right: 15px;
           padding-left: 15px;
           margin-right: auto;
           margin-left: auto;
       }

       @media screen and (min-width: 768px) {
           .container {
               width: 750px;
           }
       }

       @media screen and (min-width: 992px) {
           .container {
               width: 970px;
           }
       }

       @media screen and (min-width: 1200px) {
           .container {
               width: 1170px;
           }
       }

       .navbar-header {
           float: left;
       }

       .navbar-brand {
           color: #777;
           float: left;
           height: 50px;
           padding: 15px 15px;
           font-size: 18px;
           line-height: 20px;
       }

       .navbar>ul>li {
           float: left;
       }

       .nav>li {
           position: relative;
           display: block;
           margin-right: 10px;
       }

       .nav>li>a {
           color: #777;
           position: relative;
           display: block;
           padding: 8px 15px;
           cursor: pointer;
       }

       .nav>li>a:hover {
           color: #333;
       }

       .caret {
           display: inline-block;
           width: 0;
           height: 0;
           margin-left: 2px;
           vertical-align: middle;
           border-top: 4px solid #777;
           border-right: 4px solid transparent;
           border-left: 4px solid transparent;
           position: absolute;
           top: 18px;
           right: 1px;
       }

       .nav>li>a:hover+span {
           border-top: 4px solid #333;
       }

       .nav>li .dropdown-menu {
           margin-top: 0;
           border-top-left-radius: 0;
           border-top-right-radius: 0;
           position: absolute;
           top: 35px;
           left: 0;
           z-index: 1000;
           float: left;
           min-width: 160px;
           padding: 5px 0;
           margin: 2px 0 0;
           font-size: 14px;
           text-align: left;
           list-style: none;
           background-color: #fff;
           -webkit-background-clip: padding-box;
           background-clip: padding-box;
           border: 1px solid #ccc;
           border: 1px solid rgba(0, 0, 0, .15);
           border-radius: 4px;
           -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
           box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
           display: none;
       }

       .dropdown-menu>li {
           display: list-item;
       }

       .dropdown-menu>li>a {
           display: block;
           padding: 3px 20px;
           clear: both;
           font-weight: normal;
           line-height: 1.42857143;
           color: #333;
           white-space: nowrap;
       }
       .dropdown-menu>li>a:hover {
           background-color: #eee;
       }

html { 

 font-family: sans-serif;
 -webkit-text-size-adjust: 100%;
     -ms-text-size-adjust: 100%;

}

  1. mainDiv{
 margin: 0;
 min-height: 1000px;
 padding-top: 70px;
 min-width: 1140px;
 background: url('https://static.igem.org/mediawiki/2018/4/4b/T--SCAU-China--ziyeMain.jpg') no-repeat center center;

} .heart { 

 width: 1140px;
 margin: 0 auto;/* 通用的版心 */

}

  1. mask {
   width: 100%;
   height: 1000px;
   background: rgba(0, 0, 0, 0.3);
   margin-top: -15px;
   padding-top: 15px;

} .DBoard {/* 展板样式 */ 

   margin: 0px auto 40px auto;
   width: 1000px;
   height: 500px;
   border-radius: 3px;
   background-color: #fff;
   overflow: hidden;
   position: relative;

} .DBoard0 {/*文字样式*/ 

   margin: 0px auto 40px auto;
   width: 1000px;
   height: 500px;
   border-radius: 3px;
   color: white;
   overflow: hidden;
   position: relative;

}

  1. mask p {
   color: #fff;
   text-align: center;

}

  1. lists-DB {
   cursor: pointer;

}

  1. lists-DB:hover #arr-l,#lists-DB:hover #arr-r{
   display: block;

}

  1. lists {
   position: relative;
   width: 4000px;

}

  1. lists img {
   float: left;

}

  1. arr-l,#arr-r {
   display: block;
   position: absolute;
   width: 40px;
   height: 60px;
   background: rgba(0, 0, 0, .4);
   top: 50%;
   margin-top: -30px;
   color: #fff;
   font: 600 30px/60px "宋体";
   line-height: 60px;
   text-align: center;
   display: none;

}

  1. arr-l:hover,#arr-r:hover {
   background: rgba(0, 0, 0, .7);

}

  1. arr-l {
   left: 0;

}

  1. arr-r {
   right: 0;

}

  1. buttons {
   position: absolute;
   bottom: 15px;
   left: 50%;

}

  1. buttons span {
   width: 12px;
   height: 12px;
   background: #ccc;
   float: left;
   border-radius: 50%;
   margin: 0 5px 0 5px;

} .on { 

   background-color: #333 !important;

}

  1. toTop {
   width: 50px;
   height: 50px;
   background: url("T--SCAU-China--toTop.png") no-repeat center center rgba(0, 0, 0, .3);
   position: fixed;
   right: 50px;
   bottom: 5px;
   cursor: pointer;
   display: none;

}


}

  1. img4{
   width: 10%;

}

  1. content {
   width: 101%;
   padding: 15px;
   border: none;
   color: black;
   margin-left: 20px;
   margin-right: auto;
   background-color: #ffffff;
   position: relative;

}

  1. content {
   position: relative;
   width: 101%;
   margin: 0 auto;
   padding: 5px 5px 5px 5px;
   background: white;
   color: black;
   border-left: 1px solid #444444;
   border-right: 1px solid #444444;
   line-height: 1.5em;
   z-index: 2;

}

  1. title{
   height: 100px;
   background: rgba(0, 0, 0, 0.3);
   text-align: left;
   font-size: 60px;
   color: white;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   line-height: 100px;

}

  1. article1{
    background: rgba(0, 0, 0, 0);

}

  1. article1 p{
   text-align: left;
   position: relative;
   color: white;
   margin-top: 20px;
   
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size:20px;

}


</style> 

               <a href="https://2018.igem.org/Team:SCAU-China" class="navbar-brand">SCAU-2018</a>
  • <a href="javascript:void(0)">TEAM</a>
    • <a href="#">Time shaft</a>
    • <a href="#">Members</a>
    • <a href="#">Advisors</a>
    • <a href="#">Teachers</a>
    • <a href="#">Attributions</a>
    • <a href="#">Collaborations</a>
  • <a href="javascript:void(0)">PROJECT</a>
    • <a href="#">Description</a>
    • <a href="#">Design</a>
  • <a href="javascript:void(0)">PART</a>
    • <a href="#">Basic parts</a>
  • <a href="javascript:void(0)">RESULT</a>
    • <a href="#">Experiments</a>
    • <a href="#">Proof</a>
    • <a href="#">Demonstrate</a>
    • <a href="#">Model</a>
  • <a href="javascript:void(0)">NOTE</a>
    • <a href="#">NoteBook</a>
    • <a href="#">Gallery</a>
    • <a href="#">Protocol</a>
  • <a href="javascript:void(0)">SAFETY</a>
    • <a href="#">Safety</a>
  • <a href="javascript:void(0)">HUMAN PRACTICES</a>
    • <a href="#">Integrated</a>
    • <a href="#">Engagement</a>
    • <a href="#">Entrepreneurship</a>
    • <a href="#"></a>
    • <a href="#"></a>


      Safety

In many of the world's countries drought, chronic water shortage is a fact of life. Therefore, to find a efficient way to preserve water in the arid and semiarid environments is imminent.

The use of cyanobacteria as soil conditioners has been studied intermittently for many decades. Some of the documented direct effects of cyanobacterial inoculation are related to soil stabilization and improvement, enrichment in nutrients and increase in moisture content. Recently inoculation approaches have proven to be effective tools also for triggering land rehabilitation in arid and semiarid environments.

Bacterial cellulose is a strong and ultrapure form of cellulose produced naturally by several species of the Acetobacteraceae. Bacterial cellulose produced by Gluconacetobacter xylinus possesses an abundance of desirable properties, its special 3D structure make it has a good water-retaining property.

Our project try to investigates the potential for using cellulose synthesized by cyanobacteria as an alternative.Makes our product has both the advantages of cyanobacterial crust, but also have the ability to produces high water-retention bacterial cellulose.To produce BC in Cyanobacteria, a suite of genes involved with cellulose synthesis in G. xylinus will be transferred to into the terricolous, unicellular cyanobacterium, Scytonema javanicum and Microcolus vaginatus.



School's name:SCAU

Member's name:SCAU

Designed by:SCAU

 

<script>
       var dropdownBoxs = document.getElementsByClassName('dropdown');
       var dropdownMenus = document.getElementsByClassName('dropdown-menu');
       for (let i = 0 ; i < dropdownBoxs.length ; i ++) {
           // console.log(dropdownBoxs[i]);
           // console.log(dropdownMenus[i]);
           dropdownBoxs[i].index = i;
           dropdownBoxs[i].onclick = function () {
               var styles = document.defaultView.getComputedStyle(dropdownMenus[i]) || dropdownMenus[i].currentStyle;
               // console.log(styles.display);
               if (styles.display == 'none') {
                   for (let j = 0 ; j < dropdownBoxs.length ; j ++) {
                       dropdownMenus[j].style.display = 'none';
                       dropdownMenus[i].style.display = 'block';
                   }
               } else {
                   for (let j = 0 ; j < dropdownBoxs.length ; j ++) {
                       dropdownMenus[j].style.display = 'none';
                   }
               }
           }
       }
   </script>



   <script type="text/javascript">
  
      var a= function() {
   var box01 = document.getElementById("lists-DB");
   var lis = document.getElementById("lists");//获得轮播图图片盒子
   var btns = document.getElementById("buttons");//获得按钮盒子
   var imgs = lis.getElementsByTagName("img");//获得图片伪数组
   btns.style.width = 24 * (imgs.length - 2) + "px";
   btns.style.marginLeft = -(12 * (imgs.length - 2)) + "px";//动态赋值
   for(var i = 0;i < imgs.length - 2; i++){
       //动态生成小圆点
       var span = document.createElement("span");
       btns.appendChild(span);
   }



   //轮播图正式部分
   var prev = document.getElementById("arr-l");
   var next = document.getElementById("arr-r");
   var animated = false;//防止计时器多次被触发变量

   function animate(offset) {
       var time = 300;//滚动一张图片总用时
       var inteval = 10;//滚动一次的间隔时间
       var speed = offset / (time / inteval);//每次滚动滑动的像素
       var left = parseInt(lis.style.left) + offset;//先计算出滚动后的left值
       function go() {
           animated = true;//为true代表正在运行
           //滑动函数
           if(((speed > 0) + (parseInt(lis.style.left) < left)===2) || ((speed < 0) + (parseInt(lis.style.left)) > left===2)){
               lis.style.left = parseInt(lis.style.left) + speed + "px";
               setTimeout(go,inteval);//设置计时器
           }
           else {
               lis.style.left = left + "px";
               if(parseInt(lis.style.left) > -1000) lis.style.left = -(1000 * (imgs.length - 2)) + "px";
               if(parseInt(lis.style.left) < -(1000 * (imgs.length - 2))) lis.style.left = -1000 + "px";
               animated = false;//结束运行
           }
       }
       go();//调用函数
       
   }
   prev.onclick = function() {
       if(animated) return;//正在轮播停止
       if(index == 0) index = spans.length - 1;
       else index --;
       animate(1000);
       showButton();
   }
   next.onclick = function() {
       if(animated) return;
       if(index == spans.length - 1) index = 0;
       else index ++;
       animate(-1000);
       showButton();
   }
   var index = 0;//记录现在className为on的按钮

   var spans = btns.getElementsByTagName("span");//得到btns下所有的span标签
   spans[0].className = "on";
   for(var i = 0;i < spans.length;i ++ ) {
       spans[i].index = i;//自定义属性
       spans[i].onclick = function() {
           if(animated) return;
           if(this.className == "on") return;
           animate((index - this.index) * 1000);
           index = this.index;
           showButton();
       }
   }

   function showButton() { //显示按钮运动的函数
       for(var j = 0;j < spans.length;j ++) {//排它思想
               //if(spans[j].className == "on") oldIndex = j;
               spans[j].className = "";
               spans[index].className = "on";
       }
   }

   var timer;//计时器变量 , 这里为什么不能为null
   var interval = 3000;//点击间隔时间

   function play() {//自动点击next函数
       timer = setTimeout(function(){
           next.onclick();//自动点击next
           play();//递归调用
       },interval);
   }

   function stop() {
       //停止函数
       clearTimeout(timer);
   }



   box01.onmouseover = stop; //鼠标悬浮在轮播图上时停止
   box01.onmouseout = play;//鼠标离开轮播图继续
   play();//先自己调用一次

} a(); 

  </script>
    <script type="text/javascript">
           //封装函数js文件，方便调用
   function $(id) {return document.getElementById(id);}//封装获取id对象函数
   function show(obj) {obj.style.display = "block";}//封装显示函数
   function hidden(obj) {obj.style.display = "none";}//封装隐藏函数
   function scroll(){
       if(window.pageYOffset != null) {
           //ie9+ 和 其他浏览器
           return {
               top: window.pageYOffset,
               left: window.pageXOffset
           }
       }
       else if(document.compatMode == "CSS1Compat") {
           //非怪异浏览器：没有头部的
           return {
               top: document.documentElement.scrollTop,
               left: document.documentElement.scrollLeft
           }
       }
       return {//剩下的全部都是怪异浏览器
           top: document.body.scrollTop,
           left: document.body.scrollLeft
       }
   }

   var leader = 0,target = 0,timer = null;//计时器变量
   window.onscroll = function() {
       //滚动时执行的函数
       scroll().top > 0 ? show($("toTop")) : hidden($("toTop"));//隐藏和显示totop
       leader = scroll().top; //实时记录滚动距离
   }

   $("toTop").onclick = function() {
       //toTop被点击时执行的函数
       target = 0;
       timer = setInterval(function() {
           leader = leader + (target - leader) / 10;
           window.scrollTo(0,leader);
           if(leader == target) clearInterval(timer);//当到达顶端清除计时器
           //必须写在里面,因为在计时器执行时判断
       },20);
   }

   </script>