|
|
(3 intermediate revisions not shown) |
Line 3: |
Line 3: |
| <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> | | <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> |
| <title>ALeader</title> | | <title>ALeader</title> |
- | <STYLE type="text/css">
| + | <link rel="stylesheet" type="text/css" href="http://fudanigem.phx-2.ifreeurl.com/css/igem.css"> |
- |
| + | |
- | html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}
| + | |
- | | + | |
- | body{
| + | |
- | background-color:#eaf0f4;
| + | |
- | }
| + | |
- | a{
| + | |
- | text-decoration: none;
| + | |
- | color: white;
| + | |
- | }
| + | |
- | a:hover{
| + | |
- | text-decoration: none;
| + | |
- | color: white;
| + | |
- | }
| + | |
- | a:active{
| + | |
- | text-decoration: none;
| + | |
- | color: white;
| + | |
- | }
| + | |
- | a:visited{
| + | |
- | text-decoration: none;
| + | |
- | color: white;
| + | |
- | }
| + | |
- | #top-section{
| + | |
- | height: 0px;
| + | |
- | border:none;
| + | |
- | }
| + | |
- | #search-controls{
| + | |
- | display: none;
| + | |
- | }
| + | |
- | #p-logo{
| + | |
- | display: none;
| + | |
- | }
| + | |
- | #total-wrap{
| + | |
- | position:absolute;
| + | |
- | width: 1215px;
| + | |
- | left: 50%;
| + | |
- | right: 50%;
| + | |
- | margin-left: -607px;
| + | |
- | color: white;
| + | |
- | }
| + | |
- | #header{
| + | |
- | height: 263px;
| + | |
- | background-image:url("../img/banner.png");
| + | |
- | background-position: top center;
| + | |
- | background-repeat: no-repeat;
| + | |
- | border-radius:3px;
| + | |
- | overflow: hidden;
| + | |
- | width: 1214px;
| + | |
- | }
| + | |
- | #emp{
| + | |
- | height:200px;
| + | |
- | }
| + | |
- | #top-menu{
| + | |
- | display: inline-block;
| + | |
- | padding-left:20px;
| + | |
- | background-color: #394264;
| + | |
- | width: 1195px;
| + | |
- | | + | |
- | }
| + | |
- | @font-face {
| + | |
- | font-family: ubuntu;
| + | |
- | src:url(Ubuntu-R.ttf);
| + | |
- | }
| + | |
- | .top-menu-each{
| + | |
- | height: 63px;
| + | |
- |
| + | |
- | font-family: ubuntu,"宋体";
| + | |
- | color: white;
| + | |
- | font-size: 21px;
| + | |
- | float: left;
| + | |
- | cursor: pointer;
| + | |
- | }
| + | |
- | | + | |
- | .top-menu-each p{
| + | |
- | float: left;
| + | |
- | padding-right: 30px;
| + | |
- | padding-left: 30px;
| + | |
- | line-height: 63px;
| + | |
- | }
| + | |
- | .arrow{
| + | |
- | float: left;
| + | |
- | background-image: url("../img/arrow.png");
| + | |
- | line-height: 63px;
| + | |
- | width: 12px;
| + | |
- | height: 9px;
| + | |
- | margin-left: 9px;
| + | |
- | margin-right: 9px;
| + | |
- | margin-top: 30px;
| + | |
- | position: absolute;
| + | |
- | | + | |
- | }
| + | |
- | .top-menu-each:hover{
| + | |
- | background-color: #50597B;
| + | |
- | border-bottom-style:solid;
| + | |
- | border-bottom-width: 2px;
| + | |
- | border-bottom-color:#11a8ab;
| + | |
- | height: 61px;
| + | |
- |
| + | |
- | }
| + | |
- | .top-menu-each.click{
| + | |
- | background-color: #50597B;
| + | |
- | border-bottom-style:solid;
| + | |
- | border-bottom-width: 2px;
| + | |
- | border-bottom-color:#11a8ab;
| + | |
- | height: 61px;
| + | |
- | }
| + | |
- | .top-menu-sub{
| + | |
- | position: absolute;
| + | |
- | margin-top: 63px;
| + | |
- | z-index: 10;
| + | |
- | min-width: 215px;
| + | |
- | }
| + | |
- | .top-menu-sub li{
| + | |
- | background-color: #394264;
| + | |
- | border-top-style: solid;
| + | |
- | border-bottom-style: solid;
| + | |
- | border-top-width: 1px;
| + | |
- | border-bottom-width: 1px;
| + | |
- | border-top-color: #11a8ab;
| + | |
- | border-bottom-color: #11a8ab;
| + | |
- | padding-left: 30px;
| + | |
- | padding-right: 20px;
| + | |
- | height: 55px;
| + | |
- | line-height: 55px;
| + | |
- | cursor:pointer;
| + | |
- | }
| + | |
- | .top-menu-sub li:hover{
| + | |
- | background-color: #50597B;
| + | |
- | }
| + | |
- | #big-photo{
| + | |
- | margin-top: 65px;
| + | |
- | height: 500px;
| + | |
- | width: 1214px;
| + | |
- | overflow: hidden;
| + | |
- | }
| + | |
- | #big-photo img{
| + | |
- | height: 500px;
| + | |
- | width: 1214px;
| + | |
- | position: absolute;
| + | |
- | | + | |
- | }
| + | |
- | #big-photo-hover{
| + | |
- | height: 130px;
| + | |
- | padding-left: 35px;
| + | |
- | padding-right: 10px;
| + | |
- | background-image: url('../img/big-photo-hover.png');
| + | |
- | background-repeat: no-repeat;
| + | |
- | margin-top: -130px;
| + | |
- | position: absolute;
| + | |
- | margin-top: 370px;
| + | |
- | width: 1169px;
| + | |
- | }
| + | |
- | @font-face {
| + | |
- | font-family: helveticamd;
| + | |
- | src:url(HelveticaNeueLTStd-Md.otf);
| + | |
- | }
| + | |
- | @font-face {
| + | |
- | font-family: helveticalt;
| + | |
- | src:url(HelveticaNeueLTStd-Lt.otf);
| + | |
- | }
| + | |
- | #big-photo-hover .header{
| + | |
- | font-size: 30px;
| + | |
- | line-height: 30px;
| + | |
- | font-family: helveticalmd,"微软雅黑";
| + | |
- | font-weight: bold;
| + | |
- | padding-top: 25px;
| + | |
- | margin-bottom: 10px;
| + | |
- | }
| + | |
- | #big-photo-hover .content{
| + | |
- | font-size: 23px;
| + | |
- | line-height: 23px;
| + | |
- | font-family: helveticallt,"微软雅黑";
| + | |
- | }
| + | |
- | #big-photo-wrap{
| + | |
- | position: absolute;
| + | |
- | width: 1214px;
| + | |
- | height: 500px;
| + | |
- | overflow: hidden;
| + | |
- | }
| + | |
- | #small-photo{
| + | |
- | margin-top: 15px;
| + | |
- | display: inline-block;
| + | |
- | margin-bottom: 335px;
| + | |
- | }
| + | |
- | .small-photo-each{
| + | |
- | width: 351px;
| + | |
- | height: 410px;
| + | |
- | padding-top: 10px;
| + | |
- | padding-bottom:5px;
| + | |
- | padding-left: 10px;
| + | |
- | padding-right: 10px;
| + | |
- | margin-right: 51px;
| + | |
- | float: left;
| + | |
- | background-color: white;
| + | |
- | }
| + | |
- | .small-photo-each img{
| + | |
- | width: 351px;
| + | |
- | height: 410px;
| + | |
- | }
| + | |
- | .small-photo-each.last{
| + | |
- | margin-right: 0px;
| + | |
- | }
| + | |
- | #footer{
| + | |
- |
| + | |
- | height: 180px;
| + | |
- | background-color: #394264;
| + | |
- | border-top-left-radius:8px;
| + | |
- | border-top-right-radius:8px;
| + | |
- | }
| + | |
- | #main-content{
| + | |
- | position:absolute;
| + | |
- | margin-top: 40px;
| + | |
- | display: inline-block;
| + | |
- | }
| + | |
- | #left-bar{
| + | |
- | width: 225px;
| + | |
- | border-radius: 3px;
| + | |
- | overflow: hidden;
| + | |
- | position: absolute;
| + | |
- | }
| + | |
- | .left-bar-each{
| + | |
- | height: 60px;
| + | |
- | background-color: #394264;
| + | |
- | font-family: ubuntu,"宋体";
| + | |
- | font-size: 18px;
| + | |
- | line-height: 60px;
| + | |
- | padding-left: 30px;
| + | |
- | cursor: pointer;
| + | |
- | border-bottom-style: solid;
| + | |
- | border-bottom-color: #1f253d;
| + | |
- | border-bottom-width: 1px;
| + | |
- | }
| + | |
- | .left-bar-each:hover{
| + | |
- | background-color: #50597b;
| + | |
- | }
| + | |
- | .left-bar-each.top{
| + | |
- | background-color: #38b7c4;
| + | |
- | text-align:center;
| + | |
- | padding-left: 0px;
| + | |
- | }
| + | |
- | .left-bar-each.top:hover{
| + | |
- | background-color: #38b7c4;
| + | |
- | }
| + | |
- | .left-bar-sub .left-bar-each{
| + | |
- | padding-left: 90px;
| + | |
- | }
| + | |
- | #middle-photo{
| + | |
- | float: left;
| + | |
- | margin-bottom: 445px;
| + | |
- | }
| + | |
- | .middle-photo-each{
| + | |
- | padding:9px 9px 9px 9px;
| + | |
- | background-color: white;
| + | |
- | margin-bottom: 15px;
| + | |
- | margin-left: 250px;
| + | |
- | | + | |
- | }
| + | |
- | .middle-photo-each .middle-content{
| + | |
- | height: 400px;
| + | |
- | width: 947px;
| + | |
- | }
| + | |
- | .middle-content img{
| + | |
- | float: left;
| + | |
- | }
| + | |
- | #examplepic{
| + | |
- | width: 100px;
| + | |
- | height:60px;
| + | |
- | }
| + | |
- | .middle-content p{
| + | |
- | color: black;
| + | |
- | font-size: 16px;
| + | |
- | font-family: "微软雅黑";
| + | |
- | line-height: 20px;
| + | |
- | }
| + | |
- | #team-content{
| + | |
- | margin-top: 15px;
| + | |
- | margin-bottom: 95px;
| + | |
- | }
| + | |
- | .team-photo img{
| + | |
- | width: 1215px;
| + | |
- | }
| + | |
- | .team-photo{
| + | |
- | margin-bottom: -2px;
| + | |
- | }
| + | |
- | #top{
| + | |
- | background-image:url('../img/top.png');
| + | |
- | width: 57px;
| + | |
- | height: 57px;
| + | |
- | position: fixed;
| + | |
- | top: 80%;
| + | |
- | margin-left: 1285px;
| + | |
- | cursor: pointer;
| + | |
- | }
| + | |
- | #logo{
| + | |
- | position: absolute;
| + | |
- | background-image: url("../img/logo.png");
| + | |
- | width: 154px;
| + | |
- | height: 147px;
| + | |
- | margin-left: 1000px;
| + | |
- | margin-top: 30px;
| + | |
- | cursor: pointer;
| + | |
- | }
| + | |
- | #footer-box{
| + | |
- | display: none;
| + | |
- | }
| + | |
- | .firstHeading{
| + | |
- | display: none;
| + | |
- | }
| + | |
- | #content{
| + | |
- | border:none;
| + | |
- | background: none;
| + | |
- | }
| + | |
- | | + | |
- | </STYLE>
| + | |
| <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> | | <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> |
- | <script type="text/javascript" > | + | <script src="http://fudanigem.phx-2.ifreeurl.com/js/igem.js"> |
- |
| + | |
- | | + | |
- | | + | |
- | | + | |
- | | + | |
- | $(document).ready(function(){
| + | |
- | | + | |
- | var imageload=new Array("img/DSQ.png","img/HCX.png"); //此处输入大图地址
| + | |
- | var datatemp=function(){ //保存大图介绍的结构
| + | |
- | this.head;
| + | |
- | this.content;
| + | |
- | }
| + | |
- | var data1=new datatemp();
| + | |
- | var data2=new datatemp();
| + | |
- | data1.head="Background of Leader RNA";
| + | |
- | data1.content="Riboswitches are regulatory RNAs that regulate gene expression by binding small molecule metabolites. Our Aleader riboswitch is such kind of regulatory parts that is induced by aminoglycoside drug.";
| + | |
- | data2.head="this is header2";
| + | |
- | data2.content="this is content2";
| + | |
- | var imageintro=new Array(data1,data2); //保存介绍的数组
| + | |
- | var imagecount=0;
| + | |
- |
| + | |
- | var init=function(){
| + | |
- | $('.arrow').hide();
| + | |
- | $('.top-menu-sub').hide();
| + | |
- |
| + | |
- | }
| + | |
- | var bind=function(){
| + | |
- | $("#top").hide();
| + | |
- | $(document).scroll(function(){
| + | |
- | if($(document).scrollTop()>308){
| + | |
- | $("#left-bar").css("position","fixed");
| + | |
- | $("#left-bar").css("top","0%");
| + | |
- | }
| + | |
- | else{
| + | |
- | console.log(1);
| + | |
- | $("#left-bar").css("position","absolute");
| + | |
- | $("#left-bar").css("top","");
| + | |
- | | + | |
- | };
| + | |
- | })
| + | |
- | $('.top-menu-each').hover(function()
| + | |
- | {
| + | |
- | $('.top-menu-each.click .arrow').hide();
| + | |
- | $('.top-menu-each.click').removeClass('click');
| + | |
- | $(this).addClass('click');
| + | |
- | $(this).find('.arrow').show();
| + | |
- | $('.top-menu-sub.show').hide();
| + | |
- | $('.top-menu-sub.show').removeClass('show');
| + | |
- | $(this).find('.top-menu-sub').addClass('show');
| + | |
- | $(this).find('.top-menu-sub').show();
| + | |
- |
| + | |
- |
| + | |
- |
| + | |
- |
| + | |
- | },function(){
| + | |
- | $(this).removeClass('click');
| + | |
- | $(this).find('.arrow').hide();
| + | |
- | $(this).find('.top-menu-sub').removeClass('show');
| + | |
- | $(this).find('.top-menu-sub').hide();
| + | |
- | }
| + | |
- | )
| + | |
- | | + | |
- |
| + | |
- | }
| + | |
- | var changepic=function(){
| + | |
- | imagecount=imagecount+1;
| + | |
- | if(imagecount==imageload.length){
| + | |
- | imagecount=imagecount-imageload.length;
| + | |
- | }
| + | |
- | $('#big-photo-hover').fadeOut(function(){
| + | |
- | $('#big-photo-wrap').prepend('<img src='+imageload[imagecount]+'>');
| + | |
- | $('#big-photo img:eq(0)').css('margin-left','-1214px');
| + | |
- | $('#big-photo img:eq(0)').animate({marginLeft:'0px'},3000);
| + | |
- | $('#big-photo img:eq(1)').animate({marginLeft:'1214px'},3000,function(){
| + | |
- | $('#big-photo img:eq(1)').remove();
| + | |
- | $('#big-photo-hover .header').html(imageintro[imagecount].head);
| + | |
- | $('#big-photo-hover .content').html(imageintro[imagecount].content);
| + | |
- | $('#big-photo-hover').fadeIn();
| + | |
- | });
| + | |
- | })
| + | |
- |
| + | |
- |
| + | |
- | }
| + | |
- | $(window).scroll(function(){
| + | |
- | min_height=window.screen.availHeight ;
| + | |
- | var s = $(window).scrollTop();
| + | |
- | if( s > 0){
| + | |
- | if(!$("#top").hasClass("hide"))
| + | |
- | $('#top').fadeIn(100);
| + | |
- | }else{
| + | |
- | $('#top').fadeOut(200);
| + | |
- | };
| + | |
- | });
| + | |
- | //top按钮控制
| + | |
- |
| + | |
- | $('#top').click(function(){
| + | |
- | $('html,body').animate({scrollTop:0},300);
| + | |
- |
| + | |
- | });
| + | |
- | setInterval(changepic,8000);
| + | |
- | init();
| + | |
- | bind();
| + | |
- | })
| + | |
| | | |
| </script> | | </script> |
Line 473: |
Line 56: |
| </ul> | | </ul> |
| </div> | | </div> |
| + | </div> |
| + | <div class="top-menu-each"> |
| + | <a href="https://2013.igem.org/Team:Fudan/result.html"><p>Result</p></a> |
| </div> | | </div> |
| <div class="top-menu-each"> | | <div class="top-menu-each"> |
Line 519: |
Line 105: |
| <div id="middle-photo"> | | <div id="middle-photo"> |
| <div class="middle-photo-each"> | | <div class="middle-photo-each"> |
- | <iframe src="http://new87.guangstreet.com/defination.htm" style=" | + | <iframe src="http://fudanigem.phx-2.ifreeurl.com/defination.htm" style=" |
| width: 850px; | | width: 850px; |
| height: 2300px; | | height: 2300px; |