1 環境搭建：
jdk配置+eclipse下載
請參考：https://www.cnblogs.com/ForestDeer/p/6647402.html

2測試頁面快速開發技巧

http://www.runoob.com/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.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script><script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

再次刷新頁面就可以得到如下內容：

總結

以上是生活随笔為你收集整理的测试学开发——第一课：环境搭建与页面开发介绍。的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。