蓝鲸实践作业——前端基础

处在互联网时代，对于页面内容展示的前端技术的术语，HTML, CSS, Javascript等大家一定耳熟能详。本节课程可以让你掌握如何实现页面的这几项基础技术。

题目

实现如下两个静态页面（可通过蓝鲸MagicBox实现）
1> 两个页面有相同的导航栏，”执行任务”和“任务纪录”
2> “执行任务”页面包含以下元素：
a>两个下拉框：“选择业务” 和 “选择脚本”
b>”执行”按钮
c> 一个表格，包含以下几个表头：
选择框、序号，IP, 操作系统，操作
（选择框列用以勾选主机，进行后续提交操作）
3> “任务纪录”页面包含以下元素：
a> 三个下拉框：业务，用户，任务
一个“提交”按钮
b> 一个时间选择器
c> 一个表格，表头包含 “业务”“用户” “任务” “操作时间”“机器数” “状态” “参数” “详情”

将这两个页面成功“保存”，并“下载”到本地。

过程

第一个界面主要通过教程指引，按步骤完成；第二个界面则是完全依照教程展示的思路独立完成。

“执行任务”

a&b

对MagixBox的使用途径不清楚，通过论坛的教程，找到PC端入口，之后通过可视化拖拽，将基本的组件完成编辑。

将代码复制到本地的html文件，即可通过浏览器打开。

c> 一个表格，包含以下几个表头：选择框、序号，IP, 操作系统，操作

https://magicbox.bk.tencent.com/static_api/v3/index.html#detail/show?id=table2&isPro=1

多种表格

“任务纪录”

通过观察入手，两个按钮目前没有添加效果，因此只是简单的把顺序互换，得到基础轮廓：

<li><a href="javascript:void(0);">任务记录</a></li>
<li class="king-navbar-active"><a href="javascript:void(0);">执行任务</a></li>

a> 三个下拉框：业务，用户，任务

这一步同样简单，刚才的界面有两个复选框，我们复制其中的一个复选框并将其与其他的放在同一层次即可

不过此时，提交按钮自动移至下方，尚不知如何更改复选框的大小。

b> 一个时间选择器

在组件库中寻找

直接将代码复制到文件中的结果是苍白的

所以需要加入引入依赖文件，直接在最前面粘贴即可。

<link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css-pro/bk.css" rel="stylesheet">
<link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bkTimePicker-1.0/css/bkTimePicker.css" rel="stylesheet">
<script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/jquery-1.10.2.min.js"></script>
<script src="https://magicbox.bk.tencent.com/static_api/v3/assets/bkTimePicker-1.0/js/bkTimePicker.js"></script>