The main use of this page is 1. Global CSS style – raster system 2. Global CSS Styles — Buttons 3. Global CSS Styles — Helper Classes 4. Component – button drop-down menu 5. Component – Navigation bar 6. Component – Paging 7. Component — Media Object 8. JavaScript plugin — Tag 9. JavaScript plugin — Carousel

1. Logo and Login at the top

Using a grid system, separate the Logo and Login into two columns, with the Login part justified to the right and not much to say.

2. Top navigation search bar section

A. Firstly, grid system is used for layout. The navigation part takes 7 parts in PC terminal and 2 parts in mobile terminal; The search bar occupies 5 copies on PC and 10 copies on mobile (and the search bar is divided into 3 columns, drop-down button column, search box column and text column, respectively, accounting for 4 copies, 5 copies and 3 copies). B. In the navigation part, use the navigation bar component (see Bootstrap API — Component — Navigation bar for details). When the navigation bar component is moved to the terminal, the navigation is hidden and three horizontal ICONS are displayed. Click the button to display or hide the navigation accordingly. The HTML code for the adaptive navigation is shown below C. Use the push-button drop-down menu to the left of the search bar (see Bootstrap API — Components — push-button drop-down menu for details). The HTML code for the button-down menu is shown below

Adaptive navigation HTML code:  <div class="hd_navbtn col-md-7 col-xs-2"> <button type="button" class="navbar-toggle collapsed si si-list fa-2x" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"></button> <div class="hd_navbox  collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="hd_navlist"> <li><a class="on" href="index.html">HOME</a></li> <li><a href="proinfo.html">CHEMICAL</a></li> <li><a href="chemists.html">CHEMISTS</a></li> <li><a href="qa.html">Q&A</a></li> <li><a href="user.html">USER CENTER</a></li> </ul> </div> </div>Copy the code
HTML code for push-button drop-down menu:  <div class="col-xs-4 col-sm-offset-3 col-sm-3 col-md-offset-0 col-md-4"> <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> please select  <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">Chemical</a></li> <li><a href="#">Chemists</a></li> <li><a href="#">Reference</a></li> </ul> </div> </div>Copy the code
3. Banner rotation chart

The carousel.js plugin (Bootstrap API — JavaScript plugin — Carousel) is used for the Banner carousel, which is set to hidden on mobile. The carousel plugin in Bootstrap is a left and right rotation effect, but we want to achieve a gradient effect, so we modify the CSS to change the rotation effect. Banner rotation image gradient effect CSS code see below

Carousel-fade. Carousel-inner. Item {-webkit-transition-property: opacity; transition-property: opacity; } .carousel-fade .carousel-inner .item, .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { opacity: 0; } .carousel-fade .carousel-inner .active, .carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right { opacity: 1; } .carousel-fade .carousel-inner .next, .carousel-fade .carousel-inner .prev, .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { left: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .carousel-fade .carousel-control { z-index: 2; } .carousel-inner > .item{ height: 180px; background: url(.. /images/banner01.jpg) no-repeat center center; } .carousel-inner > .item:nth-child(2){ background-image: url(.. /images/banner02.jpg); } .carousel-inner > .item:nth-child(3){ background-image: url(.. /images/banner03.jpg); } .carousel-inner > .item:nth-child(4){ background-image: url(.. /images/banner04.jpg); }Copy the code
$('.carousel').carousel({interval: 3000});Copy the code
4. Left side of the content section

① ② Use the tabs (see Bootstrap API — JavaScript Plugins — tabs for details) for the button part of the tabs. Part ③ and ④ show the corresponding content area when the TAB page is switched. ② On the mobile terminal, change the display state of this part through THE CSS position attribute combined with JS, click the drop-down show or hide. ③ On the mobile terminal, set the height of the area to be fixed, and slide left and right to display too much content. (4) On PC, move the mouse to show the large picture; On the mobile terminal, you can swipe left and right to switch the displayed content, using the jquery.touchswipe. Js plug-in.

5. The right side of the content

(1) Scroll up and down display on PC, switch display on left and right, and hide on mobile terminal. ② Mobile terminal through CSS position: fixed; Settings are fixed at the bottom and content can be displayed by sliding left or right. Slide left and right CSS code below

Subtopicbox {position: fixed; bottom: 0; left: 0; right: 0; z-index: 999; height: 65px; border-top: 1px solid #dbdbdb; background-color: #fff; padding: 5px 10px 10px; } .subtopicbox .subtopiccont { white-space: nowrap; overflow-y: hidden; overflow-x: auto; -webkit-overflow-scrolling: touch; }Copy the code
At the bottom of the 6.

Using grid system, PC side time two columns; Mobile terminal display in two lines.

Overall presentation of the website