Difference between revisions of "Template:FAFU CHINA/try"
Line 1: | Line 1: | ||
− | <html> | + | <html lang="zh"> |
<head> | <head> | ||
− | <meta charset=" | + | <meta charset="UTF-8"> |
− | <meta name="viewport" content="width=device-width, | + | <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
− | <title> | + | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
− | <link rel=" | + | <title>侧边栏</title> |
− | <link rel=" | + | <link rel="stylesheet" href="https://2015.igem.org/Template:Amoy/css/HomeCss?action=raw&ctype=text/css" type="text/css" /> |
− | + | <link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:FAFU_CHINA/guge/css/normalize?action=raw&ctype=text/css" /> | |
+ | <link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:FAFU_CHINA/guge/css/default?action=raw&ctype=text/css" /> | ||
+ | <link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:FAFU_CHINA/guge/css/styles?action=raw&ctype=text/css" /> | ||
+ | <link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:FAFU_CHINA/index2/css/bootstrap?action=raw&ctype=text/css" /> | ||
+ | <script type='text/javascript' src ='/common/tablesorter/jquery.tablesorter.min.js'></script> | ||
+ | <link rel='stylesheet' type='text/css' href='/common/tablesorter/themes/groupparts/style.css' /> | ||
+ | <link rel='stylesheet' type='text/css' href='/common/table_styles.css' /> | ||
<link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:FAFU_CHINA/wailian/css/Montserrat?action=raw&ctype=text/css" /> | <link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:FAFU_CHINA/wailian/css/Montserrat?action=raw&ctype=text/css" /> | ||
<link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:FAFU_CHINA/wailian/css/Open-Sans?action=raw&ctype=text/css" /> | <link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:FAFU_CHINA/wailian/css/Open-Sans?action=raw&ctype=text/css" /> | ||
− | |||
<link rel="stylesheet" href="https://2015.igem.org/Template:Amoy/css/HomeCss?action=raw&ctype=text/css" type="text/css" /> | <link rel="stylesheet" href="https://2015.igem.org/Template:Amoy/css/HomeCss?action=raw&ctype=text/css" type="text/css" /> | ||
− | + | <link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:FAFU_CHINA/index2/css/bootstrap?action=raw&ctype=text/css" /> | |
− | <link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:FAFU_CHINA/index2/css/bootstrap? | + | <link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:FAFU_CHINA/index2/css/style?action=raw&ctype=text/css" /> |
− | + | <link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:FAFU_CHINA/index2/css/stylesheet?action=raw&ctype=text/css" /> | |
− | action=raw&ctype=text/css" /> | + | <link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:FAFU_CHINA/index2/css/font-awesome?action=raw&ctype=text/css" /> |
− | <link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:FAFU_CHINA/index2/css/style? | + | <link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:FAFU_CHINA/index2/css/responsive?action=raw&ctype=text/css" /> |
− | + | <link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:FAFU_CHINA/index2/css/animate?action=raw&ctype=text/css" /> | |
− | action=raw&ctype=text/css" /> | + | <!--[if IE]> |
− | <link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:FAFU_CHINA/index2/css/stylesheet? | + | <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script> |
− | + | ||
− | action=raw&ctype=text/css" /> | + | |
− | <link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:FAFU_CHINA/index2/css/font-awesome? | + | |
− | + | ||
− | action=raw&ctype=text/css" /> | + | |
− | <link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:FAFU_CHINA/index2/css/responsive? | + | |
− | + | ||
− | action=raw&ctype=text/css" /> | + | |
− | <link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:FAFU_CHINA/index2/css/animate? | + | |
− | + | ||
− | action=raw&ctype=text/css" /> | + | |
− | + | ||
− | <!--[if IE] | + | |
− | + | ||
− | <script | + | |
− | + | ||
− | src="http:// | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
<![endif]--> | <![endif]--> | ||
− | |||
− | |||
</head> | </head> | ||
<body> | <body> | ||
− | <div | + | <div class="com"> |
− | + | <div class="com__content"> | |
− | + | <section class="com__section com__section--text"> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | <section class=" | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
<div class="container"> | <div class="container"> | ||
<h2>team</h2> | <h2>team</h2> | ||
− | |||
<div class="team-leader-block clearfix"> | <div class="team-leader-block clearfix"> | ||
<div class="team-leader-box"> | <div class="team-leader-box"> | ||
Line 481: | Line 246: | ||
</div> | </div> | ||
</div> | </div> | ||
− | |||
− | <section class=" | + | </section> |
− | + | </div> | |
− | + | <nav class="com__nav"> | |
− | + | <ul class="com__nav-list"> | |
− | </ | + | <li class="com__nav-item"> |
− | < | + | <h1>外内容1</h1> |
− | < | + | <a href="" class="com__nav-link"> |
− | + | <h1>里内容1</h1> | |
− | + | <span class="blue-line animate scaleInLeft delay-2"></span> | |
− | + | <span class="white-line animate scaleInLeft delay-4"></span> | |
− | + | <span class="white-line animate scaleInLeft delay-5"></span> | |
− | + | </a> | |
− | + | </li> | |
− | + | <li class="com__nav-item"> | |
− | + | <h1>外内容2</h1> | |
− | + | <a href="" class="com__nav-link flex-row"> | |
− | + | <h1>里内容2</h1> | |
− | + | <div class="com__section-half"> | |
− | + | <span class="blue-line animate scaleInLeft delay-3"></span> | |
− | + | <span class="white-line animate scaleInLeft delay-4"></span> | |
− | + | </div> | |
− | + | <div class="com__section-half"> | |
− | + | <span class="white-circle animate slideInRight delay-5"></span> | |
− | + | </div> | |
− | + | </a> | |
− | + | </li> | |
− | + | <li class="com__nav-item"> | |
− | + | <h1>外内容3</h1> | |
− | + | <a href="" class="com__nav-link centered"> | |
− | + | <h1>里内容3</h1> | |
− | + | <span class="blue-line animate scaleIn delay-3"></span> | |
− | + | <span class="white-circle animate scaleIn delay-5"></span> | |
− | + | </a> | |
− | + | </li> | |
− | + | <li class="com__nav-item"> | |
− | + | <h1>外内容4</h1> | |
− | + | <a href="" class="com__nav-link"> | |
− | + | <h1>里内容4</h1> | |
− | + | <span class="blue-line animate scaleInLeft delay-2"></span> | |
− | + | <span class="white-line animate scaleInLeft delay-4"></span> | |
− | + | <span class="white-line animate scaleInLeft delay-5"></span> | |
− | + | </a> | |
− | + | </li> | |
− | + | <li class="com__nav-item"> | |
− | + | <h1>外内容5</h1> | |
− | + | <a href="" class="com__nav-link flex-row"> | |
− | + | <h1>里内容5</h1> | |
− | + | <div class="com__section-half"> | |
− | + | <span class="blue-line animate scaleInLeft delay-3"></span> | |
− | + | <span class="white-line animate scaleInLeft delay-4"></span> | |
− | + | </div> | |
− | + | <div class="com__section-half"> | |
− | + | <span class="white-circle animate slideInRight delay-5"></span> | |
− | </ | + | </div> |
+ | </a> | ||
+ | </li> | ||
+ | <li class="com__nav-item"> | ||
+ | <h1>外内容6</h1> | ||
+ | <a href="" class="com__nav-link centered"> | ||
+ | <h1>里内容6</h1> | ||
+ | <span class="blue-line animate scaleIn delay-3"></span> | ||
+ | <span class="white-circle animate scaleIn delay-5"></span> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="com__nav-item"> | ||
+ | <h1>外内容7</h1> | ||
+ | <a href="" class="com__nav-link"> | ||
+ | <h1>里内容7</h1> | ||
+ | <span class="blue-line animate scaleInLeft delay-2"></span> | ||
+ | <span class="white-line animate scaleInLeft delay-4"></span> | ||
+ | <span class="white-line animate scaleInLeft delay-5"></span> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="com__nav-item"> | ||
+ | <h1>外内容8</h1> | ||
+ | <a href="" class="com__nav-link"> | ||
+ | <h1>里内容8</h1> | ||
+ | <span class="blue-line animate scaleInLeft delay-2"></span> | ||
+ | <span class="white-line animate scaleInLeft delay-4"></span> | ||
+ | <span class="white-line animate scaleInLeft delay-5"></span> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="com__nav-item"> | ||
+ | <h1>外内容9</h1> | ||
+ | <a href="" class="com__nav-link"> | ||
+ | <h1>里内容9</h1> | ||
+ | <span class="blue-line animate scaleInLeft delay-2"></span> | ||
+ | <span class="white-line animate scaleInLeft delay-4"></span> | ||
+ | <span class="white-line animate scaleInLeft delay-5"></span> | ||
+ | </a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </nav> | ||
</div> | </div> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
<style> | <style> | ||
.firstHeading | .firstHeading | ||
Line 653: | Line 348: | ||
display:none; | display:none; | ||
} | } | ||
+ | .com__section--text | ||
+ | { | ||
+ | height:auto; | ||
+ | overflow:auto; | ||
+ | } | ||
+ | .com | ||
+ | { | ||
+ | background-image:url( https://static.igem.org/mediawiki/2015/3/36/Fafu_5.JPG); | ||
+ | background-size:100%; | ||
+ | overflow-y:auto; | ||
+ | } | ||
+ | .com__content | ||
+ | { | ||
+ | background-image:none; | ||
+ | } | ||
+ | table | ||
+ | { | ||
+ | background-color:rgba(0,0,0,0); | ||
+ | } | ||
+ | </style> | ||
+ | <script src="js/jquery-2.1.1.min.js" type="https://2015.igem.org/Template:FAFU_CHINA/guge/js/jquery-2-1-1-min?action=raw&ctype=text/javascript"></script> | ||
+ | <script> | ||
+ | var link = $('.com__nav-link'); | ||
+ | var linkParent = link.parent('li'); | ||
+ | var section = $('.com__section'); | ||
+ | var sectionContent = section.find('*'); | ||
+ | var switchTab = function () { | ||
+ | var p = $(this).parent('li'); | ||
+ | var i = p.index(); | ||
+ | var s = section.eq(i); | ||
+ | var c = s.find('*'); | ||
+ | section.removeClass('active'); | ||
+ | sectionContent.removeAttr('style'); | ||
+ | s.addClass('active'); | ||
+ | c.css({ | ||
+ | transform: 'none', | ||
+ | opacity: 1 | ||
+ | }); | ||
+ | linkParent.removeClass('active'); | ||
+ | p.addClass('active'); | ||
+ | return false; | ||
+ | }; | ||
+ | link.on('click', switchTab); | ||
+ | function activeFirst() { | ||
+ | section.first().addClass('active'); | ||
+ | section.first().find('*').css({ | ||
+ | transform: 'none', | ||
+ | opacity: 1 | ||
+ | }); | ||
+ | linkParent.first().addClass('active'); | ||
+ | } | ||
+ | activeFirst(); | ||
+ | </script> | ||
+ | <script type="text/javascript" src="https://2015.igem.org/Template:FAFU_CHINA/index2/js/bootstrap?action=raw&ctype=text/javascript"></script> | ||
+ | <style> | ||
.team-leader | .team-leader | ||
{ | { | ||
− | + | margin-left:10%; | |
− | + | width:82%; | |
} | } | ||
</style> | </style> | ||
</body> | </body> | ||
</html> | </html> |
Revision as of 19:48, 17 September 2015
team
Walter White
Chief Executive OfficerLorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consequat sollicitudin cursus. Dolor sit amet, consectetur adipiscing elit proin consequat.
Jesse Pinkman
Product ManagerLorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consequat sollicitudin cursus. Dolor sit amet, consectetur adipiscing elit proin consequat.
Walter White
Chief Executive OfficerLorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consequat sollicitudin cursus. Dolor sit amet, consectetur adipiscing elit proin consequat.
Jesse Pinkman
Product ManagerLorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consequat sollicitudin cursus. Dolor sit amet, consectetur adipiscing elit proin consequat.
Walter White
Chief Executive OfficerLorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consequat sollicitudin cursus. Dolor sit amet, consectetur adipiscing elit proin consequat.
Jesse Pinkman
Product ManagerLorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consequat sollicitudin cursus. Dolor sit amet, consectetur adipiscing elit proin consequat.
Walter White
Chief Executive OfficerLorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consequat sollicitudin cursus. Dolor sit amet, consectetur adipiscing elit proin consequat.
Jesse Pinkman
Product ManagerLorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consequat sollicitudin cursus. Dolor sit amet, consectetur adipiscing elit proin consequat.