前端day06

最新推荐文章于 2023-08-18 13:59:55 发布
最新推荐文章于 2023-08-18 13:59:55 发布
阅读量52 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42026679/article/details/100711233
版权

用BootStrap完成一个登陆界面，效果不限。

运行截图：
在这里插入图片描述

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
    <link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<div class="container" style="width: 500px;margin-top: 40px">
    <form action="#">
        <div id="c">
            <div style="text-align: center;font-size: 25px">
                <div>账号登录</div>
            </div>
            <div class="form-group">
                <label for="id"></label>
                <input type="text" value="请输入邮箱或手机号" class="form-control" id="id">
            </div>
            <div class="form-group">
                <label for="password"></label>
                <input type="text" value="请输入密码" class="form-control" id="password">
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox">7天内自动登录
                </label>
                <div style="float: right">忘记密码</div>
            </div>
            <input type="submit" value="登  录" class="btn btn-primary btn-block">
        </div>
    </form>
</div>
</body>
</html>

完成一个人员管理界面

运行截图：
在这里插入图片描述

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>manager</title>
    <link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script src="jquery-3.4.1.min.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">一个学院管理界面</a>
            </div>
            <div>
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">学员管理</a></li>
                    <li><a href="#">教师管理</a></li>
                    <li class="dropdown active">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            其他管理
                            <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">其他1</a></li>
                            <li><a href="#">其他2</a></li>
                            <li><a href="#">其他3</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <table class="table table-bordered">
        <thead>
            <tr>
                <td>学号</td>
                <td>姓名</td>
                <td>班级</td>
                <td>学院</td>
                <td>管理</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>李子明</td>
                <td>102</td>
                <td>xx学院</td>
                <td class="col-md-2">
                    <button class="btn btn-danger" data-toggle="dropdown">删除</button>
                    <button class="btn btn-default" data-toggle="dropdown">修改</button>
                    <button class="btn btn-primary" data-toggle="dropdown">编辑</button>
                </td>
            </tr>
            <tr>
                <td>1</td>
                <td>李子明</td>
                <td>102</td>
                <td>xx学院</td>
                <td class="col-md-2">
                    <button class="btn btn-danger" data-toggle="dropdown">删除</button>
                    <button class="btn btn-default" data-toggle="dropdown">修改</button>
                    <button class="btn btn-primary" data-toggle="dropdown">编辑</button>
                </td>
            </tr>
            <tr>
                <td>1</td>
                <td>李子明</td>
                <td>102</td>
                <td>xx学院</td>
                <td class="col-md-2">
                    <button class="btn btn-danger" data-toggle="dropdown">删除</button>
                    <button class="btn btn-default" data-toggle="dropdown">修改</button>
                    <button class="btn btn-primary" data-toggle="dropdown">编辑</button>
                </td>
            </tr>
            <tr>
                <td>1</td>
                <td>李子明</td>
                <td>102</td>
                <td>xx学院</td>
                <td class="col-md-2">
                    <button class="btn btn-danger" data-toggle="dropdown">删除</button>
                    <button class="btn btn-default" data-toggle="dropdown">修改</button>
                    <button class="btn btn-primary" data-toggle="dropdown">编辑</button>
                </td>
            </tr>
        </tbody>
    </table>
