老男孩14期自動化運維day15隨筆和作業(二)
阿新 • • 發佈：2018-12-29
1.作業 實現登入 註冊框 並且有必填項的提示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.view{
height: 400px;
width: 800px;
position: fixed;
background-color: white; 2.作業 實現左側導航欄，頂部選單欄，右側表格，全選，反選等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display:none;
}
.item .header{
height:35px;
background-color: #2459a2;
color: white;
line-height: 35px;
}
.pg-header{
background-color:#dddddd;
height:40px;
line-height:38px;
}
.table{
height: 400px;
width: 400px;
margin-left: 100px;
}
.c1{
position: fixed;
left:0;
top: 0;
right: 0;
bottom: 0;
background-color: black;
opacity: 0.6;
z-index: 9;
}
.c2{
width: 500px;
height: 400px;
background-color: white;
position: fixed;
left: 50%;
top:50%;
margin-left: -250px;
margin-top: -200px;
z-index: 10;
}
</style>
</head>
<body>
<div class="pg-header">
<div style="width:1350px;margin:0 auto;">
<div style="float:left;color:#696262">收藏本站</div>
<div style="float:right;color:#696262">
<a>登入</a>
<a>註冊</a>
<a>我的訂單</a>
<a>我的收藏</a>
<a>vip會員俱樂部</a>
<a>客戶端服務</a>
<a>關注</a>
<a>手機版</a>
</div>
<div style="clear:both;"></div>
</div>
</div>
<div style="width: 50px;margin-top:100px;">
<div class="item">
<div id="i1" class="header" onclick="ChangeMenu('i1');">選單1</div>
<div class="content hide">
<div>內容1</div>
<div>內容1</div>
<div>內容1</div>
</div>
</div>
<div class="item">
<div id="i2" class="header" onclick="ChangeMenu('i2');">選單2</div>
<div class="content hide">
<div>內容2</div>
<div>內容2</div>
<div>內容2</div>
</div>
</div>
<div class="item">
<div id="i3" class="header" onclick="ChangeMenu('i3')">選單3</div>
<div class="content hide">
<div>內容3</div>
<div>內容3</div>
<div>內容3</div>
</div>
</div>
<div class="item">
<div id="i4" class="header" onclick="ChangeMenu('i4')">選單4</div>
<div class="content hide">
<div>內容4</div>
<div>內容4</div>
<div>內容4</div>
</div>
</div>
<div class="table">
<input type="button" value="新增" onclick="ShowModel();" />
<input type="button" value="全選" onclick="ChooseAll();" />
<input type="button" value="取消" onclick="CancleAll();" />
<input type="button" value="反選" onclick="ReverseAll();" />
<table>
<thead>
<tr>
<th>選擇</th>
<th>主機名</th>
<th>埠</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td>
<input type="checkbox">
</td>
<td>1.1.1.1</td>
<td>190</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>1.1.1.2</td>
<td>192</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>1.1.1.3</td>
<td>193</td>
</tr>
</tbody>
</table>
</div>
<!-- 遮罩層開始-->
<div id="j1" class="c1 hide"></div>
<!-- 遮罩層結束-->
<!-- 彈出框開始-->
<div id="j2" class="c2 hide">
<p><input type="text"></p>
<p><input type="text"></p>
<p>
<input type="button" value="取消" onclick="HideModel();" />
<input type="button" value="確定">
</p>
</div>
<!-- 彈出框結束-->
</div>
<script>
function ChangeMenu(nid){
va