|
|
| Line 1: |
Line 1: |
| | {{CPU_CHINA}} | | {{CPU_CHINA}} |
| − | <html>
| |
| − | <head>
| |
| − | <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
| |
| − | <style type="text/css">
| |
| − | 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; }
| |
| − | #header { background: none repeat scroll 0 0 #FFFFFF; border-bottom: 1px solid #ECECEC; margin-bottom: 40px; }
| |
| − | .header-wrapper { margin: 0 auto; position: relative; width: 960px; }
| |
| − | .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; }
| |
| − | .container-wrap { overflow: hidden; }
| |
| − | a:link, a:visited { color: #999999; text-decoration: none; }
| |
| − | a:hover { color: #22AAEE; }
| |
| − | </style>
| |
| − | <style type="text/css">
| |
| − | nav { float: right; }
| |
| − | .sf-menu, .sf-menu * { margin: 0; padding: 0; list-style: none; }
| |
| − | .sf-menu { line-height: 1.0; }
| |
| − | .sf-menu ul li { width: 100%; }
| |
| − | .sf-menu li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ }
| |
| − | .sf-menu li { float: left; position: relative; }
| |
| − | .sf-menu a {
| |
| − | display: block;
| |
| − | position: relative;
| |
| − | width: 100;
| |
| − | }
| |
| − | .sf-menu li:hover ul, .sf-menu li.sfHover ul { left: 0; top: 85px; /* match top ul list item height */ z-index: 99; }
| |
| − | ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul { top: -999em; }
| |
| − | ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { left: 159px; /* match ul width */ top: 1px; }
| |
| − | ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul { top: -999em; }
| |
| − | ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul { left: 10em; /* match ul width */ top: 0; }
| |
| − | .sf-menu > li { margin-left:1px; }
| |
| − | .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; }
| |
| − | .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; }
| |
| − | .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); }
| |
| − | .sf-menu > li.active { }
| |
| − | .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; }
| |
| − | .sf-menu li li { border-bottom: 1px dashed #EEEEEE; }
| |
| − | .sf-menu li li:first-child { background:none; }
| |
| − | .sf-menu li li a { margin: 0; }
| |
| − | .sf-menu li li a:hover, .sf-menu > li li.active a, .sf-menu > li li.sfHover > a { color: #666; }
| |
| − | .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; }
| |
| − | .sf-menu .sf-sub-indicator { display:none; }
| |
| − | .sf-menu li li .sf-sub-indicator { display: block; }
| |
| − | #responsive-main-nav-menu { display: none; }
| |
| − | @media handheld and (max-width: 480px), screen and (max-device-width: 767px), screen and (max-width: 1024px) {
| |
| − | nav {
| |
| − | float: left;
| |
| − | }
| |
| − | .sf-menu > li {
| |
| − | margin-left:0px;
| |
| − | }
| |
| − | }
| |
| − | @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>
| |
| − |
| |
| − | <style type="text/css">
| |
| − | .s1{overflow:hidden}
| |
| − | /*定义大盒子*/
| |
| − | #demo{
| |
| − | overflow: hidden;
| |
| − | width:960px;
| |
| − | height:393px;
| |
| − | position: relative;
| |
| − | }
| |
| − | /*图片盒子*/
| |
| − | #demoimg{
| |
| − | width:4000px;
| |
| − | height:393px;
| |
| − | position: relative;
| |
| − | }
| |
| − | #demoimg li{
| |
| − |
| |
| − | float:left;
| |
| − | list-style: none;
| |
| − | width:1200px;
| |
| − | height:393px;
| |
| − | }
| |
| − | /*blue 部分是附加效果，图片下边对应的蓝色小块*/
| |
| − | #blue{
| |
| − | bottom:0;
| |
| − | position: absolute;
| |
| − | }
| |
| − | #blue li{
| |
| − | list-style: none;
| |
| − | width:30px;
| |
| − | height:5px;
| |
| − | background:#ccc;
| |
| − | float:left;
| |
| − | margin: 0 3px;
| |
| − | }
| |
| − | </style>
| |
| − |
| |
| − | <script>
| |
| − | var i=0;
| |
| − | function qiehuan(){
| |
| − | //获取元素
| |
| − | var demoimg = document.getElementById("demoimg");
| |
| − | var demoli = demoimg.getElementsByTagName("li");
| |
| − | //获取图片盒子距左边的距离给left，图片的宽度给swidth，
| |
| − | //图片盒子中li即图片总数给lis
| |
| − | var left = demoimg.offsetLeft;
| |
| − | var swidth = demoli[0].offsetWidth;
| |
| − | var lis = demoli.length;
| |
| − | //left从0开始逐渐递减，图片盒子向左移动。
| |
| − | //当所有图片都移动到左边之后，left=0，重新开始，形成循环播放。
| |
| − | if(left>-swidth*(lis-1)){
| |
| − | left = left - swidth;
| |
| − | demoimg.style.left = left+"px";
| |
| − | i = i+1;
| |
| − | }
| |
| − | else{
| |
| − | left = 0;
| |
| − | demoimg.style.left = left+"px";
| |
| − | i = 0;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | //附加效果 blue部分
| |
| − | var dblue = document.getElementById("blue");
| |
| − | //通过参数i设置与图片li对应的blue部分第i个li背景色
| |
| − | dblue.getElementsByTagName("li")[i].style.background = "blue";
| |
| − | var thisi = dblue.getElementsByTagName("li")[i];
| |
| − | var syi = dblue.getElementsByTagName("li");
| |
| − | //遍历blue的所有li元素，设置非当前li的背景色，注意:syi[j]!=thisi
| |
| − | for(j=0;j<lis;j++){
| |
| − | if(syi[j]!=thisi){
| |
| − | syi[j].style.background="#ccc";
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | //定时器，每隔2000毫秒执行一次qiehuan()代码，数值越小，幻灯片切换越快
| |
| − | window.setInterval("qiehuan()",2000);
| |
| − | </script>
| |
| − |
| |
| − |
| |
| − | <script type="text/javascript">
| |
| − | $(window).load(function() {
| |
| − | $('.flexslider').flexslider();
| |
| − | });
| |
| − | </script>
| |
| − |
| |
| − |
| |
| − |
| |
| − | <title>CPU_CHINA Main Page</title>
| |
| − | </head>
| |
| − | <body>
| |
| − | <!--HEADER-->
| |
| − | <div id="header" class="clear">
| |
| − | <div class="header-wrapper">
| |
| − | <!--LOGO-->
| |
| − | <div class="logo">
| |
| − | <a href="index.html"><img src="https://static.igem.org/mediawiki/2017/f/fe/T--CPU_CHINA--logo.gif" alt="" title="" /></a>
| |
| − | </div>
| |
| − | <!--MENU-->
| |
| − | <nav id = "main-nav-menu">
| |
| − | <ul class="sf-menu">
| |
| − | <li><a href="index.html">Project</a>
| |
| − | <ul>
| |
| − | <li><a href="index.html"></a></li>
| |
| − | <li><a href="index-scrolling.html">Description</a></li>
| |
| − | <li><a href="index-hosting.html">Design</a></li>
| |
| − | <li><a href="index-hosting2.html">Experiment</a></li>
| |
| − | <li><a href="index-beauty.html">Results</a></li>
| |
| − | <li><a href="index-alternate.html">Demonstrate</a></li>
| |
| − | </ul>
| |
| − | </li>
| |
| − | <li><a href="#">Human Practice</a>
| |
| − | <ul>
| |
| − | <li><a href="#">Sliver HP</a></li>
| |
| − | <li><a href="#">Intergrated and Gold HP</a></li>
| |
| − | <li><a href="#">Education and Public Engagement</a></li>
| |
| − | </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>
| |
| − | </body>
| |
| − |
| |
| − | <body>
| |
| − |
| |
| − | <div id="demo">
| |
| − | <ul id="demoimg">
| |
| − | <li><img src="https://static.igem.org/mediawiki/2017/4/40/T--CPU_CHINA--gallery1.png"/></li>
| |
| − | <li><img src="https://static.igem.org/mediawiki/2017/7/70/T--CPU_CHINA--gallery2.png"/></li>
| |
| − | <li><img src="https://static.igem.org/mediawiki/2017/1/1c/T--CPU_CHINA--gallery3.png"/></li>
| |
| − | </ul>
| |
| − | <ul id="blue">
| |
| − | <li style="background:blue"></li>
| |
| − | <li></li>
| |
| − | <li></li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | </body>
| |
| − |
| |
| − | </html>
| |
