该页面中次要用到的有
1. 全局 CSS 款式 -- 栅格零碎
2. 全局 CSS 款式 -- 按钮
3. 全局 CSS 款式 -- 辅助类
4. 组件 -- 按钮式下拉菜单
5. 组件 -- 导航条
6. 组件 -- 分页
7. 组件 -- 媒体对象
8. JavaScript 插件 -- 标签页
9. JavaScript 插件 -- Carousel（轮播图）
1. 顶部Logo 和 Login 局部
应用栅格零碎，将Logo 和 Login分为两列，Login 局部内容右对齐即可，没有太多可说的。
2. 顶部导航 搜寻栏局部
a. 首先用栅格零碎布局，导航局部pc端时占7份，挪动端时占2份；搜寻栏pc端时占5份，挪动端时占10份（而搜寻栏又分为3列，下拉按钮列、搜寻框列、文字列，别离占4份、5份、3份）。
b. 导航局部应用导航条组件（具体介绍见Bootstrap API -- 组件 -- 导航条），导航条组件挪动端时导航暗藏，显示出三条横线图标，点击该按钮导航将会相应的显示或暗藏。自适应导航HTML代码见下
c. 搜寻栏左侧应用按钮式下拉菜单（具体介绍见Bootstrap API -- 组件 -- 按钮式下拉菜单）。按钮式下拉菜单HTML代码见下
自适应导航HTML代码：<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>
按钮式下拉菜单HTML代码：<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>
3. Banner 轮播图局部
Banner轮播图应用carousel.js插件（具体介绍见Bootstrap API -- JavaScript 插件 -- Carousel），挪动端时设置为暗藏。Bootstrap中的carousel插件是左右轮播的成果，然而咱们要实现的是突变的成果，所以通过批改css来批改轮播成果。Banner轮播图突变成果CSS代码见下
Banner轮播图突变成果CSS代码：.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);}
js代码调用： $('.carousel').carousel({ interval: 3000 });
4. 内容局部左侧
① ② 应用标签页（具体介绍见Bootstrap API -- JavaScript 插件 -- 标签页），为标签页按钮局部。
③ ④ 局部为标签页切换时展现相应的内容区域。
② 挪动端时，通过 css position 属性联合 js去扭转这部分的展现状态，为点击下拉显示或暗藏。③ 挪动端时，设置该区域为高度固定，内容过多时左右滑动展现。④ pc端时，鼠标移上大图展现；挪动端时，反对手指左右滑动切换展现的内容，应用jquery.touchSwipe.js插件实现。
5. 内容局部右侧
① pc端时高低滚动展现，左右也可切换显示，挪动端时暗藏。
② 挪动端时通过 css position: fixed; 设置固定在底部，内容能够左右滑动展现。左右滑动CSS代码见下
左右滑动CSS代码：.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;}
6. 底部
应用栅格零碎，pc端时候两列；挪动端时候两行展现。
网站整体展现