Difference between revisions of "Team:HZAU-China/Project/Description"

Line 1: Line 1:
−
<!DOCTYPE html>
+
{{HZAU-China}}
 
<html>
 
<html>
 +
 
<head>
 
<head>
−
<meta charset="utf-8">
+
  <meta charset="utf-8">
−
<title>Bootstrap 实例</title>
+
  <title>Bootstrap 实例</title>
−
<meta name="viewport" content="width=device-width, initial-scale=1">
+
  <meta name="viewport" content="width=device-width, initial-scale=1">
−
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
+
  <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
−
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
+
  <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
−
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+
  <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
−
<style>
+
  <style>
−
body {
+
    body {
−
position: relative;
+
      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) {
+
    ul.nav-pills {
−
#section1, #section2, #section3, #section41, #section42 {
+
      top: 20px;
−
margin-left: 150px;
+
      position: fixed;
−
}
+
    }
−
}
+
 
−
</style>
+
    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>
 +
  <!--内容的样式-->
 +
  <style>
 +
    /*总样式*/
 +
 
 +
    body {
 +
      font-family: "Arial", Helvetica, sans-serif;
 +
      text-align: justify;
 +
      margin: 0px;
 +
      background-color: #ffffff;
 +
    }
 +
 
 +
    /*小导航栏触碰后变色*/
 +
 
 +
    .HZAU_content a:hover {
 +
      color: black;
 +
      text-decoration: none;
 +
    }
 +
 
 +
    .HZAU_content a {
 +
      color: black;
 +
    }
 +
 
 +
    /*小导航栏样式*/
 +
 
 +
    .HZAU_2017_menu {
 +
      display: block;
 +
      position: fixed;
 +
      left: 50%;
 +
      margin-left: -570px;
 +
      top: 50%;
 +
      margin-top: -144.5px;
 +
      height: auto;
 +
      width: 200px;
 +
      overflow: hidden;
 +
    }
 +
 
 +
    .beijin {
 +
      height: auto;
 +
      width: 100%;
 +
    }
 +
 
 +
    .HZAU_2017_menu ul {
 +
      position: absolute;
 +
      top: 50%;
 +
      margin-top: -80px;
 +
      margin-left: 0px;
 +
      left: 0px;
 +
      width: 100%;
 +
      padding-left: 0px;
 +
      font-size: 16px;
 +
    }
 +
 
 +
    .HZAU_2017_menu li {
 +
      width: 100%;
 +
      line-height: 0em;
 +
      list-style-image: none;
 +
    }
 +
 
 +
    .HZAU_2017_menu li a {
 +
      display: inline-block;
 +
      width: 100%;
 +
      height: 100%;
 +
      padding: 20px 0px 20px 0px;
 +
      margin-left: 13px;
 +
      text-align: left;
 +
      color: rgb(249, 228, 137);
 +
      text-decoration: none;
 +
      font-style: arial;
 +
      line-height: 90%;
 +
    }
 +
 
 +
    .HZAU_2017_menu li:hover {
 +
      background: rgb(249, 228, 137);
 +
    }
 +
 
 +
    .HZAU_2017_menu li a:hover {
 +
      color: #000;
 +
    }
 +
 
 +
    /*内容框子的样式*/
 +
 
 +
    .HZAU_content {
 +
      position: absolute;
 +
      top: 43px;
 +
      left: 50%;
 +
      margin-left: -330px;
 +
      width: 900px;
 +
      height: 2300px;
 +
      z-index: -1;
 +
    }
 +
 
 +
    /*内容中几种文体的样式*/
 +
 
 +
    .biaoti {
 +
      font-size: 50px;
 +
      font-weight: bold;
 +
      text-align: center;
 +
      width: 100%;
 +
      display: block;
 +
      padding-bottom: 50px;
 +
      padding-top: 50px;
 +
      color: rgb(63, 59, 58);
 +
    }
 +
 
 +
    .zhengwen {
 +
      display: block;
 +
      font-style: arial;
 +
      font-size: 18px;
 +
      line-height: 34px;
 +
      text-align: justify;
 +
      color: #000;
 +
      margin-bottom: 9px;
 +
      margin-left: 0px;
 +
      margin-right: 0px;
 +
      margin-top: 7.2px
 +
    }
 +
 
 +
    .shangduiqi {
 +
      position: relative;
 +
    }
 +
 
 +
    .shangduiqi a {
 +
      position: absolute;
 +
      top: -66px;
 +
    }
 +
 
 +
    .HZAU_content img {
 +
      margin: 0 auto;
 +
      display: block;
 +
    }
 +
 
 +
    .tu_1 {
 +
      width: 666px;
 +
    }
 +
 
 +
    .tu_2 {
 +
      width: 555px;
 +
    }
 +
  </style>
 +
  <style>
 +
    span.caret_black {
 +
      display: inline-block;
 +
      margin-left: 6px;
 +
      vertical-align: middle;
 +
      width: 0;
 +
      height: 0;
 +
      border-left: 6px solid transparent;
 +
      border-right: 6px solid transparent;
 +
      border-top: 6px solid black;
 +
    }
 +
 
 +
    label {
 +
      cursor: pointer;
 +
    }
 +
 
 +
    #menu-toggle {
 +
      display: none;
 +
      /* hide the checkbox */
 +
    }
 +
 
 +
    #menu {
 +
      display: none;
 +
      font-size: 17.5px;
 +
      padding: 0 50px 0 50px;
 +
      width: 800px;
 +
      margin: 0;
 +
    }
 +
 
 +
    #menu-toggle:checked+#menu {
 +
      display: block;
 +
    }
 +
  </style>
 
