2018/7html 课程设计（二）

一：

(1)

eg:

解析：

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）

解析:

这个代码是引用了JQuery的Min包；（

jquery.min.js
是由完整版的jQuery库经过压缩得来，压缩后功能与未压缩的完全一样，
只是将其中的空白字符、注释、空行等与逻辑无关的内容删除，并进行一些优化。
这个版本一般用于网站引用使用，减小文件体积，降低网站流量，提升访问速度等。

）

因为文件中的其他js文件是用jquery写的，所以要先引入jquery文件，等于是先拿工具（jquery），再拿工具操作（其他js）
如果你引入的是纯的js。
如果不是用jquery这种类库写的，那之前之后引入都无所谓。

（3）

eg:

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文件

3）引入自定义CSS样式文件
4）HTML页面

 1 

 2         
 3             style="display: block; width: 100%; margin: 0px;">
 4             

 5                 
 6                     style="font-size: 20px">选项卡1
 7                 
 8                     style="font-size: 20px">选项卡2
 9                 

10             
11             

12                 

13                     

14                         

15                             16                                 class="b-link-stripe b-animate-go  thickbox" target="_blank">
17                                 
 <img
18                                     src="images/photowall/g1.jpg" alt="" /> 

19                                 
 
20                             
21                         
22                         

23                             24                                 class="b-link-stripe b-animate-go  thickbox" target="_blank">
25                                 
 <img
26                                     src="images/photowall/g2.jpg" alt="" /> 

27                                 
 
28                             
29                         
30                         

31                             32                                 class="b-link-stripe b-animate-go  thickbox" target="_blank">
33                                 
 <img
34                                     src="images/photowall/g3.jpg" alt="" /> 

35                                 
 
36                             
37                         
38                         

39                     
40                 
41                 

42                     

43                         

44                             45                                 class="b-link-stripe b-animate-go  thickbox" target="_blank">
46                                 
 <img
47                                     src="images/photowall/g9.jpg" alt="" /> 

48                                 
 
49                             
50                         
51                         

52                             53                                 class="b-link-stripe b-animate-go  thickbox" target="_blank">
54                                 
 <img
55                                     src="images/photowall/g10.jpg" alt="" /> 

56                                 
 
57                             
58                         
59                         

60                             61                                 class="b-link-stripe b-animate-go  thickbox" target="_blank">
62                                 
 <img
63                                     src="images/photowall/g11.jpg" alt="" /> 

64                                 
 
65                             
66                         
67                         

68                     
69                 
70             
71         
72     

View Code

5）JavaScript脚本

 1     

6）运行代码即可

 

转载于:https://www.cnblogs.com/Catherinezhilin/p/9261748.html