失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > 测试学开发——第一课:环境搭建与页面开发介绍。

测试学开发——第一课:环境搭建与页面开发介绍。

时间:2019-07-17 11:52:33

相关推荐

测试学开发——第一课:环境搭建与页面开发介绍。

1 环境搭建:

jdk配置+eclipse下载

请参考:/ForestDeer/p/6647402.html

2测试页面快速开发技巧

/try/bootstrap/layoutit/

第一步:删除右侧内容,只留下Container

布局设置:可以选择其中的任意一个布局,点击拖动到右侧, 右侧会生成 Row-Coumn。

根据页面需要我们可以选择不同的格局 ,我们一12布局为例:

第二步:

基本css选择:

这里我们选择提交表单,因为测试页面往往是往后面提交一下测试数据。表单比较是我们测试使用

点击下载,就可以看到页面代码。

直接复制下来。

打开eclipse,新建一个项目

选择web项目

<div class="container"><div class="row clearfix"><div class="col-md-12 column"><form role="form"><div class="form-group"><label for="exampleInputEmail1">Email address</label><input type="email" class="form-control" id="exampleInputEmail1" /></div><div class="form-group"><label for="exampleInputPassword1">Password</label><input type="password" class="form-control" id="exampleInputPassword1" /></div><div class="form-group"><label for="exampleInputFile">File input</label><input type="file" id="exampleInputFile" /><p class="help-block">Example block-level help text here.</p></div><div class="checkbox"><label><input type="checkbox" />Check me out</label></div> <button type="submit" class="btn btn-default">Submit</button></form></div></div></div>

在head标签中加入<link rel="stylesheet" href="http://cdn./libs/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="http://cdn./libs/jquery/2.1.1/jquery.min.js"></script><script src="http://cdn./libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

再次刷新页面就可以得到如下内容:

如果觉得《测试学开发——第一课:环境搭建与页面开发介绍。》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。