@工商web实战开发软件1722秤砣小组钟—2day02
1.登陆界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
<link href="bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="container">
<form role="form">
<div class="form-group">
<label for="name2">名称</label>
<input type="text" class="form-control" id="name2" placeholder="请输入名称">
</div>
<div class="form-group" style="margin-top: 20px">
<label for="password2">密码：</label>
<input type="text" class="form-control" id="password2" placeholder="请输入密码">
</div>
<div class="checkbox">
<label>
<input type="checkbox">是否记住密码
</label>
</div>
<button type="sumbit" class="btn btn-default" style="background: #2aabd2">提交</button>
</form>
</div>
</body>
</html>
效果图
2.下拉框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格加下拉框</title>
<link href="./bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
<script src="jquery/jquery-3.4.1.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<style>
#head{
width: 1140px;
height: 54px;
margin: auto;
background: gainsboro;
}
.box1{
width: 200px;
height: 54px;
background: gainsboro;
float: left;
}
.box2{
width: 100px;
height: 54px;
background: gainsboro;
float: left;
}
.box3{
width: 100px;
height: 54px;
background: gainsboro;
float: left;
}
.box1:hover{
background: #b8b8b8;
}
.box2:hover{
background: #b8b8b8;
}
.box3:hover{
background: #b8b8b8;
}
.container{
margin-top: 20px;
}
</style>
</head>
<body>
<div id="head">
<div class="box1">
<p style="line-height: 45px;text-align: center;">一个学院管理界面</p>
</div>
<div class="box2">
<p style="line-height: 45px;text-align: center;">学员管理</p>
</div>
<div class="box3">
<p style="line-height: 45px;text-align: center;">教师管理</p>
</div>
<div class="dropdown">
<button class="btn dropdown-toggle" data-toggle="dropdown">
<p style="line-height: 30px;">其他管理<span class="caret"></span></p>
</button>
<ul class="dropdown-menu">
<li>
<a href="https://www.baidu.com">第一</a>
</li>
<li>
<a href="https://www.baidu.com">第二</a>
</li>
<li>
<a href="https://www.baidu.com">第三</a>
</li>
</ul>
</div>
</div>
<div class="container">
<table class="table table-striped table-bordered table-hover">
<!-- cellspacing使表格间的空隙消失-->
<thead>
<tr style="">
<th>学号</th>
<th>姓名</th>
<th>寝室号</th>
<th>学院</th>
<th>管理</th>
</tr>
</thead>
<tbody>
<td>1</td>
<td>大月</td>
<td>621</td>
<td>xx学院</td>
<td>
<button style="height:30px;width:50px;float: left;background: red;text-align: center">删除</button>
<button style="height:30px;width:50px;float: left;background: white;text-align: center">修改</button>
<button style="height:30px;width:50px;float: left;background: #2aabd2;text-align: center">编辑</button>
</td>
</tbody>
<tbody>
<td>2</td>
<td>二月</td>
<td>621</td>
<td>xx学院</td>
<td>
<button style="height:30px;width:50px;float: left;background: red;text-align: center">删除</button>
<button style="height:30px;width:50px;float: left;background: white;text-align: center">修改</button>
<button style="height:30px;width:50px;float: left;background: #2aabd2;text-align: center">编辑</button>
</td>
</tbody>
<tbody>
<td>3</td>
<td>三月</td>
<td>621</td>
<td>xx学院</td>
<td>
<button style="height:30px;width:50px;float: left;background: red;text-align: center">删除</button>
<button style="height:30px;width:50px;float: left;background: white;text-align: center">修改</button>
<button style="height:30px;width:50px;float: left;background: #2aabd2;text-align: center">编辑</button>
</td>
</tbody>
<tbody>
<td>4</td>
<td>四月</td>
<td>621</td>
<td>xx学院</td>
<td>
<button style="height:30px;width:50px;float: left;background: red;text-align: center">删除</button>
<button style="height:30px;width:50px;float: left;background: white;text-align: center">修改</button>
<button style="height:30px;width:50px;float: left;background: #2aabd2;text-align: center">编辑</button>
</td>
</tbody>
</table>
</div>
</body>
</html>
效果图
129
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
