剑鱼论坛主题(模板)制作之css样式文件使用

 剑鱼论坛 发表于 2019年12月19日 剑鱼主题教程  122
剑鱼论坛
LV 6 高中
最后在线:6小时前
加入时间:339天前
主帖:89  跟帖:53

我们在制作模板的时候,会通过css来定义页面的样式,您可以直接把样式代码写到HTML文件里面,也可以把样式代码作为一个单独的文件来存放,然后在HTML文件中引用这个外部的css文件。通常情况下,我们会把css代码存放在一个单独的文件中,这一篇我们来学习剑鱼论坛的主题制作中怎么使用外部的样式文件。

我们在默认主题的“header.html”文件里面可以找到下面的代码:

<link rel="stylesheet" href="{$domain}public/common/css/bootstrap.min.css">

上面这个代码,学过点HTML和css的伙伴都知道,这是引用了一个外部的css文件。这里跟一般情况下的css文件引用区别在于:使用了“{$domain}”标签。这个标签,我们在《剑鱼论坛主题制作之简单标签》一篇里面有过介绍,是表示网站的域名。这里的href引号里面的文件路径就是css样式文件实际所在的位置。由于剑鱼论坛的默认主题是使用前端框架bootstrap4实现的,所以系统里面自带了bootstrap的样式文件,您如果也是使用bootstrap4来制作主题的话,那么可以像上面那样直接引用这个样式文件。

当然,如果您不是使用bootstrap4来制作主题,那么需要把样式文件存放在主题文件夹里面,像下图所示:

上图所示,我们在主题文件夹里面新建了一个名为“css”的文件夹,然后在这个文件夹里面存放css样式文件,假设我们在里面存放了一个名为“style.css”的样式文件,那么我们在制作主题的时候就可以用下面的方法来引用这个样式文件:

<link rel="stylesheet" href="{$domain}public/theme/{$template}/css/style.css">

看到与上面代码的区别了吗?这里又增加了一个标签“{$template}”,这个标签表示当前的这个主题的文件夹。href的引号里面的代码实际上也是css样式文件所在的路径,是存放在当前使用主题的文件夹下面的css目录里面的“style.css”样式文件。

学了自定义样式文件的引用方法,您就可以更自如地使用css样式文件了,如果您有多个css样式文件,都可以放到主题文件夹的css目录下面,然后使用上面的方法来引入样式文件。

好了,剑鱼论坛主题制作的样式文件使用已经介绍完毕了。下一篇我们将介绍“剑鱼论坛主题(模板)制作之JavaScript的使用”。

论坛主帖
162
论坛跟帖
142
在线访客
1
今日主帖
0
今日跟帖
0
今日注册
0
46
http://jianyuluntan.com/gentie.html
http://jianyuluntan.com/postzan.html
http://jianyuluntan.com/postcai.html
http://jianyuluntan.com/postshoucang.html
http://jianyuluntan.com/gentiezan.html
http://jianyuluntan.com/gentiecai.html
http://jianyuluntan.com/huifu.html
http://jianyuluntan.com/xiugai.html
http://jianyuluntan.com/shanchugentie.html
1
XzA=
1
© 2019 - 2020 剑鱼论坛 版权所有
Powered by JianYuLunTan
剑鱼论坛 976666861
http://jianyuluntan.com/feedback.html
http://jianyuluntan.com/qiandao.html
http://jianyuluntan.com/denglu.html
0
http://jianyuluntan.com/adenglu.html
0
剑鱼论坛