Line 1: | Line 1: | ||
− | + | {{HZAU-China}} | |
<html> | <html> | ||
+ | |||
<head> | <head> | ||
− | + | <meta charset="utf-8"> | |
− | + | <title>Bootstrap 实例</title> | |
− | + | <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"> | |
− | + | <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> | |
− | + | <style> | |
− | + | 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> | ||
+ | <!--内容的样式--> | ||
+ | <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"> | |
− | + | <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="HZAU_content"> | |
− | + | <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"> | |
− | </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
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!