一：
(1)
eg:<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
解析：
href="css/bootstrap.css"加入bootstrap.css样式文件
rel:定义了当前文件与被连接文档的关系
type:规定被连接文档的mime类型(什么是mime类型
https://zhidao.baidu.com/question/4107423.html?qbl=relate_question_0&word=html%20mime)
media:规定被连接文档将显示在什么设备上（此处为显示在所有设备上）
（2）
<script src="js/jquery.min.js"></script>
解析:
这个代码是引用了JQuery的Min包；（
jquery.min.js
是由完整版的jQuery库经过压缩得来，压缩后功能与未压缩的完全一样，
只是将其中的空白字符、注释、空行等与逻辑无关的内容删除，并进行一些优化。
这个版本一般用于网站引用使用，减小文件体积，降低网站流量，提升访问速度等。
）
因为文件中的其他js文件是用jquery写的，所以要先引入jquery文件，等于是先拿工具（jquery），再拿工具操作（其他js）
如果你引入的是纯的js。
如果不是用jquery这种类库写的，那之前之后引入都无所谓。
（3）
eg:<link href='http://fonts.useso.com/css? family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800'
rel='stylesheet' type='text/css'>
解析:
引用css字体库
（4）
使用幻灯片插件：
使用该幻灯片插件需要引入jQuery（1.5.1+），responsive-tabs.css和easyResponsiveTabs.js文件。
基于jQuery的响应式Tab选项卡插件easyResponsiveTabs.js
描述：是一款轻量级的响应式 Tab 选项卡/手风琴jQuery插件，默认为水平/垂直Tab选项卡样式。
使用方法：
1）下载easyResponsiveTabs.js插件
2）引入js文件
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>fullPageDemo</title>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/easyResponsiveTabs.js"></script>
</head>
3）引入自定义CSS样式文件
4）HTML页面
1 <div class="sap_tabs"> 2 <div id="horizontalTab" 3 style="display: block; width: 100%; margin: 0px;"> 4 <ul class="resp-tabs-list"> 5 <li class="resp-tab-item" aria-controls="tab_item-0" role="tab" 6 style="font-size: 20px"><span>选项卡1</span></li> 7 <li class="resp-tab-item" aria-controls="tab_item-1" role="tab" 8 style="font-size: 20px"><span>选项卡2</span></li> 9 <div class="clearfix"></div> 10 </ul> 11 <div class="resp-tabs-container"> 12 <div class="tab-1 resp-tab-content" aria-labelledby="tab_item-0"> 13 <div class="tab_img grid"> 14 <div class="col-md-3 img-top "> 15 <a href="#" rel="title" 16 class="b-link-stripe b-animate-go thickbox" target="_blank"> 17 <figure class="effect-apollo"> <img 18 src="images/photowall/g1.jpg" alt="" /> <figcaption> 19 </figcaption> </figure> 20 </a> 21 </div> 22 <div class="col-md-3 img-top "> 23 <a href="#" rel="title" 24 class="b-link-stripe b-animate-go thickbox" target="_blank"> 25 <figure class="effect-apollo"> <img 26 src="images/photowall/g2.jpg" alt="" /> <figcaption> 27 </figcaption> </figure> 28 </a> 29 </div> 30 <div class="col-md-3 img-top "> 31 <a href="#" rel="title" 32 class="b-link-stripe b-animate-go thickbox" target="_blank"> 33 <figure class="effect-apollo"> <img 34 src="images/photowall/g3.jpg" alt="" /> <figcaption> 35 </figcaption> </figure> 36 </a> 37 </div> 38 <div class="clearfix"></div> 39 </div> 40 </div> 41 <div class="tab-1 resp-tab-content" aria-labelledby="tab_item-1"> 42 <div class="tab_img grid"> 43 <div class="col-md-3 img-top "> 44 <a href="#" rel="title" 45 class="b-link-stripe b-animate-go thickbox" target="_blank"> 46 <figure class="effect-apollo"> <img 47 src="images/photowall/g9.jpg" alt="" /> <figcaption> 48 </figcaption> </figure> 49 </a> 50 </div> 51 <div class="col-md-3 img-top "> 52 <a href="#" rel="title" 53 class="b-link-stripe b-animate-go thickbox" target="_blank"> 54 <figure class="effect-apollo"> <img 55 src="images/photowall/g10.jpg" alt="" /> <figcaption> 56 </figcaption> </figure> 57 </a> 58 </div> 59 <div class="col-md-3 img-top "> 60 <a href="#" rel="title" 61 class="b-link-stripe b-animate-go thickbox" target="_blank"> 62 <figure class="effect-apollo"> <img 63 src="images/photowall/g11.jpg" alt="" /> <figcaption> 64 </figcaption> </figure> 65 </a> 66 </div> 67 <div class="clearfix"></div> 68 </div> 69 </div> 70 </div> 71 </div> 72 </div>
5）JavaScript脚本
1 <script type="text/javascript"> 2 $(document).ready(function () { 3 $('#horizontalTab').easyResponsiveTabs({ 4 type: 'default', //Types: default, vertical, accordion 5 width: 'auto', //auto or any width like 600px 6 fit: true // 100% fit in a container 7 }); 8 }); 9 10 </script>
6）运行代码即可
5967
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
