(Prototype team page) |
|||
Line 1: | Line 1: | ||
− | |||
<html> | <html> | ||
+ | <head> | ||
+ | <meta charset="UTF-8"> | ||
+ | <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
+ | <!-- ʹIEÓÃ×î¸ßģʽäÖȾҳÃæ --> | ||
+ | <meta name="renderer" content="webkit"> | ||
+ | <!-- ¼«ËÙģʽ --> | ||
+ | <title>Interlab</title> | ||
+ | <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> | ||
+ | <!-- <link rel="stylesheet" href="css/nav.css"> --> | ||
+ | <!-- <script type="text/javascript" src="js/respond.min.js"></script> --> | ||
+ | <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> | ||
+ | <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> | ||
+ | <script> | ||
+ | if ($('.firstHeading')) $('.firstHeading').remove(); | ||
+ | </script> | ||
+ | <style> | ||
+ | html { | ||
+ | overflow-x: hidden; | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | .banner-top { | ||
+ | margin-left: 15%; | ||
+ | } | ||
+ | |||
+ | #igem_home_logo { | ||
+ | width: 100%; | ||
+ | margin-top: 80px; | ||
+ | } | ||
+ | |||
+ | @media (min-width: 992px) { | ||
+ | .work-content .col-md-4 { | ||
+ | width: 25%; | ||
+ | margin-right: 8%; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | .carousel-control.left, | ||
+ | .carousel-control.right { | ||
+ | background-image: none; | ||
+ | padding-top: 18%; | ||
+ | } | ||
+ | |||
+ | .carousel-indicators li { | ||
+ | background-color: #fff; | ||
+ | border: 1px solid #a94442; | ||
+ | } | ||
+ | |||
+ | .carousel-indicators li.active { | ||
+ | background-color: #f0ad4e; | ||
+ | } | ||
+ | |||
+ | #contentSub, | ||
+ | #contentcontainer, | ||
+ | #footer-box, | ||
+ | #sitesub, | ||
+ | #catlinks, | ||
+ | #search-controls, | ||
+ | #p-logo, | ||
+ | .h3, | ||
+ | .printfooter, | ||
+ | .firstHeading, | ||
+ | .visualClear { | ||
+ | display: none; | ||
+ | box-sizing: content-box; | ||
+ | } | ||
+ | |||
+ | #sideMenu, | ||
+ | #top_title { | ||
+ | display: none; | ||
+ | box-sizing: content-box; | ||
+ | } | ||
+ | |||
+ | #sideMenu .mainMenu_toggle, | ||
+ | #sideMenu .mainMenu_Title, | ||
+ | #sideMenu .sideMenuTitle, | ||
+ | #sideMenu .expand_subMenus { | ||
+ | box-sizing: content-box; | ||
+ | } | ||
+ | |||
+ | #bodyContent h1, | ||
+ | #bodyContent h2, | ||
+ | #bodyContent h3, | ||
+ | #bodyContent h4, | ||
+ | #bodyContent h5 { | ||
+ | margin-bottom: 0px; | ||
+ | } | ||
+ | |||
+ | #search_text { | ||
+ | color: #000; | ||
+ | } | ||
+ | |||
+ | #globalWrapper, | ||
+ | #content { | ||
+ | position: absolute; | ||
+ | left: 0; | ||
+ | right: 0; | ||
+ | top: 0; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | border: 0px; | ||
+ | background-color: transparent; | ||
+ | margin: 0px; | ||
+ | padding: 0px; | ||
+ | } | ||
+ | |||
+ | @media (min-width: 1200px) { | ||
+ | .container-fluid .container { | ||
+ | width: 969px; | ||
+ | /* margin-left: 300px; */ | ||
+ | } | ||
+ | .head-container { | ||
+ | width: 1170px; | ||
+ | } | ||
+ | } | ||
+ | /* article */ | ||
+ | |||
+ | .text-content article p { | ||
+ | text-indent: 20px; | ||
+ | margin: 10px 0; | ||
+ | font-size: 15px; | ||
+ | line-height: 24px; | ||
+ | } | ||
+ | |||
+ | .text-content article img { | ||
+ | width: 80%; | ||
+ | padding-left: 20%; | ||
+ | /* margin-left: 20%; */ | ||
+ | } | ||
+ | /* .mw-content-ltr ol{ | ||
+ | margin:0; | ||
+ | } */ | ||
+ | |||
+ | ol.carousel-indicators { | ||
+ | position: absolute; | ||
+ | bottom: 10px; | ||
+ | left: 50%; | ||
+ | z-index: 15; | ||
+ | width: 60%; | ||
+ | padding-left: 0; | ||
+ | margin-left: -30%; | ||
+ | text-align: center; | ||
+ | list-style: none; | ||
+ | } | ||
− | + | ||
− | + | @charset "utf-8"; | |
− | + | body { | |
− | + | font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei UI", "Microsoft YaHei", SimHei, "\5B8B\4F53", simsun, sans-serif; | |
− | + | color: #666; | |
− | + | width:100%; | |
+ | } | ||
+ | .logo { | ||
+ | padding:0; | ||
+ | } | ||
− | + | #myCarousel { | |
− | + | margin: 50px 0 0 0; | |
− | + | } | |
− | + | #navbar-collapse ul { | |
− | + | margin-top:0; | |
− | + | } | |
+ | .carousel-inner img { | ||
+ | margin: 0 auto; | ||
+ | } | ||
+ | /*.carousel-control { | ||
+ | font-size: 100px; | ||
+ | }*/ | ||
+ | .tab-h1 { | ||
+ | width:100%; | ||
+ | font-size: 30px; | ||
+ | text-align: center; | ||
+ | letter-spacing: 1px; | ||
+ | color: #ffffff; | ||
+ | background-color:#97477c; | ||
+ | padding: 30px; | ||
+ | margin: 0; | ||
+ | } | ||
− | + | .tab-p { | |
− | + | font-size: 20px; | |
+ | text-align: center; | ||
+ | letter-spacing: 1px; | ||
+ | color: #999; | ||
+ | margin: 20px 0 40px 0; | ||
+ | } | ||
+ | .container-fluid{ | ||
+ | width:100%; | ||
+ | } | ||
+ | .tab1 { | ||
+ | width:100%; | ||
+ | margin: 0 0; | ||
+ | color: #666; | ||
+ | background:#333; | ||
+ | } | ||
+ | .tab1 .text-muted { | ||
+ | color: #999; | ||
+ | text-decoration: line-through; | ||
+ | } | ||
+ | .tab1 .media-heading { | ||
+ | margin: 5px 0 20px 0; | ||
+ | } | ||
+ | .tab1 .col { | ||
+ | padding: 20px; | ||
+ | } | ||
+ | .tab2 { | ||
+ | background-color: #eee; | ||
+ | padding: 60px 20px; | ||
+ | text-align: center; | ||
+ | } | ||
+ | .tab2 img { | ||
+ | width: 40%; | ||
+ | height: 40%; | ||
+ | } | ||
+ | .tab3 { | ||
+ | padding: 60px 20px; | ||
+ | text-align: center; | ||
+ | } | ||
+ | .tab3 img { | ||
+ | width: 65%; | ||
+ | height: 65%; | ||
+ | } | ||
+ | .tab4 { | ||
+ | background-color: #eee; | ||
+ | padding: 60px 20px; | ||
+ | text-align: center; | ||
+ | } | ||
+ | .tab4 img { | ||
+ | width: 65%; | ||
+ | height: 65%; | ||
+ | } | ||
+ | .text h3 { | ||
+ | font-size: 20px; | ||
+ | color:#0c0047; | ||
+ | } | ||
+ | .text span{ | ||
+ | color: #97477c; | ||
+ | } | ||
+ | .text p { | ||
+ | font-size: 14px; | ||
+ | } | ||
+ | #footer { | ||
+ | background-color: #eee; | ||
+ | border-top: 1px solid #ccc; | ||
+ | padding: 20px; | ||
+ | text-align: center; | ||
+ | } | ||
+ | /*没有小于768px,是因为Bootstrap3以移动端优先设计*/ | ||
+ | |||
+ | /* 小屏幕(平板,大于等于768px) */ | ||
+ | @media (min-width: 768px) { | ||
+ | .tab-h1 { | ||
+ | font-size: 26px; | ||
+ | } | ||
+ | .tab-p { | ||
+ | font-size: 16px; | ||
+ | } | ||
+ | .text h3 { | ||
+ | font-size: 22px; | ||
+ | } | ||
+ | .text p { | ||
+ | font-size: 15px; | ||
+ | text-indent: 30px; | ||
+ | } | ||
+ | .tab2-text { | ||
+ | float: left; | ||
+ | } | ||
+ | .tab2-img { | ||
+ | float: right; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | /* 中等屏幕(桌面显示器,大于等于992px) */ | ||
+ | @media (min-width: 992px) { | ||
+ | .tab-h1 { | ||
+ | font-size: 28px; | ||
+ | } | ||
+ | .tab-p { | ||
+ | font-size: 17px; | ||
+ | } | ||
+ | .text h3 { | ||
+ | font-size: 24px; | ||
+ | } | ||
+ | .text p { | ||
+ | font-size: 16px; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | /* 大屏幕(大桌面显示器,大于等于1200px) */ | ||
+ | @media (min-width: 1200px) { | ||
+ | .tab-h1 { | ||
+ | font-size: 30px; | ||
+ | } | ||
+ | .tab-p { | ||
+ | font-size: 18px; | ||
+ | } | ||
+ | .text h3 { | ||
+ | font-size: 26px; | ||
+ | } | ||
+ | .text p { | ||
+ | font-size: 18px; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | |||
+ | body { | ||
+ | position: relative; | ||
+ | } | ||
+ | ul.nav-pills { | ||
+ | top: 20px; | ||
+ | position: fixed; | ||
+ | } | ||
+ | div.col-sm-9 div { | ||
+ | height: 250px; | ||
+ | font-size: 28px; | ||
+ | } | ||
+ | #section1 {color: #fff; background-color: #1E88E5;} | ||
+ | #section2 {color: #fff; background-color: #673ab7;} | ||
+ | #section3 {color: #fff; background-color: #ff9800;} | ||
+ | #section41 {color: #fff; background-color: #00bcd4;} | ||
+ | #section42 {color: #fff; background-color: #009688;} | ||
+ | |||
+ | @media screen and (max-width: 810px) { | ||
+ | #section1, #section2, #section3, #section41, #section42 { | ||
+ | margin-left: 150px; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | </style> | ||
+ | </head> | ||
+ | |||
+ | <body data-spy="scroll" data-target="#myScrollspy" data-offset="20"> | ||
+ | <nav class="navbar navbar-default navbar-fixed-top" style="margin-top:15px"> | ||
+ | <div class="container"> | ||
+ | |||
+ | <div class="navbar-header"> | ||
+ | <a href="https://2017.igem.org/Team:HUST-China" class="navbar-brand logo"><img src="https://static.igem.org/mediawiki/2017/6/64/Team_HUST_China_2017_logo.png" alt="HUST_iGEM_2017_logo"></a> | ||
+ | <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> | ||
+ | <span class="glyphicon glyphicon-list"></span> | ||
+ | </button> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <div class="collapse navbar-collapse" id="navbar-collapse"> | ||
+ | <ul class="nav navbar-nav navbar-right"> | ||
+ | |||
+ | |||
+ | |||
+ | <li class="active"><a href="https://2017.igem.org/Team:HUST-China">HOME</a></li> | ||
+ | <li class="dropdown"> | ||
+ | <a href="#" class="dropdown-toggle" data-toggle="dropdown"> | ||
+ | PROJECT <b class="caret"></b> | ||
+ | </a> | ||
+ | <ul class="dropdown-menu"> | ||
+ | <li><a href="https://2017.igem.org/Team:HUST-China/project/background">Background</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:HUST-China/Description">Description</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:HUST-China/Proof">Proof of concept</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:HUST-China/Demonstrate">Application</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:HUST-China/project/inprovement">Previous improvement</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:HUST-China/Safety">Safety</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="dropdown"> | ||
+ | <a href="#" class="dropdown-toggle" data-toggle="dropdown"> | ||
+ | WETLAB <b class="caret"></b> | ||
+ | </a> | ||
+ | <ul class="dropdown-menu"> | ||
+ | <li><a href="https://2017.igem.org/Team:HUST-China/Experiments">Experiments</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:HUST-China/Results">Results</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:HUST-China/InterLab">Interlab</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:HUST-China/Notebook">Notebook</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:HUST-China/wetlab/protocols">Protocols</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="dropdown"> | ||
+ | <a href="#" class="dropdown-toggle" data-toggle="dropdown"> | ||
+ | MODELING <b class="caret"></b> | ||
+ | </a> | ||
+ | <ul class="dropdown-menu"> | ||
+ | <li><a href="https://2017.igem.org/Team:HUST-China/Model">Overview</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:HUST-China/Model/model-pro">Prokaryotic circuit</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:HUST-China/Model/model-euk">Eukaryotic circuit</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:HUST-China/Model/model-app">Application circuit</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="dropdown"> | ||
+ | <a href="#" class="dropdown-toggle" data-toggle="dropdown"> | ||
+ | PARTS <b class="caret"></b> | ||
+ | </a> | ||
+ | <ul class="dropdown-menu"> | ||
+ | <li><a href="https://2017.igem.org/Team:HUST-China/Parts">Summary</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:HUST-China/Basic_Part">Basic part</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:HUST-China/Composite_Part">Composite part</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:HUST-China/Part_Collection">Part Collection</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="dropdown"> | ||
+ | <a href="#" class="dropdown-toggle" data-toggle="dropdown"> | ||
+ | HUMAN PRACTICES <b class="caret"></b> | ||
+ | </a> | ||
+ | <ul class="dropdown-menu"> | ||
+ | <li><a href="https://2017.igem.org/Team:HUST-China/Integrated_Practices">Integrated HP</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:HUST-China/Collaborations">Collaborations</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="dropdown"> | ||
+ | <a href="#" class="dropdown-toggle" data-toggle="dropdown"> | ||
+ | TEAM <b class="caret"></b> | ||
+ | </a> | ||
+ | <ul class="dropdown-menu"> | ||
+ | <li><a href="https://2017.igem.org/Team:HUST-China/Team">Team Roster</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:HUST-China/Attributions">Attributions</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | |||
+ | |||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | </nav> | ||
+ | |||
+ | |||
+ | <div class="tab1" style="width:100%;margin-top: 65px;"> | ||
+ | <h1 class="tab-h1" ><strong>「Interlab」</strong></h1> | ||
+ | </div> | ||
+ | |||
+ | <div class="container"> | ||
+ | <div class="row"> | ||
+ | <nav class="col-sm-3" id="myScrollspy"> | ||
+ | <div class="container-fluid"> | ||
+ | <div class="container-fluid"> | ||
+ | <ul class="nav nav-pills nav-stacked"> | ||
+ | <li class="active"><a href="#section1">Section 1</a></li> | ||
+ | <li><a href="#section2">Section 2</a></li> | ||
+ | <li><a href="#section3">Section 3</a></li> | ||
+ | <li class="dropdown"> | ||
+ | <a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a> | ||
+ | <ul class="dropdown-menu"> | ||
+ | <li><a href="#section41">Section 4-1</a></li> | ||
+ | <li><a href="#section42">Section 4-2</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | </nav> | ||
+ | <div class="col-sm-9"> | ||
+ | <div id="section1"> | ||
+ | <h1>Section 1</h1> | ||
+ | <p>Try to scroll this section and look at the navigation list while scrolling!</p> | ||
+ | </div> | ||
+ | <div id="section2"> | ||
+ | <h1>Section 2</h1> | ||
+ | <p>Try to scroll this section and look at the navigation list while scrolling!</p> | ||
+ | </div> | ||
+ | <div id="section3"> | ||
+ | <h1>Section 3</h1> | ||
+ | <p>Try to scroll this section and look at the navigation list while scrolling!</p> | ||
+ | </div> | ||
+ | <div id="section41"> | ||
+ | <h1>Section 4-1</h1> | ||
+ | <p>Try to scroll this section and look at the navigation list while scrolling!</p> | ||
+ | </div> | ||
+ | <div id="section42"> | ||
+ | <h1>Section 4-2</h1> | ||
+ | <p>Try to scroll this section and look at the navigation list while scrolling!</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | <footer id="footer"> | ||
+ | <div class="container"> | ||
+ | <p>1.Binnemans K, Jones P T, Blanpain B, et al. Recycling of rare earths: a critical review[J]. Journal of Cleaner Production, 2013, 51(14):1–22.</p> | ||
+ | <p>2.Bradsher, Keith (October 29, 2010). "After China's Rare Earth Embargo, a New Calculus". The New York Times. Retrieved October 30, 2010.</p> | ||
+ | </div> | ||
+ | </footer> | ||
+ | |||
+ | <!-- | ||
+ | |||
+ | <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> | ||
+ | <script src="js/bootstrap.min.js"></script> | ||
+ | --> | ||
+ | <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> | ||
+ | <!-- | ||
+ | <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> | ||
+ | --> | ||
+ | <script type="text/javascript"> | ||
+ | $(function () { | ||
+ | |||
+ | //轮播自动播放 | ||
+ | $('#myCarousel').carousel({ | ||
+ | //自动4秒播放 | ||
+ | interval : 3000, | ||
+ | }); | ||
+ | |||
+ | // //设置垂直居中 | ||
+ | // $('.carousel-control').css('line-height', $('.carousel-inner img').height() + 'px'); | ||
+ | // $(window).resize(function () { | ||
+ | // var $height = $('.carousel-inner img').eq(0).height() || | ||
+ | // $('.carousel-inner img').eq(1).height() || | ||
+ | // $('.carousel-inner img').eq(2).height(); | ||
+ | // $('.carousel-control').css('line-height', $height + 'px'); | ||
+ | // }); | ||
+ | |||
+ | //设置文字垂直居中 | ||
+ | $('.text').eq(0).css('margin-top', ($('.auto').eq(0).height() - $('.text').eq(0).height()) / 2 + 'px'); | ||
+ | $(window).resize(function () { | ||
+ | $('.text').eq(0).css('margin-top', ($('.auto').eq(0).height() - $('.text').eq(0).height()) / 2 + 'px'); | ||
+ | }); | ||
+ | |||
+ | $('.text').eq(1).css('margin-top', ($('.auto').eq(1).height() - $('.text').eq(1).height()) / 2 + 'px'); | ||
+ | $(window).resize(function () { | ||
+ | $('.text').eq(1).css('margin-top', ($('.auto').eq(1).height() - $('.text').eq(1).height()) / 2 + 'px'); | ||
+ | }); | ||
+ | |||
+ | $('.text').eq(2).css('margin-top', ($('.auto').eq(1).height() - $('.text').eq(1).height()) / 2 + 'px'); | ||
+ | $(window).resize(function () { | ||
+ | $('.text').eq(2).css('margin-top', ($('.auto').eq(1).height() - $('.text').eq(1).height()) / 2 + 'px'); | ||
+ | }); | ||
+ | |||
+ | }); | ||
+ | </script> | ||
+ | </body> | ||
</html> | </html> |
Revision as of 11:01, 14 October 2017
「Interlab」
Section 1
Try to scroll this section and look at the navigation list while scrolling!
Section 2
Try to scroll this section and look at the navigation list while scrolling!
Section 3
Try to scroll this section and look at the navigation list while scrolling!
Section 4-1
Try to scroll this section and look at the navigation list while scrolling!
Section 4-2
Try to scroll this section and look at the navigation list while scrolling!