ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

day06

2019-09-11 21:00:22  阅读:18  来源: 互联网

标签:color day06 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>


标签:color,day06,xx,background,学院,102,white

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有