Difference between revisions of "Team:CPU CHINA"

Line 1: Line 1:
 
<html>
 
<html>
−
<style>
+
<head>
−
/*定义大盒子*/
+
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
−
    #demo{             
+
<style type="text/css">
−
        overflow: hidden;
+
body { background: url("img/patterns/body-bg.png") repeat scroll 50% 0 #F6F6F6; color: #666; font: 11px/1.8em 'Open Sans', Arial, Tahoma, sans-serif; margin: 0 auto; overflow-x: hidden; }
−
        width:200px;
+
#header { background: none repeat scroll 0 0 #FFFFFF; border-bottom: 1px solid #ECECEC; margin-bottom: 40px; }
−
        height:150px;
+
.header-wrapper { margin: 0 auto; position: relative; width: 960px; }
−
        position: relative;
+
.logo { float: left; height: 46px; padding: 0px; position: relative; top: 0; z-index: 2; }
−
    }
+
.clear:after { clear: both; content: " "; display: block; font-size: 0; height: 0; visibility: hidden; }
−
/*图片盒子*/
+
#cap { background: none repeat scroll 0 0 #000000; height: 18px; }
−
    #demoimg{
+
.container-wrap { overflow: hidden; }
−
        width:600px;
+
a:link, a:visited { color: #999999; text-decoration: none; }
−
        height:150px;
+
a:hover { color: #22AAEE; }
−
        position: absolute;
+
</style>
−
    }
+
<style type="text/css">
−
    #demoimg li{
+
nav { float: right; }
−
        float:left;
+
.sf-menu, .sf-menu * { margin: 0; padding: 0; list-style: none; }
−
        list-style: none;
+
.sf-menu { line-height: 1.0; }
−
        width:200px;
+
.sf-menu ul li { width: 100%; }
−
        height:150px;
+
.sf-menu li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ }
−
    }
+
.sf-menu li { float: left; position: relative; }
−
/*blue 部分是附加效果，图片下边对应的蓝色小块*/
+
.sf-menu a {
−
    #blue{
+
display: block;
−
        bottom:0;
+
position: relative;
−
        position: absolute;
+
width: 100;
−
    }
+
}
−
    #blue li{
+
.sf-menu li:hover ul, .sf-menu li.sfHover ul { left: 0; top: 89px; /* match top ul list item height */ z-index: 99; }
−
        list-style: none;
+
ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul { top: -999em; }
−
        width:30px;
+
ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { left: 159px; /* match ul width */ top: 1px; }
−
        height:5px;
+
ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul { top: -999em; }
−
        background:#ccc;
+
ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul { left: 10em; /* match ul width */ top: 0; }
−
        float:left;
+
.sf-menu > li { margin-left:1px; }
−
        margin: 0 3px;
+
.sf-menu > li > a { font: 600 11px/39px 'Open Sans', Arial, Tahoma, sans-serif, Tahoma, sans-serif; height: 62px; margin-top: 27px; padding: 0 23px 0 23px; text-transform: uppercase; }
−
    }