</head>
 
</head>
 +
 
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
 
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
  
−
<div class="container">
+
  <div class="container">
−
<div class="row">
+
    <div class="row">
−
<nav class="col-sm-3" id="myScrollspy">
+
      <nav class="col-sm-3" id="myScrollspy">
−
<div class="container-fluid">  
+
        <div class="container-fluid">
−
<div class="container-fluid">  
+
          <div class="container-fluid">
−
<ul class="nav nav-pills nav-stacked">
+
            <ul class="nav nav-pills nav-stacked">
−
<li class="active"><a href="#section1">Section 1</a></li>
+
              <li class="active">
−
<li><a href="#section2">Section 2</a></li>
+
                <a href="#section1">Section 1</a>
−
<li><a href="#section3">Section 3</a></li>
+
              </li>
−
<li class="dropdown">
+
              <li>
−
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>
+
                <a href="#section2">Section 2</a>
−
<ul class="dropdown-menu">
+
              </li>
−
<li><a href="#section41">Section 4-1</a></li>
+
              <li>
−
<li><a href="#section42">Section 4-2</a></li>                    
+
                <a href="#section3">Section 3</a>
−
</ul>
+
              </li>
−
</li>
+
              <li class="dropdown">
−
</ul>
+
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4
−
</div>
+
                  <span class="caret"></span>
−
</div>
+
                </a>
−
</nav>
+
                <ul class="dropdown-menu">
−
<div class="col-sm-9">
+
                  <li>
−
<div id="section1">  
+
                    <a href="#section41">Section 4-1</a>
−
<h1>Section 1</h1>
+
                  </li>
−
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
+
                  <li>
−
</div>
+
                    <a href="#section42">Section 4-2</a>
−
<div id="section2">  
+
                  </li>
−
<h1>Section 2</h1>
+
                </ul>
−
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
+
              </li>
−
</div>      
+
            </ul>
−
<div id="section3">        
+
          </div>
−
<h1>Section 3</h1>
+
        </div>
−
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
+
      </nav>
−
</div>
+
      <div class="HZAU_content">
−
<div id="section41">        
+
        <div class="col-sm-9">
−
<h1>Section 4-1</h1>
+
          <div id="section1">
−
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
+
            <h1>Section 1</h1>
−
</div>    
+
            <p>Try to scroll this section and look at the navigation list while scrolling!</p>
−
<div id="section42">        
+
          </div>
−
<h1>Section 4-2</h1>
+
          <div id="section2">
−
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
+
            <h1>Section 2</h1>
−
</div>
+
            <p>Try to scroll this section and look at the navigation list while scrolling!</p>
−
</div>
+
          </div>
−
</div>
+
          <div id="section3">
−
</div>
+
            <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>
 +
  </div>
  
 
</body>
 
</body>
 +
 
</html>
 
</html>

Revision as of 12:55, 31 October 2017

Bootstrap 实例

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!