标签:day6 学院 color xx background 102 white
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>
<title>Title</title>
<style>
#a thead tr td{
float: left;
font-size: 12px;
}
.b span{
padding: 8px;
border-radius: 7px;
}
.b1{
background-color: red;
color: white;
}
.b2{
background-color: white;
border: 1px solid gainsboro;
}
.b3{
background-color: dodgerblue;
color: white;
}
.c div{
width: 20%;
height: 20px;
text-align: center;
float: left;
line-height: 20px;
font-size: 15px;
background-color: dodgerblue;
color: white;
}
.c div:nth-child(1){
margin-right: 8%;
}
.c div:hover{
background-color: #b9def0;
color: black;
}
</style>
</head>
<body>
<table id="a" style="width: 50%;margin: 0 auto;" border="0" cellspacing="0" class="table table-striped table-hover">
<thead style=" background: #f5f5f5;">
<tr>
<td>一个学院管理界面</td>
<td style="background: gainsboro;">学员管理</td>
<td>教师管理</td>
<td style="background: gainsboro;">
<div class="dropdown" style="float: left;">
<div style="font-size: 12px;" data-toggle="dropdown"><!--data-toggle="dropdown"表示触发事件-->
其他管理<span class="caret"></span>
</div>
<ul class="dropdown-menu pull-left"><!--class="dropdown-menu"样式里包含绝对定位,不占空间。表示隐藏ul标签下的内容-->
<li><a>其他1</a></li>
<li class="divider"></li>
<li><a>其他2</a></li>
<li class="divider"></li>
<li><a>其他3</a></li>
</ul>
</div>
</td>
</tr>
</thead>
</table>
<table style="width: 50%;margin: 0 auto;margin-top: 10px;"
border="1" bordercolor="#dcdcdc" cellspacing="0" class="table table-striped table-hover">
<thead>
<tr>
<td>学号</td>
<td>姓名</td>
<td>等级</td>
<td>学院</td>
<td>管理</td>
</tr>
</thead>
<tr>
<td>1</td>
<td>李子明</td>
<td>102</td>
<td>xx学院</td>
<td class="b">
<span class="b1">删除</span>
<span class="b2">修改</span>
<span class="b3">编辑</span>
</td>
</tr>
<tr>
<td>1</td>
<td>李子明</td>
<td>102</td>
<td>xx学院</td>
<td class="b">
<span class="b1">删除</span>
<span class="b2">修改</span>
<span class="b3">编辑</span>
</td>
</tr>
<tr>
<td>1</td>
<td>李子明</td>
<td>102</td>
<td>xx学院</td>
<td class="b">
<span class="b1">删除</span>
<span class="b2">修改</span>
<span class="b3">编辑</span>
</td>
</tr>
<tr>
<td>1</td>
<td>李子明</td>
<td>102</td>
<td>xx学院</td>
<td class="b">
<span class="b1">删除</span>
<span class="b2">修改</span>
<span class="b3">编辑</span>
</td>
</tr>
</table>
<div style="width: 25%;height: 300px;background-color: #eff4fa;margin: 100px auto;">
<div style="width: 100%;height: 60px;background-color:#5bc0de;border-radius: 10px;">
<h2 style="text-align: center;line-height: 60px;color: black;" >欢迎使用xxxxx</h2>
</div>
<form action="#" style="width: 92%;height: 300px;margin-top: 30px;margin-left: 4%;">
<div class="form-group" style="text-align: center;">
<label for="name">账号:</label>
<input type="text" id="name">
</div>
<div class="form-group" style="margin-top: 20px;text-align: center;">
<label for="age">密码:</label>
<input type="text" id="age">
</div>
<div class="form-group">
<div class="checkbox" style="text-align: center;">
<label>
<input type="checkbox"><a style="color: black">我已阅读并同意协议</a>
</label>
</div>
</div>
<div class="c" style="width: 50%;height: 60px;margin-left: 38%;cursor:pointer;">
<div style="border-radius: 5px;">
<span>登录</span>
</div>
<div style="border-radius: 5px;">
<span>注册</span>
</div>
</div>
<div style="width: 100%;text-align: right;">
<a>忘记密码?</a>
</div>
</form>
</div>
</body>
</html>
标签:day6,学院,color,xx,background,102,white 来源: https://blog.csdn.net/Gavinorb/article/details/100748869
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。