套用一个前端的动态样式-----笔记3

目录

1.下载前端插件

2.创建static的文件夹，将下载的前端插件放在static目录下

3.拆解插件，为自己所用

4.重点注意修改链接地址 

5.修改自己想要的文案 

---

关于菜单，我们常见的有顶部的，也有左侧的。那么具体要怎么开发呢？

其实对于菜单这么常见的控件，我们没必要自己动手去做，完全可以去网上下载一个现成的，各种漂亮的要什么有什么，所以本节主要精髓是教给大家如何去网上下载后利用起来。

1.下载前端插件

首先我们进入一个我平时比较喜欢的控件平台：jquery之家：

http://www.htmleaf.com/

进入后会发现，上面有各种分类。我们选中菜单和导航

映入眼帘的是各种各样的 大神们分享的 菜单。小伙伴们可以任选哈，这里我挑了一个简单一点的做讲解：(第一页 第二个)

我们点击进去：

点一下查看演示：

感觉 还是可以的，功能很多，上面还有个Search.. 应该是搜索功能

我们关掉演示，点击下载：

下载后的压缩包直接解压

2.创建static的文件夹，将下载的前端插件放在static目录下

然后注意，我们打开pycahrm，要在项目中新建一个名为：static的文件夹，用来存放这种资源

这里名字一定不要写错，就写static

然后我们把这个解压后的菜单资源粘贴进static里。

粘贴好之后，我们会看到 有个index.html，这个html就是他给的demo例子。我们双击打开，然后点击浏览器按钮看看在我们本地这个菜单的展示怎么样？

在浏览器中打开后我们发现还是不错的。

3.拆解插件，为自己所用

那么下面就让我们开始拆了它，把其中有用的都拿走！

首先我们拿走他head标签内的 link标签 和 script标签(没有就不拿了)

把这个复制到我们的welcome.html中：

 

然后继续回到index.html，继续拆！

我们按住键盘的shelft+command+ 减号。可以快速折叠整个文件，windows系统的可以按住 shelft+ctrl+减号。

然后我们再慢慢展开body，看到这几个块代码：

二话不说，拿走拿走！

粘贴过来后如图：

这时候我们 运行项目，打开127.0.0.1:8000/welcome/ 看看显示情况！

发现乱的不行，这是因为我们把内部资源都偷走后，需要改一些路径。

4.重点注意修改链接地址 

我们先来看看 原来的各种路径，(路径是指静态资源的路径)

我们会发现 href 或者 src 的路径 实际上在原来的index.html中都可以正常找到，我们复制到welcome.html中后都找不到了。因我welcome.html所在的位置不同，这里所有的资源一般都是我们复制到static中的那个文件夹内的：

所以，在welcome.html中找不到正常，那么我们就需要进行修改。修改很简单，在前面拼接/static/201908059658/ 即可。注意static前面必须有 / 

让我们把这个拆过来的html代码中的所有带路径的都给它前面加上/static/201908059658/  当然有些./开头的你要自己拼好一点，去掉这个./。自己别忘了在之后好好检查一下这些文件的路径是否正确，这是一个python开发的基本功，这里不会再多说哦～ 拼好后长这样

 

现在让我们再进入127.0.0.1:8000/welcome/ 看看显示情况

可以看到已经成功了！，现在我们把右边这些没用的 都删了。

一点点展开body中的html块。

让我们把整个div id= wrapper 的这个div都删除了。

 

注意底下的script等 千万别乱删。

再来看看 页面：

嗯清爽了很多。现在让我们把左侧菜单删一下，只留下1-2个，好让我们照葫芦画瓢。注意留下的要有代表性，比如能展开的

我们有兴趣的可以自己展开一下html代码看看，每一个li 都代表了左侧一个菜单。

我们这里留下第二个，其他都删掉。

变成这个清爽的样子了。现在我们展开html看看它是怎么写的格式，顺便给它改一下文案：

看来最上面的a 标签内的是外层的菜单总文案，下面的ul-li-a标签 全是它的子菜单。

5.修改自己想要的文案 

最上面的i标签，是菜单文案前面的图标：

改成如下文案：

看看页面：

好了，接下来我们 可能觉得这个红色太扎眼了，想尝试改一下它的颜色。让我们继续分析这个颜色在哪里。

在welcome.html中我们并未看到任何 红色的 设置。所以这个颜色一定藏在了我们引入的css文件中。

我们依次打开，进去滑动到底，注意观察左侧是否出现了红色色块：

当看到颜色差不多的红色，适合我们可以尝试改变成其他颜色，然后回到页面上刷新看看是否生效，如果生效则找到了，不生效就给人家改回来然后继续找，注意刷新页面一定要去缓存强制刷新才能使很多css样式更新哦～mac是shelft+cmmand+R 

在面对未显示色块的，也可以搜索color关键字。

经过排查，发现真实的颜色设置在src文件夹内的 jquery-rvnm.css文件中的第390行。并且发现 htmleaf-demo.css和 normalize.css并没有啥卵用。

让我们把颜色改成金色：

小伙们自己多多尝试，找出最漂亮的组合哦。让我们回到welcome.html中，删掉这俩个link标签：

其实这种情况要习惯，很多标签是jquery之家自带的，删除发现没什么变化就删了吧，减少代码冗余。

然后我们要给这几个菜单，写好超链接，不然用户点击没反应，放着干啥。

改成

注意超链接一般都放在 a标签的href属性里，这里前后必须有 / 

然后我们切换到浏览器。刷新下，点击用例库看看：

浏览器就自动跳转到了图中网址了。然后就是按照老规矩，和我们之前写/welcom/主页一样的办法去做这个用例库的页面了。先urls.py中写好对照关系，然后去views.py中写后台函数，返回case_list.html。然后去新建一个case_list.html好让后台函数返回，这些小伙伴课后自己感兴趣的可以自己练习，我们课程后续也会一步一步的继续制作这个用例库模块的。

好了这里我们就介绍完了如何开发一个左侧菜单了，是不是很讨巧的办法，最上面的search...测试发现也很好用。我们之后其他各种控件元素都可以在jquery之家上下载，按照我教的方法去拆出来一点点使用。虽然大神们会有更加科学和快速的方法进行二次开发 甚至自己干写，但是那需要很多的经验和意识。