+
.sf-menu > li > a:hover { color: #999; border-bottom: 1px solid #22AAEE; text-shadow: 0 0 0; }
−
  </style>
+
.sf-menu > li.active > a { border-bottom: 1px solid #22AAEE; color: #22AAEE; text-shadow: 0 0 0; }
−
   
+
.sf-menu > li.sfHover > a { color: #666; text-shadow: 0 0 0; }
−
  <script>
+
.sf-menu > li:hover, .sf-menu > li.sfHover { background: none repeat scroll 0 0 #F9F9F9; box-shadow: 0 1px 3px #F6F6F6 inset; -webkit-box-shadow: 0 1px 3px #F6F6F6 inset; -moz-box-shadow: 0 1px 3px #F6F6F6 inset; behavior: url(js/PIE.htc); }
−
    var i=0;
+
.sf-menu > li.active { }
−
    function qiehuan(){
+
.sf-menu ul { border-top:  1px solid #22AAEE; position: absolute; top: -999em; width: 162px; padding: 0; background: none repeat scroll 0 0 #FFFFFF; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); behavior: url(js/PIE.htc); }
−
        //获取元素
+
.sf-menu li li a { font: 11px/40px 'OpenSansSemibold'; color: #999999; text-shadow: none; padding: 0 6px 0 12px; }
−
        var demoimg = document.getElementById("demoimg");
+
.sf-menu li li { border-bottom: 1px dashed #EEEEEE; }
−
        var demoli = demoimg.getElementsByTagName("li");
+
.sf-menu li li:first-child { background:none; }
−
        //获取图片盒子距左边的距离给left，图片的宽度给swidth，
+
.sf-menu li li a { margin: 0; }
−
        //图片盒子中li即图片总数给lis
+
.sf-menu li li a:hover, .sf-menu > li li.active a, .sf-menu > li li.sfHover > a { color: #666; }
−
        var left = demoimg.offsetLeft;
+
.sf-sub-indicator { background: url("img/indicator.png") no-repeat scroll 0 0 transparent; display: inline-block; height: 13px; margin-left: 9px; position: absolute; text-indent: -999em; right: 5px; top: 13px; width: 15px; }
−
        var swidth = demoli[0].offsetWidth;
+
.sf-menu .sf-sub-indicator { display:none; }
−
        var lis = demoli.length;
+
.sf-menu li li .sf-sub-indicator { display: block; }
−
        //left从0开始逐渐递减，图片盒子向左移动。
+
#responsive-main-nav-menu { display: none; }
−
        //当所有图片都移动到左边之后，left=0，重新开始，形成循环播放。
+
@media handheld and (max-width: 480px), screen and (max-device-width: 767px), screen and (max-width: 1024px) {
−
        if(left>-swidth*(lis-1)){
+
nav {
−
            left = left - swidth;
+
float: left;
−
            demoimg.style.left = left+"px";
+
}
−
            i = i+1;
+
.sf-menu > li {
−
        }else{
+
margin-left:0px;
−
            left = 0;
+
}
−
            demoimg.style.left = left+"px";
+
}
−
            i = 0;
+
@media handheld and (max-width: 767px), screen and (max-device-width: 767px), screen and (max-width: 767px) {
−
        }
+
nav {
 +
display: block;
 +
float: right;
 +
margin: 24px 0 0;
 +
position: relative;
 +
width: 250px;
 +
}
 +
#main-nav-menu {
 +
display: none;
 +
}
 +
#responsive-main-nav-menu {
 +
  color: #666666;
 +
font: 12px/1em 'Open Sans', Arial, Tahoma, sans-serif;
 +
  display: block;
 +
  float: right;
 +
margin: 30px 0;
 +
width: 100%;
 +
}
 +
.sf-menu {
 +
float:none;
 +
margin-bottom:40px;
 +
}
 +
.sf-menu ul, .sf-menu ul ul {
 +
min-width:100%;
 +
position: relative;
 +
left: 0 !important;
 +
top:0px !important;
 +
padding:0;
 +
}
 +
.sf-menu li {
 +
float:none;
 +
}
 +
.sf-menu > li:hover, .sf-menu > li.active, .sf-menu > li.sfHover {
 +
background: none repeat scroll 0 0 #22AAEE;
 +
box-shadow: 0 0 0 #eee;
 +
-webkit-box-shadow:  0 0 0 #eee;
 +
-moz-box-shadow:  0 0 0 #eee;
 +
behavior: url(js/PIE.htc);
 +
}
 +
.sf-sub-indicator {
 +
background: url("img/autoArrows.png") no-repeat scroll 0 0 transparent;
 +
display: inline-block;
 +
float: right;
 +
height: 3px;
 +
left: 0;
 +
position: relative;
 +
text-indent: -999em;
 +
top: 13px;
 +
width: 5px;
 +
}
 +
.sf-menu > li li > a > .sf-sub-indicator {
 +
left:0px;
 +
top:17px;
 +
display:inline-block;
 +
background: url('img/autoArrows-2.png') no-repeat;
 +
}
 +
.sf-menu > li {
 +
margin-bottom: 0;
 +
background: none repeat scroll 0 0 #F7F7F7;
 +
}
 +
.sf-menu > li > a {
 +
border-bottom: 1px solid #EEEEEE;
 +
color: #999999;
 +
font: 600 11px/32px 'Open Sans', Arial, Tahoma, sans-serif;
 +
height: 31px;
 +
margin-top: 0;
 +
padding: 2px 14px 0;
 +
}
 +
.sf-menu > li li > a {
 +
font: 12px/24px 'OpenSansSemibold';
 +
padding-left:20px;
 +
}
 +
.sf-menu > li li li > a {
 +
padding-left:40px;
 +
}
 +
.sf-menu > li.active > a, .sf-menu > li.sfHover > a {
 +
color: #fff;
 +
}
 +
</style>
 +
<script type="text/javascript">
 +
$(window).load(function() {
 +
$('.flexslider').flexslider();
 +
});
 +
</script>
  
−
 
+
<title>CPU_CHINA Main Page</title>
−
        //附加效果 blue部分 
+
</head>
−
        var dblue = document.getElementById("blue");
+
<body>
−
        //通过参数i设置与图片li对应的blue部分第i个li背景色
+
<div class="container-wrap" id="cap"></div>
−
        dblue.getElementsByTagName("li")[i].style.background = "blue";
+
<!--HEADER-->
−
        var thisi = dblue.getElementsByTagName("li")[i];
+
<div id="header" class="clear">
−
        var syi = dblue.getElementsByTagName("li");
+
  <div class="header-wrapper">
−
        //遍历blue的所有li元素，设置非当前li的背景色，注意:syi[j]!=thisi
+
    <!--LOGO-->
−
         for(j=0;j<lis;j++){
+
    <div class="logo">
−
             if(syi[j]!=thisi){
+
    <a href="index.html"><img src="img/logo.gif" alt="" title="" /></a>
−
              syi[j].style.background="#ccc";
+
    </div>
−
             }
+
    <!--MENU-->
−
        }
+
    <nav id = "main-nav-menu">
−
    }
+
      <ul class="sf-menu">
−
 
+
         <li><a href="index.html">Project</a>
−
//定时器，每隔2000毫秒执行一次qiehuan()代码，数值越小，幻灯片切换越快
+
          <ul>
−
    window.setInterval("qiehuan()",2000);
+
             <li><a href="index.html"></a></li>
−
</script>
+
            <li><a href="index-scrolling.html">Description</a></li>
−
+
             <li><a href="index-hosting.html">Design</a></li>
−
<div id="demo">
+
            <li><a href="index-hosting2.html">Experiment</a></li>
−
    <ul id="demoimg">
+
            <li><a href="index-beauty.html">Results</a></li>
−
        <li><img src="https://static.igem.org/mediawiki/2017/4/40/T--CPU_CHINA--gallery1.png"></li>
+
            <li><a href="index-alternate.html">Demonstrate</a></li>
−
        <li><img src="https://static.igem.org/mediawiki/2017/7/70/T--CPU_CHINA--gallery2.png"></li>
+
          </ul>
−
         <li><img src="https://static.igem.org/mediawiki/2017/1/1c/T--CPU_CHINA--gallery3.png"></li>
+
        </li>
−
    </ul>
+
        <li><a href="#">Human Practice</a>
−
    <ul id="blue">
+
          <ul>
−
        <li style="background:blue"></li>
+
            <li><a href="#">Sliver HP</a></li>
−
        <li></li>
+
            <li><a href="#">Intergrated and Gold HP</a></li>
−
         <li></li>
+
            <li><a href="#">Education and Public Engagement</a></li>
−
    </ul>
+
          </ul>
 +
        </li>
 +
        <li> <a href="#">Parts</a>
 +
          <ul>
 +
            <li><a href="elements.html">Basic Parts</a></li>
 +
            <li><a href="#">Composite Parts</a></li>
 +
<li><a href="#">Contribution</a></li>
 +
          </ul>
 +
        </li>
 +
         <li><a href="#">Notebook</a>
 +
          <ul>
 +
            <li><a href="#">Notebook</a></li>
 +
            <li><a href="#">Safety</a> </li>
 +
            <li><a href="#">Gallery Filterable</a> </li>
 +
            <li><a href="gallery-carousel.html">Attribution</a></li>
 +
          </ul>
 +
        </li>
 +
        <li><a href="#">Modeling</a></li>
 +
<li><a href="#">Team</a>
 +
          <ul>
 +
            <li><a href="blog-list.html">Team membranes</a></li>
 +
            <li><a href="blog-grid.html">Collaborations</a></li>
 +
          </ul>
 +
         </li>
 +
        <li><a href="contact.html">Achievement</a></li>
 +
      </ul>
 +
    </nav>
 +
    <!-- end menu -->
 +
    <select id = "responsive-main-nav-menu" onchange = "javascript:window.location.replace(this.value);">
 +
    </select>
 +
  </div>
 +
  <div class="clear"></div>
 
</div>
 
</div>
−
</html>
+
</body>
 +
</html>

Revision as of 08:35, 16 June 2017

CPU_CHINA Main Page