Template:SUSTC/3

From 2012.igem.org

(Difference between revisions)
 
(30 intermediate revisions not shown)
Line 1: Line 1:
 +
<!--#F6C739  土黄色    #C3D46A 深绿色      #00BFFF深天蓝  #FF69B4 hotpink-->
<html>
<html>
<head>
<head>
 +
<style type="text/css">
 +
body
 +
{
 +
  background-color:#383838;
 +
}
 +
</style>
 +
<style type="text/css">
<style type="text/css">
<!--我们需要先把igem原网站的一些东西删掉-->
<!--我们需要先把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
#sustc_wrapper
{
{
Line 14: Line 35:
#sustc_header
#sustc_header
{
{
-
   height:440px;
+
   height:285px;
-
   border-width:2px;
+
   border-width:4px;
-
   border-color: #F6C739 ;
+
   border-color: #FF9900 ;
   border-style:solid none solid none;
   border-style:solid none solid none;
-
<!--  background-color:red;-->
+
  background-color:#CCFFCC;
 +
 
 +
}
}
#sustc_menu
#sustc_menu
Line 30: Line 53:
<!--  background-color:yellow;-->
<!--  background-color:yellow;-->
   border-radius: 7px;
   border-radius: 7px;
 +
  background-color:#CCFFCC;
 +
}
}
Line 60: Line 85:
   border-radius: 7px;
   border-radius: 7px;
   text-decoration;
   text-decoration;
-
   background-color:#F6C739;
+
   background-color:#FF9900;
}
}
Line 72: Line 97:
#sust_menu a:hover
#sust_menu a:hover
{
{
-
   background-color:#F6C739
+
   background-color:#FF9900
}
}
Line 84: Line 109:
   width:130px;
   width:130px;
  <!-- background-color:black;-->
  <!-- background-color:black;-->
 +
  background-color:#C3D46A ;
}
}
#sustc_menu li ul { /* second-level lists */
#sustc_menu li ul { /* second-level lists */
Line 94: Line 120:
         border-style:solid;
         border-style:solid;
         border-radius: 7px;
         border-radius: 7px;
 +
        background-color:#C3D46A ;
 +
        z-index:2;
}
}
#sustc_menu li:hover ul
#sustc_menu li:hover ul
Line 100: Line 128:
   margin-top:0;
   margin-top:0;
}
}
-
 
+
#sustc_menu li li:hover
-
 
+
{
-
 
+
  background-color:#FF69B4 ;
-
 
+
-
 
+
-
/* --------------------------[ The below is just for non-javscript users ]--------------------------*/
+
-
#nav li li{ float:none; }
+
-
 
+
-
#nav li li a{ /* Just submenu links*/
+
-
position:relative;
+
-
float:none;
+
}
}
-
#nav li ul { /* second-level lists */
+
.ibox{width:900px;height:210px;background:#FF9900;margin:1em auto;border:1em solid #ddd;position:relative;overflow:hidden;border-color:#FF9900;  border-radius:7px;
-
position: absolute;
+
        z-index:1;}
-
width: 10em;
+
.ibox .showbox{position:absolute;left:0;width:2700px;height:170px;background:#fff;border-radius:7px;}
-
margin-left: -1000em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
+
.ibox .showbox ul li{float:left;margin:7px;list-style:none;}
-
margin-top:2.2em;
+
.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;}
-
/* third-and-above-level lists */
+
.ibox span.next{right:10px;bottom:0;background-color:#00BFFF;border-radius:7px;}
-
#nav li ul ul { margin: -1em 0 0 -1000em; }
+
.ibox span.num{right:45%;bottom:0;background:#FF9900;line-height:18px;}
-
#nav li:hover ul ul { margin-left: -1000em; }
+
.ibox span.num li{display:inline;margin:0 5px;padding:1px 5px;line-height:18px;}
-
 
+
.ibox span.num .numcur{background:#FF69B4;color:#fff;}
-
/* lists nested under hovered list items */
+
-
#nav li:hover ul{ margin-left: 0; }
+
-
#nav li li:hover ul { margin-left: 10em; margin-top:-2.5em;}
+
-
 
+
-
/* extra positioning rules for limited noscript keyboard accessibility */
+
-
#nav li a:focus + ul { margin-left: 0; margin-top:2.2em; }
+
-
#nav li li a:focus + ul { left:0; margin-left: 1010em; margin-top:-2.2em;}
+
-
#nav li li a:focus {left:0; margin-left:1000em; width:10em; margin-top:0;}
+
-
#nav li li li a:focus {left:0; margin-left: 2010em; width: 10em; margin-top:-1em;}
+
-
#nav li:hover a:focus{ margin-left: 0; }
+
-
#nav li li:hover a:focus + ul { margin-left: 10em; }
+
-
/* --------------------------[ The above is just for non-javscript users ]--------------------------*/
 
</style>
</style>
 +
<script src="http://www.csrcode.cn/images/jquery-1.4.min.js"></script>
<script type="text/javascript">
<script type="text/javascript">
-
function mainMenuBtnMouseOver()
+
/**
-
{
+
* @author Mr.Think
-
  document.image1.src="https://static.igem.org/mediawiki/2012/0/0f/Arrow_down.gif";
+
* @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>
-
function mainMenuBtnMouseOut()
 
-
{
 
-
  document.image1.src="https://static.igem.org/mediawiki/2012/0/02/Arrow_down_over.gif";
 
-
}
 
-
</script>
 
</head>
</head>
-
<body>
+
<body class="bkcolor" >
<div id="sustc_wrapper">
<div id="sustc_wrapper">
   <div id="sustc_header">
   <div id="sustc_header">
Line 186: Line 277:
         <li><a href="https://2012.igem.org/Team:SUSTC-Shenzhen-A/Notebook">Notebook<img class="mainMenuBtn"  
         <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>
                         src="https://static.igem.org/mediawiki/2012/0/0f/Arrow_down.gif"></img></a>
-
             <ul>  <li> sdfaf</li>       </ul>
+
             <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>
         </li>
     </ul>
     </ul>
Line 208: Line 299:
   
   
       </div>
       </div>
 +
 +
<div id="demo" class="ibox">
 +
<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>
 +
 +
  <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" 
 +
            height="150px"></li>
 +
 +
  <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>
 +
 +
  <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"
 +
            width="200px"  height="100px"/></a></li>
 +
 +
  <li><img src="/images/m04.jpg" alt="demo" title="demo"></li>
 +
  <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>
   </div>    <!--end of header-->
   </div>    <!--end of header-->
 +
 +
 +

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"