</div>
</body>
</html>
weixin_42026679
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Web前端学习-day03-JavaScript
Javaw1212的博客
08-26 3919
交互性强: 由于JS语言是嵌入到HTML页面中undefined最终执行在客户端的浏览器中的语言undefined和用户是直接接触undefined Java语言是运行在服务器的语言undefined 用户需要进行交互的话必须通过网络才可以undefined所以JS语言的交互性会更强.==和===区别: ==先统一等号两边变量的类型 再比较值undefined ===先比较两个变量的类型undefined类型一致后再比较值. "666"==666 true "666"===666 false。...
【web前端基础day02】表格table+表单form
qq_61971608的博客
01-16 3652
HTML over
前端学习 DAY06
Nancyuojuiivk的博客
07-14 572
前端学习DAY06。
前端学习DAY2
qq_41577242的博客
11-21 619
前端学习DAY2链接使用 链接使用 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <a href="http://www.baidu.com">访问百度喔</a> <br/> <a href="http:/
前端学习日记day4——图文混排
jumao555的博客
09-14 1636
1.图像标记<img/> 语法：<img src="图像URL"> 其中src属性用于指定图像文件的路径和文件名。 表1-1 <img/>标记相关属性 属性 属性值 描述 src URL 图像路径 alt 文本 图像不能显示时的替换文本 title 文本 鼠标悬停时显示的内容 width 像素 设置图像宽度 height 像素 ...
自学前端day 9
weixin_44584059的博客
01-28 4839
相对定位后，元素重叠的情况 实例： &lt;style&gt; div{ border: 1px rgb(199, 199, 209) solid; height: 125px; position: absolute; width:200px; ...
前端学习日记 day1
iliveforyou的博客
12-23 768
学习初衷 今年大四了，转眼就要毕业踏入社会，这感觉就像小时候疯了一晚上，到第二天才想起要交作业时的慌张。 而现在的慌张，则是自己一无所长，更没有明确的人生理想或奋斗目标，依旧过得浑浑噩噩，稀里糊涂。 不过说起来，我曾经也有过梦想，就是成为一名作家，但自从看了克里斯托弗·诺兰的《追随》后，我便不再多想了，因为我自问自己真的那么爱写作吗？成为作家只不过是我回避现实的挡箭牌罢了，况且还写得那么烂。 工...
前端学习日记day3——制作新闻页面
jumao555的博客
09-10 1290
vfv
前端学习--Day03
Cure The World的博客
08-24 3508
1、table的介绍 2、table合并单元格及其他基础标签案例 3、div的介绍 4、块级标签与行内标签的行内块标签的特点以及区别
[前端]时间插件day.js插件
weixin_49780389的博客
08-18 560
安装对应插件，并且引入它们。1.首先我们可以使用。
06day_前端学习资料_
09-30
用于给前端爱好者学习的资料和练习，希望能帮到刚入门的新人
前端（day03-精灵图）
06-17
PICKPICK
学习前端-HTML-day01
08-17
学习前端-HTML-day01
Web前端.DAY1.mp4
05-16
Web前端.DAY1.mp4
前端学习day01-HTML标签01
06-21
端学习day01--HTML标签01源码
基于易支付二开的前端模板美化源码.zip
06-17
基于易支付二开的前端模板美化源码
pyzmq-18.0.0-cp35-cp35m-manylinux1_i686.whl
最新发布
06-17
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
51单片机定时器-0模拟PWM输出源程序
06-17
51单片机定时器-0模拟PWM输出源程序 51单片机定时器0模拟PWM输出C程序例程，适合刚接触PWM波调光、调速等应用场合，程序方便移植，能够直接使用
简历模板简洁风红色肌理红色肌理风格.zip
06-17
在求职的征途上，一份出色的简历是你通往梦想职位的敲门砖。我们精心准备了一系列面试求职简历模板，旨在帮助你以最佳形象站在潜在雇主面前。这些简历模板不仅设计精美，而且注重内容的清晰呈现，使招聘经理一目了然地看到你的能力和经验。 我们的模板集合了多种风格与布局，无论你是应届毕业生、职场跳槽者还是行业专家，都能在这里找到适合你职业形象的简历设计。每一个模板都经过精心设计，确保你的简历在众多求职者中脱颖而出，同时保持足够的专业度和可读性。 不仅如此，我们的简历模板易于编辑，你可以根据具体职位需求快速调整内容，展现你的个人优势和职业成就。使用这些模板，将大大提高你的面试机会，并帮助你更好地表达自己的价值和潜力。 别让传统且缺乏创意的简历阻碍你迈向成功的道路。立即下载这些精美的简历模板，让你的求职之路更加顺畅，向心仪的工作迈进吧！记住，一个良好的开始是成功的一半，而一份精致的简历，正是你成功的起点。
用前端转化
05-30
如果你想在前端将日期格式化为指定的格式，可以使用 JavaScript 中的 `Date` 对象和 `toLocaleDateString()` 方法。 举个例子，如果你有一个表示当前时间的 `Date` 对象，你可以使用以下代码将其格式化为 `yyyy-mm-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值