处在互联网时代,对于页面内容展示的前端技术的术语,HTML, CSS, Javascript等大家一定耳熟能详。本节课程可以让你掌握如何实现页面的这几项基础技术。
题目
实现如下两个静态页面(可通过蓝鲸MagicBox实现) 1> 两个页面有相同的导航栏,”执行任务”和“任务纪录” 2> “执行任务”页面包含以下元素: a>两个下拉框:“选择业务” 和 “选择脚本” b>”执行”按钮 c> 一个表格,包含以下几个表头: 选择框、序号,IP, 操作系统,操作 (选择框列用以勾选主机,进行后续提交操作) 3> “任务纪录”页面包含以下元素: a> 三个下拉框:业务,用户,任务 一个“提交”按钮 b> 一个时间选择器 c> 一个表格,表头包含 “业务”“用户” “任务” “操作时间”“机器数” “状态” “参数” “详情” 将这两个页面成功“保存”,并“下载”到本地。 |
过程
第一个界面主要通过教程指引,按步骤完成;第二个界面则是完全依照教程展示的思路独立完成。
“执行任务”
a&b
对MagixBox的使用途径不清楚,通过论坛的教程,找到PC端入口,之后通过可视化拖拽,将基本的组件完成编辑。
将代码复制到本地的html文件,即可通过浏览器打开。
c> 一个表格,包含以下几个表头:选择框、序号,IP, 操作系统,操作
“任务纪录”
通过观察入手,两个按钮目前没有添加效果,因此只是简单的把顺序互换,得到基础轮廓:
<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>
此时
原因是,通过这里描写可以看到,必须在使用其他js插件前调入jQuery,而我图省事直接把获得时间的js描述放到了前面,所以就没有加载成功。
还要注意,不要重复添加jQuery哦!
c> 一个表格,表头包含 “业务”“用户” “任务” “操作时间”“机器数” “状态” “参数” “详情”
同样,我们先找到一个模板,并根据需要进行修改
为了便于修改,我们保留一行值,注释掉其他行。
提示:
html中多行注释:<!–>注释内容<–>
再将表格插入我们之前的html文件的适当位置,就完成了!
1 comment