1. 控件平台:
jquery之家:http://www.htmleaf.com/
vue组件:https://element.eleme.cn/#/zh-CN/component/installation
选择:菜单和导航,下载下图
2. apitest下新建文件夹:static,存放静态资源,将下载的菜单和导航放入static中
3. 双击index.html,拆出有用的拿走
- 首先拿走head标签内的 link标签 和 script标签(没有就不拿了),复制到我们的welcome.html中
- 快速折叠代码:mac按住键盘的shift+command+ 减号,windows系统的可以按住 shift+ctrl+减号;慢慢展开body,拿走如图
看看效果:http://127.0.0.1:8000/welcome/#
因为偷走后需要修改静态资源路径,在welcome.html代码中的所有带路径的都在前面加上/static/201908059658/ ,要去掉./
看看效果:
看看效果:http://127.0.0.1:8000/welcome/#
4. 删掉没用的文案
注意底下的script等 千万别乱删。看看效果:
5. 删掉多余的菜单,留下一两个,照葫芦画瓢;每一个li 都代表了左侧一个菜单,这里留下第二个,其他都删掉
6. 展开html,看看它的格式,顺便给它改一下文案:
- 最上面的a 标签内的是外层的菜单总文案,下面的ul-li-a标签 全是它的子菜单。
- 最上面的i标签,是菜单文案前面的图标:
改成如下文案:
看看效果:
7. 去掉炸眼的红色,welcome.html中无任何 红色的 设置。这个颜色一定藏在了引入的css文件中,依次打开,进去滑动到底,注意观察左侧是否出现了红色色块:
- 找到差不多的红色,将其变成需要的颜色,回到页面上刷新看看是否生效,如果生效则找到了,不生效就改回来然后继续找;注意刷新页面一定要去缓存强制刷新才能使很多css样式更新哦~mac是shift+cmmand+R,windows是shift+ctrl+R
- 在面对未显示色块的,也可以搜索color关键字
经排查,发现 htmleaf-demo.css和 normalize.css没有用,真实的颜色设置在src文件夹内的 jquery-rvnm.css文件中的第390行
让我们改成金色gold,看看效果
8. 回到welcome.html中,删掉这俩个link标签,很多标签是jquery之家自带的,删除发现没什么变化就删了吧,减少代码冗余
9. 加上超链接,注意超链接一般都放在 a标签的href属性里,这里前后必须有 /
看看效果:
10. 先urls.py中写好对照关系,去views.py中写后台函数,返回case_list.html;然后去新建一个case_list.html好让后台函数返回
这里就介绍完了如何开发一个左侧菜单了,讨巧的办法,最上面的search…测试发现也很好用。