Difference between revisions of "Team:HUST-China/InterLab"

Line 208: Line 208:
 
     .tab1 .col {
 
     .tab1 .col {
 
         padding: 20px;
 
         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;
 
 
     }
 
     }
  
Line 323: Line 291:
 
             font-size: 28px;
 
             font-size: 28px;
 
         }
 
         }
−
 
 
         #section1 {color: #97477c; background-color: #1E88E5;}
 
         #section1 {color: #97477c; background-color: #1E88E5;}
 
         #section2 {color: #97477c; background-color: #673ab7;}
 
         #section2 {color: #97477c; background-color: #673ab7;}
Line 332: Line 299:
 
         @media screen and (max-width: 810px) {
 
         @media screen and (max-width: 810px) {
 
             #section1, #section2, #section3, #section41, #section42  {
 
             #section1, #section2, #section3, #section41, #section42  {
−
                 margin-left: 150px;
+
                 margin-left: 50px;
 
             }
 
             }
 
         }
 
         }
Line 436: Line 403:
 
     <div class="container-fluid">
 
     <div class="container-fluid">
 
         <div class="row">
 
         <div class="row">
−
             <nav class="col-sm-3" id="myScrollspy" style="margin-top:100px background-color:#97477c">
+
             <nav class="col-sm-2" id="myScrollspy">
 
                 <div class="container-fluid">  
 
                 <div class="container-fluid">  
 
                 <div class="container-fluid">  
 
                 <div class="container-fluid">  
Line 443: Line 410:
 
                     <li><a href="#section2">Section 2</a></li>
 
                     <li><a href="#section2">Section 2</a></li>
 
                     <li><a href="#section3">Section 3</a></li>
 
                     <li><a href="#section3">Section 3</a></li>
−
                     <li class="dropdown">
+
                     <li><a href="#section3">Section 4</a></li>
−
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>
+
                    <li><a href="#section3">Section 5</a></li>  
−
                        <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>
 
                 </ul>
 
                 </div>   
 
                 </div>   
 
                 </div>       
 
                 </div>       
 
             </nav>
 
             </nav>
−
             <div class="col-sm-9">
+
             <div class="col-sm-10">
 
                 <div id="section1">     
 
                 <div id="section1">     
 
                     <h1>Section 1</h1>
 
                     <h1>Section 1</h1>
Line 482: Line 444:
  
 
     <footer id="footer">
 
     <footer id="footer">
−
         <div class="container">
+
         <div class="container"style="text-align: left">
 +
            <h3><strong>Referrence:</strong></h3>
 
             <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>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>
 
             <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>
Line 488: Line 451:
 
     </footer>
 
     </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">
 
     <script type="text/javascript">
 
     $(function () {
 
     $(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>
 
     </script>

Revision as of 11:21, 14 October 2017

Interlab

「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!

Referrence:

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.

2.Bradsher, Keith (October 29, 2010). "After China's Rare Earth Embargo, a New Calculus". The New York Times. Retrieved October 30, 2010.