接口测试平台代码实现18:帮助页面2

首先我们在昨天的基础上继续修改help.html

界面力求简单。

给我们的每个a标签超链接后面加上2个br标签 换行：

然后我们给整个div 的内左边距设置成20px，因为贴着浏览器左侧看着就是不舒服。

然后我们觉得a标签自带的下划线也不好看，那就给它加上去掉下划线的css,因为要处理多个a标签，所以我们直接在head中新建style标签，在style中写a{} ，这样就可以实现全局生效：

text-decoration:none；就是去掉下划线的属性。再看看效果：

然后我们再改一下颜色，当我们之后改动各个页面的各种元素的时候，一定要记得，要符合你整个平台的颜色风格，比如我之前登陆页面 是 绿色+红色。

我的首页是绿色+黑色。所以之这里我把a标签的颜色改为绿色-爱情的颜色

然后我们今天多学一个知识点，就是鼠标放上去有变化的设计：

添加一个a:hover{}

这个里面写的属性，比如颜色，就代表这鼠标放上去后哦a标签的颜色会变成这里面的颜色，比如我给它变成红色：

好，我们确保服务器运行，并刷新页面，鼠标移动到a标签超链接上看看效果：

会自动变色，自动加阴影，变大，等等都是可以实现的，大家自由发挥吧。

好，让我们接下来制作一个渐变色的竖线，来把 这个页面 左右分开。这个过程会涉及到很多新知识点哦～

最简单的办法，就是新建一个div，这个div 宽度很窄，但是高度 接近整个浏览器高度。内部元素只有一个空格占位，颜色是从上到下渐变，位置是固定的

让我们在body内继续新建一个div。

注意到里面有个空格，空格的写法是   别写错，别忘了后面的分号。如果不写这个空格，那么你这个div 就是被强制隐藏的。

然后我给它加上一堆css属性。

先按照上述的写，然后看看效果：

其中的属性position : absolute 代表着脱离文档流，也就是说这个div脱离了之前自动排版的位置，变成了任意指定固定位置，后面的left,top就是这个固定位置的坐标。left:150px就是距离浏览器左侧150px，top:10px就是距离浏览器顶部10px。

然后我们继续改，改它的颜色，现在我们是黑色，接下来改成绿红渐变，就是先把background-color属性删掉，然后加上

background:linear-gradient就是渐变背景色，to top是向上，后面俩个颜色。看看效果：

然后我们继续写右侧的文案

争取多写点：

新建这个div放文案，属性必须是 这个固定位置，left 和top都不能少。这样才能看起来是 左右排版，否则浏览器会给你排到底部。

我们对每段说明都 放在了一个子span中，以便我们后续控制显示/隐藏,不同的span 的id也不同，分别是help_1 ~ 5

好，按照我们的设计呢，用户一进来时候，右侧只显示第一条文档：项目列表

所以我们要给上述中 第2/3/4/5的span 的属性变成隐藏：style:"disaplay:none"

文案较多，大家可以直接复制以下这个div代码哈：

<div style="position: absolute;left: 200px;top: 0px">
        <span id="help_1">
        <h2>项目列表</h2>
        项目列表作为接口测试平台的基础单元，用来存放用户的接口数据等信息。<br>
        不同项目之间无法完全互通，数据互相不影响，属于平行世界。<br>
        项目有自己的权限保护系统，用户可放心的在里面进行安全的测试任务，而不被其他人打扰 <br>
        项目之间可以共享的有 host域名，以便其他人在编辑接口时复用 <br>
        项目内包含 接口库 和 用例库 和 项目设置 三大模块 <br>
        项目的后续设置如 名称/备注/其他管理员 均可以在 项目设置模块中设置 <br>
        项目列表就是所有人创建的项目的列表 您可以挑选需要的项目进入内部 <br>
        每个用户可以创建无限多的项目 <br>
        </span>

        <span style="display: none"  id="help_2">
        <h2>接口库</h2>
        接口库作为项目内的第一个子模块，主要用来存放用户的接口数据 <br>
        接口库中 可以对接口进行增删改查 <br>
        接口库中 可以对接口进行自动健壮性测试 <br>
        接口库中 可以如postman一样调试接口 <br>
        接口库中 可以设置项目内的公共请求头/域名 作为全局变量 <br>
        您可以在后续的用例库 中直接套用接口库中的接口 <br>
        </span>

        <span style="display: none"  id="help_3">
        <h2>接口调试</h2>
        接口调试模块 是一个临时的类似postman的接口调试 <br>
        您可以不必先新建项目/进入项目/新增接口 来进行调试 <br>
        直接就开始使用，并且会保留您的请求记录，可以随时回放 <br>
        对于想复用的接口，您可以保存到您已有的项目中 <br>
        </span>

        <span style="display: none"  id="help_4">
        <h2>后台</h2>
        后台包括我们的用户管理/数据管理 <br>
        只有管理员可以登陆，申请管理员请联系 开发者    <br>
        </span>

        <span style="display: none"  id="help_5">
        <h2>账户</h2>
        进入登陆页面，输入用户名/密码，点击注册 按钮即可注册成功 <br>
        注册成功后，直接点击登陆按钮即可登陆成功 <br>
        如果遇到任何登陆问题，请联系管理员 或在首页进行吐槽(当然你也进不去首页～) <br>
        </span>
    </div>

好让我们 去书写 js代码，以便我们点击哪个左侧超链接，右侧就显示哪段文案：

新建script 和函数show_help ，接收一个which_id ，来判断要显示哪段文案

然后我们在左侧那几个a标签内 加上点击调用show_help()函数：

上图中，我们直接在href中写上 javascript:函数名("参数") 可以让我们的a标签变成按钮一样的功能，不再去跳转到其他页面，而是执行某js函数。

需要注意：其中的参数 我们加上了单引号，证明这是个字符串，以便我们一会再js中直接使用拼接，因为href的值外面已经加了双引号，所以我们函数名后面参数就只能加单引号，不能和外面一样哦～

让我们去接着写show_help函数：

注意我这里的构思，分俩段，1是隐藏全部，2是显示指定。

为什么这么设计？

因我们这个函数要重复执行，我们如果不先隐藏所有的，用户点了第一下之后，我们显示了第一个，然后点击第二个，我们就会同时显示第一段和第二段。最简单安全的方式就是如此的设计，先一股脑全隐藏了，然后再显示对应的。关于我刚刚说的那种显示多个的bug，我详细 大家在日常测试中 应该也遇到过那么一次两次 开发的bug吧，就是忘记隐藏掉之前的记录。

先写好全部隐藏的代码：

修改一个元素的css样式，就是定位后接.style.xxxxx = '' 等号右边一定是字符串哦～哪怕none在标签内是没有字符串的。

然后继续写显示指定文案代码：

就这么简单一句，其中的定位用id，是拼接起来的，因我们传进来的参数就是 字符串 1-5，然后恰好我们前面设计的5段文案的id的最后也是1-5 ，所以就取巧了help_1 - 5。

后面修改这段span文案的display属性值为'block' 就是说要显示出来。好，刷新页面

看看效果：

可以发现我们点击不同左侧菜单，右侧就会迅速显示对应的解释文案～

好了，今天讲解到这里就结束了。

我们学到了positon的固定位置，渐变颜色，竖线 /横线的设计。显示指定元素的js，鼠标放上元素的变化，元素id命名的小技巧 等知识。

欢迎大家持续分享+点赞哦～

最后别忘了进我们接口平台的专用讨论区吐槽～：留言板