Template:SUSTC/3

From 2012.igem.org

(Difference between revisions)
(Created page with "{{Template:SUSTC/1}} {{Template:SUSTC/2}} {|align="justify" <html> <head> <style> body { background-image:url(https://static.igem.org/mediawiki/2012/6/69/SUSTC_SHENZHEN_A_Backgroun...")
 
(31 intermediate revisions not shown)
Line 1: Line 1:
-
{{Template:SUSTC/1}}
+
<!--#F6C739  土黄色    #C3D46A 深绿色      #00BFFF深天蓝  #FF69B4 hotpink-->
-
{{Template:SUSTC/2}}
+
-
{|align="justify"
+
-
 
+
-
 
+
<html>
<html>
<head>
<head>
-
<style>
+
<style type="text/css">
body
body
{
{
-
   background-image:url(https://static.igem.org/mediawiki/2012/6/69/SUSTC_SHENZHEN_A_Background.png);
+
   background-color:#383838;
-
background-attachment:fixed;
+
}
}
</style>
</style>
 +
 +
<style type="text/css">
 +
<!--我们需要先把igem原网站的一些东西删掉-->
 +
#globalWrapper {width: 100%;  }
 +
#top-section {width: 100%; height:100%; border:none;}
 +
#p-logo {display:none;}
 +
#search-controls {display:none;}
 +
.printfooter {display:none;}
 +
#footer-box {border:none;}
 +
.firstHeading {display:none;}
 +
#content { border:none;  }
 +
#bodyContent {border:none;  }
 +
 +
<!--删除完毕-->
 +
 +
body
 +
{
 +
  background-color:#CCFFCC;
 +
}
 +
#sustc_wrapper
 +
{
 +
  width:100%;
 +
  margin:0 auto;
 +
}
 +
 +
#sustc_header
 +
{
 +
  height:285px;
 +
 +
  border-width:4px;
 +
  border-color: #FF9900 ;
 +
  border-style:solid none solid none;
 +
  background-color:#CCFFCC;
 +
 
 +
 +
}
 +
#sustc_menu
 +
{
 +
  height:35px;
 +
  width:920px;
 +
  margin-left:20px;
 +
  color:blue;
 +
  display:block;
 +
<!--  background-color:yellow;-->
 +
  border-radius: 7px;
 +
  background-color:#CCFFCC;
 +
 +
}
 +
 +
#sustc_menu li
 +
{
 +
  list-style:none;
 +
  float:left;
 +
  display:block;
 +
  margin-left:10px;
 +
<!-- background-color:green;-->
 +
  height:35px;
 +
  width:130px;
 +
  border-radius:7px;
 +
  text-align:center;
 +
 
 +
}
 +
.mainMenuBtn
 +
{
 +
  padding-left:10px;
 +
 +
}
 +
#sustc_menu a
 +
{
 +
  padding-top:10px;
 +
  padding-left:10px;
 +
}
 +
#sustc_menu li:hover
 +
{
 +
<!-- background-color:red-->
 +
  border-radius: 7px;
 +
  text-decoration;
 +
  background-color:#FF9900;
 +
}
 +
 +
 +
#sustc_menu a
 +
{
 +
  margin:0;
 +
  padding-bottom:10px;
 +
  display:block;
 +
}
 +
#sust_menu a:hover
 +
{
 +
  background-color:#FF9900
 +
}
 +
 +
#sustc_menu li li
 +
{
 +
  margin-left:0px;
 +
  float:none;
 +
  text-align:left;
 +
  padding-left:10px;
 +
  padding-top:5px;
 +
  width:130px;
 +
<!-- background-color:black;-->
 +
  background-color:#C3D46A ;
 +
}
 +
#sustc_menu li ul { /* second-level lists */
 +
position: absolute;
 +
width: 140px;
 +
margin-left: -1000em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
 +
margin-top:2.2em;
 +
        border-width:1px;
 +
        border-color: #C3D46A ;
 +
        border-style:solid;
 +
        border-radius: 7px;
 +
        background-color:#C3D46A ;
 +
        z-index:2;
 +
}
 +
#sustc_menu li:hover ul
 +
{
 +
  margin-left: 0px;
 +
  margin-top:0;
 +
}
 +
#sustc_menu li li:hover
 +
{
 +
  background-color:#FF69B4 ;
 +
}
 +
 +
.ibox{width:900px;height:210px;background:#FF9900;margin:1em auto;border:1em solid #ddd;position:relative;overflow:hidden;border-color:#FF9900;  border-radius:7px;
 +
        z-index:1;}
 +
.ibox .showbox{position:absolute;left:0;width:2700px;height:170px;background:#fff;border-radius:7px;}
 +
.ibox .showbox ul li{float:left;margin:7px;list-style:none;}
 +
.ibox .showbox ul li img{border:3px solid #a40000;}
 +
.ibox span{position:absolute;padding:2px 5px;background:#fff;cursor:pointer;}
 +
.ibox span.pre{left:10px;bottom:0;background-color:#00BFFF;border-radius:7px;}
 +
.ibox span.next{right:10px;bottom:0;background-color:#00BFFF;border-radius:7px;}
 +
.ibox span.num{right:45%;bottom:0;background:#FF9900;line-height:18px;}
 +
.ibox span.num li{display:inline;margin:0 5px;padding:1px 5px;line-height:18px;}
 +
.ibox span.num .numcur{background:#FF69B4;color:#fff;}
 +
 +
 +
 +
 +
</style>
 +
<script src="http://www.csrcode.cn/images/jquery-1.4.min.js"></script>
 +
<script type="text/javascript">
 +
/**
 +
* @author Mr.Think
 +
* @author blog http://mrthink.net
 +
* @2010.07.23
 +
* 可自由转载及使用,但请注明版权归属
 +
*/
 +
$(function(){
 +
    //@Mr.Think***变量
 +
    var $cur = 1;//初始化显示的版面
 +
    var $i = 5;//每版显示数
 +
    var $len = $('.showbox>ul>li').length;//计算列表总长度(个数)
 +
    var $pages = Math.ceil($len / $i);//计算展示版面数量
 +
    var $w = $('.ibox').width();//取得展示区外围宽度
 +
    var $showbox = $('.showbox');
 +
    var $num = $('span.num li')
 +
    var $pre = $('span.pre')
 +
    var $next = $('span.next');
 +
    var $autoFun;
 +
//@Mr.Think***调用自动滚动
 +
    autoSlide();
 +
//@Mr.Think***向前滚动
 +
    $pre.click(function(){
 +
        if (!$showbox.is(':animated')) {//判断展示区是否动画
 +
            if ($cur == 1) {//在第一个版面时,再向前滚动到最后一个版面
 +
                $showbox.animate({
 +
                    left: '-=' + $w * ($pages - 1)
 +
                }, 1000);//改变left值,切换显示版面,500(ms)为滚动时间,下同
 +
                $cur = $pages;//初始化版面为最后一个版面
 +
            }
 +
            else {
 +
                $showbox.animate({
 +
                    left: '+=' + $w
 +
                }, 500);//改变left值,切换显示版面
 +
                $cur--;//版面累减
 +
            }
 +
            $num.eq($cur - 1).addClass('numcur').siblings().removeClass('numcur');//为对应的版面数字加上高亮样式,并移除同级元素的高亮样式
 +
        }
 +
    });
 +
    //@Mr.Think***向后滚动
 +
    $next.click(function(){
 +
        if (!$showbox.is(':animated')) {//判断展示区是否动画
 +
            if ($cur == $pages) {//在最后一个版面时,再向后滚动到第一个版面
 +
                $showbox.animate({
 +
                    left: 0
 +
                }, 500);//改变left值,切换显示版面,500(ms)为滚动时间,下同
 +
                $cur = 1;//初始化版面为第一个版面
 +
            }
 +
            else {
 +
                $showbox.animate({
 +
                    left: '-=' + $w
 +
                }, 500);//改变left值,切换显示版面
 +
                $cur++;//版面数累加
 +
            }
 +
            $num.eq($cur - 1).addClass('numcur').siblings().removeClass('numcur');//为对应的版面数字加上高亮样式,并移除同级元素的高亮样式
 +
        }
 +
    });
 +
    //@Mr.Think***数字点击事件
 +
    $num.click(function(){
 +
        if (!$showbox.is(':animated')) {//判断展示区是否动画
 +
            var $index = $num.index(this);//索引出当前点击在列表中的位置值
 +
            $showbox.animate({
 +
                left: '-' + ($w * $index)
 +
            }, 500);//改变left值,切换显示版面,500(ms)为滚动时间
 +
            $cur = $index + 1;//初始化版面值,这一句可避免当滚动到第三版时,点击向后按钮,出面空白版.index()取值是从0开始的,故加1
 +
            $(this).addClass('numcur').siblings().removeClass('numcur');//为当前点击加上高亮样式,并移除同级元素的高亮样式
 +
        }
 +
    });
 +
    //@Mr.Think***停止滚动
 +
    clearFun($showbox);
 +
    clearFun($pre);
 +
    clearFun($next);
 +
    clearFun($num);
 +
    //@Mr.Think***事件划入时停止自动滚动
 +
    function clearFun(elem){
 +
        elem.hover(function(){
 +
            clearAuto();
 +
        }, function(){
 +
            autoSlide();
 +
        });
 +
    }
 +
    //@Mr.Think***自动滚动
 +
    function autoSlide(){
 +
        $next.trigger('click');
 +
        $autoFun = setTimeout(autoSlide, 3000);//此处不可使用setInterval,setInterval是重复执行传入函数,这会引起第二次划入时停止失效
 +
    }
 +
    //@Mr.Think***清除自动滚动
 +
    function clearAuto(){
 +
        clearTimeout($autoFun);
 +
    }
 +
});
 +
</script>
</head>
</head>
-
<body>
+
<body class="bkcolor" >
 +
<div id="sustc_wrapper">
 +
  <div id="sustc_header">
 +
    <div id="sustc_menu">
 +
 +
    <ul>
 +
        <li><a href="https://2012.igem.org/Team:SUSTC-Shenzhen-A">Home<img class="mainMenuBtn" src="https://static.igem.org/mediawiki/2012/0/0f/Arrow_down.gif"></img> 
 +
              </a>
 +
            <ul> 
 +
                    <li> sdfaf</li>
 +
                    <li> sdfaf</li>     
 +
            </ul>
 +
        </li>
 +
    </ul>
 +
    <ul>
 +
        <li><a href="https://2012.igem.org/Team:SUSTC-Shenzhen-A/Team">Team<img class="mainMenuBtn" src="https://static.igem.org/mediawiki/2012/0/0f/Arrow_down.gif">
 +
                </img></a>
 +
            <ul>  <li> sdfaf</li>        </ul>
 +
             
 +
        </li>
 +
    </ul>
 +
    <ul>
 +
        <li><a href="https://2012.igem.org/Team:SUSTC-Shenzhen-A/Project">Project<img class="mainMenuBtn" src="https://static.igem.org/mediawiki/2012/0/0f/Arrow_down.gif">
 +
                </img></a>
 +
            <ul>  <li> sdfaf</li>        </ul>
 +
             
 +
        </li>
 +
    </ul>
 +
    <ul>
 +
        <li><a href="https://2012.igem.org/Team:SUSTC-Shenzhen-A/Notebook">Notebook<img class="mainMenuBtn"
 +
                        src="https://static.igem.org/mediawiki/2012/0/0f/Arrow_down.gif"></img></a>
 +
            <ul>  <li><a href="https://2012.igem.org/Team:SUSTC-Shenzhen-A/Notebook/search_result">search result</a></li>     
 +
              <li><a href="https://2012.igem.org/Team:SUSTC-Shenzhen-A/Notebook/User_Interface">User Interface</a></li>  </ul>                   
 +
        </li>
 +
    </ul>
 +
    <ul>
 +
        <li><a href="https://2012.igem.org/Team:SUSTC-Shenzhen-A/Safety">Safety<img class="mainMenuBtn" src="https://static.igem.org/mediawiki/2012/0/0f/Arrow_down.gif">
 +
                </img></a>
 +
            <ul>  <li> sdfaf</li>        </ul>
 +
             
 +
        </li>
 +
    </ul>
 +
    <ul>
 +
        <li><a href="https://2012.igem.org/Team:SUSTC-Shenzhen-A/Contribution">Contribution<img class="mainMenuBtn"
 +
                src="https://static.igem.org/mediawiki/2012/0/0f/Arrow_down.gif"></img></a>
 +
            <ul>  <li> sdfaf</li>        </ul>
 +
             
 +
        </li>
 +
    </ul>
-
</body>
 
-
</html>
 
-
__NOTOC__== '''About our team''' ==
+
-
[[Image:SUSTC-Shenzhen-A_team.png|right|400px]]
+
      </div>
-
This iGEM team is set up by South University of Science and Technology of China, which is a public institution funded by the municipality of Shenzhen, a special economic zone city in southern China.  
+
<div id="demo" class="ibox">
-
All the undergrads in this team are sophomore, and not all the members will join Biology Division, so our team is multi-disciplinary.
+
<div class="showbox">
 +
  <ul>
 +
  <li ><a href="http://www.sustc.edu.cn/"><img src="https://static.igem.org/mediawiki/2012/3/38/SUSTC_Logo.jpg" alt="logo of SUSTC" title="logo of SUSTC"
 +
              style="margin-top:40px" width="200px"  height="60px"/>    </a></li>
 +
    <li ><a href="https://2012.igem.org/Team:SUSTC-Shenzhen-A"><img src="https://static.igem.org/mediawiki/2012/b/bd/Team_logo.png" alt="Team logo"
 +
            title="Team logo" style="margin-top:-3px" width="130px"  height="150px"/>    </a></li>
 +
    <li><a href="https://2012.igem.org/Team:SUSTC-Shenzhen-A/Project"><img src="https://static.igem.org/mediawiki/2012/3/33/Search_page.png" alt="search page"
 +
            title="search page" style="margin-top:-3px" width="80px"  height="150px"></a></li>
 +
 
 +
    <li><a href="https://2012.igem.org/Team:SUSTC-Shenzhen-A/Project"><img src="https://static.igem.org/mediawiki/2012/2/2e/Detail_search_result_page.png "
 +
          alt="search result page" title="search result page" style="margin-top:-3px" width="80px"  height="150px"></a></li>
 +
    <li><a href="https://2012.igem.org/Team:SUSTC-Shenzhen-A/Project"><img src="https://static.igem.org/mediawiki/2012/8/84/Part_device_page.png" alt="category page"
 +
            title="category page" style="margin-top:-3px" width="80px"  height="150px"></a></li>
 +
    <li><a href="https://2012.igem.org/Team:SUSTC-Shenzhen-A/Project"><img src="https://static.igem.org/mediawiki/2012/1/1f/Help_page.png " alt="help page"
 +
            title="help page" style="margin-top:-3px" width="80px"  height="150px"></a></li>
 +
    <li><a href="https://2012.igem.org/Team:SUSTC-Shenzhen-A/Project"><img src="https://static.igem.org/mediawiki/2012/4/47/Bookmark_page.png  " alt="bookmark page"
 +
            title="bookmark page" style="margin-top:-3px" width="80px"  height="150px"></a></li>
-
__NOTOC__== '''About our project''' ==
+
  <li><img src="https://static.igem.org/mediawiki/2012/1/14/IMG_1180change%281%29.jpg" alt="Trip to BGI" title="Trip to BGI" style="margin-top:-3px" width="260px" 
-
===Abstract===
+
            height="150px"></li>
-
The website "Registry of Standard Biological Parts" promotes the development of synthetic biology through providing genetic parts. To expand its influence in data exchange, we found it necessary to build an app client for it. In order to save time in searching BioBrick, simplify the process of selecting classifications, and facilitate changing selected category, we will dedicate ourselves to adjust database structure so that we can change the interface of BioBrick searching into spinner-formed .
+
  <li><a href="https://2012.igem.org/Team:SUSTC-Shenzhen-A/Team"><img src="https://static.igem.org/mediawiki/2012/a/a3/SUSTC-Shenzhen-A_team.png" alt="Team"
 +
            title="We are working" style="margin-top:-3px" width="260px"  height="150px"></a></li>
 +
  <li ><a href="http://www.sustc.edu.cn/"><img  src="https://static.igem.org/mediawiki/2012/d/d4/Logo.jpg" alt="SUSTC" title="SUSTC"  style="margin-top:20px"
 +
            width="200px"  height="100px"/></a></li>
-
__NOTOC__===Motivation===
+
  <li ><a href="http://www.sustc.edu.cn/"><img  src="https://static.igem.org/mediawiki/2012/a/aa/School_view.jpg " alt="SUSTC" title="SUSTC"  style="margin-top:20px"
-
Nowadays, the focal point of electronic devices is shifting from the fixed to portable, people use mobile devices in routine to save time. With a nice appearance and the support of APP store , which is the biggest market for smartphone applications, iPhone attracts a huge amount of consumers, and is becoming an important office platform.However, the Registry of Standard Biological Parts website does not fit the operating system of iPhone. Therefore, considering the wide range of users of iPhone, and to benefit those who are interested in or working in synthetic biology, we’re going to build and improve a search engine of BioBrick.
+
            width="200px" height="100px"/></a></li>
-
__NOTOC__===Background===
+
  <li><img src="/images/m04.jpg" alt="demo" title="demo"></li>
-
Registry of Standard Biological Parts is a website that provides a collection of biological parts with known functions used in synthetic biology, ranging from plasmids to protein generators. The parts conform to BioBrick standard and form a categorization system so that new genetic parts can be simply constructed through hierarchy implement. Based on the "get some, to give some" principle, the resource is continuously improved and cooperation among researchers is achieved. The active role of the website in promoting the development of synthetic biology is self-evident. On the other hand, the ubiquitous mobile device shows that traditional websites cannot satisfy our needs to update data and disseminate the information timely. A client on mobile devices seems necessary. According to statistical data, the user amount of iPhone is rather huge, which implies that iPhone client might be an excellent choice.
+
  <li><img src="/images/m05.jpg" alt="demo" title="demo"></li>
 +
  </ul>
 +
</div>
 +
    <span class="pre">&lt;&lt;Roll to the left</span><span class="next">Roll to the right&gt;&gt;</span><span class="num"><ol><li class="numcur">1</li><li>2</li><li>3</li></ol></sapn>
 +
</div>
-
__NOTOC__== '''Expected Results''' ==
 
-
As shown in the figures, two ways will be provided to search BioBricks .
 
-
The first method is a kind of web-of-knowledge-way searching technique which resembles the website www.webofknowledge.com. A common vocabulary for varied search terms related to BioBricks will be provided.Such terms are browse by functions, browse by types, etc. And users can choose the terms they need on their own. This will provide a powerful search function.
+
  </div>    <!--end of header-->
-
The second way is a keyword-way search technique. This kind search is simple yet quick.  A keyword is input and a set of BioBricks with this key word is returned.
+
-
We believe that users can find their target BioBricks quickly with the aid of these two search techniques.
+
-
Besides, we hope that all of our members can enjoy the process of preparing and presenting our project.
 
-
HAVE A DIFFERENT HOLIDAY~
 
-
[[Image:Category.png|200px|thumb|left|Figure 1]]
 
-
[[Image:Keyword.png|200px|thumb|left|Figure 2]]
 
-
|
 
-
|-
 
-
|
 
-
|
 
-
|-
 
-
|
 
-
|
 
-
|}
 
-
<!--- The Mission, Experiments --->
+
</div>      <!--end of wrapper-->
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
</body>
 +
</html>

Latest revision as of 13:14, 2 August 2012

<<Roll to the leftRoll to the right>>
  1. 1
  2. 2
  3. 3

Retrieved from "http://2012.igem.org/Template:SUSTC/3"