使用插件(layui.css)对原本样式的影响

爱被打了一巴掌 2022-01-26 00:01 376阅读 0赞

作者：吱韩菌  
开发工具：Visual Studio 2015  
撰写时间：2019-5-23

下面是我最近做的一个页面遇到的问题，在页面设计到一半时，发现后半部分的页面涉及到的样式效果较多、代码量较大的缘故，于是打算用插件完成一些样式效果。我所用到的插件是layui.css和layui.all.js。  
引用插件之后的效果：  
![在这里插入图片描述][20190527163426546.png]  
![在这里插入图片描述][20190527163433260.png]  
未引用插件之前：  
![在这里插入图片描述][20190527163455303.png]  
引用插件之后的效果：  
![在这里插入图片描述][20190527163517496.png]  
![在这里插入图片描述][20190527163529184.png]  
鼠标移入：  
![在这里插入图片描述][20190527163552262.png]  
未引用插件之前：  
![在这里插入图片描述][20190527163613833.png]  
引用插件后在页面发现部分样式发生改变，以上图片列举了两个问题，主要因素是插件（layui.css）影响了h5标签和a标签，在以上图片中未引用插件之前，用的是h5标签和a标签原本的效果，而在引入插件之后，样式效果发生了改变，h5标签改变的是内容文字变小，a标签改变的是内容文字原本的颜色（蓝色）变成了黑色；而原本的效果是鼠标移入后字体由蓝色变成深蓝色，引用插件之后变为黑色移入变浅黑色。而我想要的效果并不是这样，为了继续使用插件而又不影响前面的样式，只能对已经出现BUG的h5标签和a标签进行css样式的设置。  
![在这里插入图片描述][20190527163638154.png]  
![在这里插入图片描述][20190527163702866.png]  
![在这里插入图片描述][20190527163730439.png]  
总结：经过这次页面设计出现的一些失误，总结了几个问题：  
1、 在搭建页面前应有一个整体的思路，而不是走一步看一步。  
2、 对于插件的引用因该事先引入，而不是做到一半后再添加，这样只会适得其反。  
3、 对插件的使用不够深入，虽然使用插件，但大部分样式效果还是靠自己设置，插件方面的使用微乎其微。

[20190527163426546.png]: /images/20220126/138a0da992f343329f2173a1b75833e8.png
[20190527163433260.png]: /images/20220126/24dfd85902c3496dad997934168a240c.png
[20190527163455303.png]: /images/20220126/62dd5a1c266d44d1adf51b299468679e.png
[20190527163517496.png]: /images/20220126/b7faa2386725412c939563f0eeccc7fe.png
[20190527163529184.png]: /images/20220126/b7aafd6255ee48258474b8468b9db29d.png
[20190527163552262.png]: /images/20220126/eb718840f1b44fcbb8f1eec92be40748.png
[20190527163613833.png]: /images/20220126/78c7f27ea7a646c391658c38002dffe6.png
[20190527163638154.png]: /images/20220126/b0f824d8ef5d482e9a7fe365380f8f2b.png
[20190527163702866.png]: /images/20220126/e3aa7ae79d304a19a9a08a9f0f2ca3ed.png
[20190527163730439.png]: /images/20220126/40e329f69ab1484ba638f1748cb51eca.png