代码文件夹带有红色感叹号_接口测试平台代码实现7:菜单的开发
关于菜单,我们常见的有顶部的,也有左侧的。那么具体要怎么开发呢?
其实对于菜单这么常见的控件,我们没必要自己动手去做,完全可以去网上下载一个现成的,各种漂亮的要什么有什么,所以本节主要精髓是教给大家如何去网上下载后利用起来。
首先我们进入一个我平时比较喜欢的控件平台:jquery之家:http://www.htmleaf.com/进入后会发现,上面有各种分类。我们选中菜单和导航
映入眼帘的是各种各样的 大神们分享的 菜单。小伙伴们可以任选哈,这里我挑了一个简单一点的做讲解:(第一页 第二个)
我们点击进去:点一下查看演示:
感觉 还是可以的,功能很多,上面还有个Search.. 应该是搜索功能我们关掉演示,点击下载:
下载后的压缩包直接解压
然后注意,我们打开pycahrm,要在项目中新建一个名为:static的文件夹,用来存放这种资源
这里名字一定不要写错,就写static然后我们把这个解压后的菜单资源粘贴进static里。
粘贴好之后,我们会看到 有个index.html,这个html就是他给的demo例子。我们双击打开,然后点击浏览器按钮看看在我们本地这个菜单的展示怎么样?
在浏览器中打开后我们发现还是不错的。那么下面就让我们开始拆了它,把其中有用的都拿走!首先我们拿走他head标签内的 link标签 和 script标签(没有就不拿了)
把这个复制到我们的welcome.html中:
然后继续回到index.html,继续拆!我们按住键盘的shelft+command+ 减号。可以快速折叠整个文件,windows系统的可以按住 shelft+ctrl+减号。然后我们再慢慢展开body,看到这几个块代码:
二话不说,拿走拿走!粘贴过来后如图:
这时候我们 运行项目,打开127.0.0.1:8000/welcome/ 看看显示情况!
发现乱的不行,这是因为我们把内部资源都偷走后,需要改一些路径。我们先来看看 原来的各种路径,(路径是指静态资源的路径)
我们会发现 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标签 全是它的子菜单。
最上面的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之家上下载,按照我教的方法去拆出来一点点使用。虽然大神们会有更加科学和快速的方法进行二次开发 甚至自己干写,但是那需要很多的经验和意识。
喜欢的小测试们欢迎点个赞+在看~
代码文件夹带有红色感叹号_接口测试平台代码实现7:菜单的开发相关推荐
- html div分钟刷新一次啊代码_接口测试平台代码实现57首页重构5
本节我们接着开发首页, 主要内容是 让左侧的请求记录和右侧的请求模块 联动起来. 具体联动需求: 右侧请求一次之后,左侧生成记录 点击左侧记录,右侧则会显示这次记录的请求数据 我们本节课的内容是想办法 ...
- unittest 多个测试文件只开一次浏览器_接口测试平台代码实现75: 多接口用例15
根据我们上一节最后的投票. 引入unittest框架 碾压了第一种.其实我个人也偏向这个.因为我尝试过很多,但是唯独没有引入unittest在接口测试平台中.所以借此机会,也想挑战一下,涨点经验. 请 ...
- js代码自动排版_接口测试平台代码实现9:菜单常显
上节我们说到了一个问题:就是如何让菜单出现在每个页面的左侧. 比如我们刚研发好的home.html,配上菜单看才会更好看. 这里有三个方法: 把菜单的html代码复制粘贴到 其他各个页面 特点:完全不 ...
- html留言板代码_接口测试平台代码实现19.首页优化
按照最近俩天 小伙伴的反馈激烈程度,本节课准备把首页添加一个非常有用户黏性的一个功能.公司内的各个超链接传送门! 新来的公司的小伙伴经常会因为找不到各个平台/文档的地址而发懵.老员工跨部门工作的时候也 ...
- ride上点击用例不能显示edit信息_接口测试平台代码实现61: 多接口用例1
终于又序更上了,原谅最近作者几天事情不断. 按照我们之前的计划,需要迅速开启很重要的核心多用例接口. 首先,我们要确定,这个功能的大体设计. 就放在在我们的页面 用例库 中: 所以也就是我们很久之前就 ...
- 请求到后台百分号被删除原因_接口测试平台代码实现85: 全局请求头1
本节开始要制作一些次要功能,但是也是非常实用的.比如项目内的全局请求头. 首先看我们的前端页面,这个全局请求头的按钮: 我的设计是呢,点击后,出现一个弹层,这个弹层里除了保存/取消按钮 标题外.要有一 ...
- html调后台接口_接口测试平台代码实现62: 多接口用例2
好了,最近水了好多期,终于要写点代码了. 本节内容,我们搞定这个多接口的大用例 列表相关吧,难度基本为0,都是我们之前用到过的. 出现bug或者建议的 小伙伴可以直接留言或进微信群,但是可惜的是微信群 ...
- 关于eclipse的Java文件前面有红色感叹号的解决办法
关于eclipse的Java文件前面有红色感叹号的解决办法 出现红色感叹号的情况是你的builderpath里面出现了一些双重的jar结构 解决的方法就是在你的Java文件上面右键buildpath ...
- 此上下文中不支持函数定义。请在代码文件中创建函数。_深入解析Python上下文管理器,让你不再迷茫!...
1. 上下文管理器 一个类只要实现了 __enter__() 和 __exit__() 这个两个方法,通过该类创建的对象我们就称之为上下文管理器. 上下文管理器可以使用 with 语句,with语句之 ...
- babel编译html文件,使用webpack+babel来_编译_JS代码
常规的引用外部JS文件是 在es2015中,并不需要这样.我们使用import-from语法 示例:一如分算需上来处一定迹面数一跳这件我子作我们在ui.js里新直能分支调二浏页器朋代说,事刚需求定义2 ...
最新文章
- ubuntu下配置华为交换机s2016
- 2020/Province_C_C++_A/F/成绩分析
- ffmpeg libx264_编程小短文:FFmpeg视频画面尺寸调整,必知必会
- Matlab找矩阵中最大最小值的位置
- 【BZOJ4566】找相同字符,后缀数组
- python中if语句的实例_Python基础入门-IF语句
- 【重识 HTML + CSS】CSS 选择器
- 用SecureCRSecurePortable查看动态日志
- 2021-07-26 NLP词嵌入
- 以数为本、谋求智变,联通大数据“跑步”进入发展新阶段!
- 教你如何用插件加速视频播放
- java课程设计象棋_java课程设计 中国象棋
- 解锁 Elastic 最新的数据采集模块 - Ingest manager 和 Elastic Agent
- python的占位符——%
- 全球与中国2-碘吡啶市场深度研究分析报告
- C语言变量类型及其表示范围
- 计算机站课作文400字,关于电脑教室的作文400字
- docker搭建并使用AB(apache bench)测试工具压力测试
- 记一个转行程序员的工作经历与感想(一)
- Python文件的移动命名删除复制