使用bootstrap的登陆页面

最新推荐文章于 2024-05-26 13:30:44 发布

荒野小漂客

最新推荐文章于 2024-05-26 13:30:44 发布

阅读量7.6k

点赞数 1

分类专栏：前端文章标签： login

本文链接：https://blog.csdn.net/qq_31491923/article/details/82776512

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

这里使用的是使用比较流行的自举完成的登陆界面：

运行主要截图以及代码如下：

主要CSS代码：

@charset“UTF-8”;
.grad {
position：absolute;
宽度：100％;
高度：100％;
背景：-webkit线性梯度（90度，＃c0abde，＃98e2bf）;
背景：线性渐变（90度，＃c0abde，＃98e2bf）;
}
.logindiv {
   position：fixed;
左：50％;
最高：50％;
transform：translate（-50％， - 50％）;
宽度：25％;
}
.hint {
   width：100％;
身高：50px;
字体大小：15像素;
文本对齐：中心;
font-family：'Glyphicons Halflings';
}
.title {
   font-size：70px;
字母间距：10px;
保证金：0自动;
文本对齐：中心;
位置：相对;
底部：70像素;
字体样式：斜体;
FONT-FAMILY：格鲁吉亚，衬线;
text-shadow：2px 2px 0.1px＃1d0000;
左：50％;
最高：20％;
transform：translate（-50％， - 50％）;
-webkit-用户选择：无;
    -moz-用户选择：无;
    -MS-用户选择：无;
    用户选择：无;
}

主要页面代码：

<！DOCTYPE html>
<html>
   <head>
       <meta charset =“UTF-8”>
       <title> </ title>
       <link rel =“stylesheet”href =“login.css”>
       <link rel =“stylesheet” href =“bootstrap / css / bootstrap.css”>
       <script src =“bootstrap / js / bootstrap.min.js”> </ script>
   </ head>
   <body>
       <div class =“grad”>
           <div class =“title”>选课管理</ div>
           <div class =“logindiv”>
               <form class =“bs-example bs-example-form”role =“form”action =“login / check”method =“post” >
                   <div class =“input-group input-group-lg”>
                       <span class =“input-group-addon”> <span class =“glyphicon glyphicon-user”> </ span> </ span>
                       <input type =“text”class =“form-control”name =“username” placeholder =“用户名”>
                   </ div>
                   <br>
                   <div class =“input-group input-group-lg”>
                       <span class =“input-group-addon”> <span class =“glyphicon glyphicon-lock “> </ span> </ span>
                       <input type =”password“class =”form-control“name =”password“placeholder =”请输入密码“>
                   </ div>
                   <br>
                   <div class =”hint “id =”hint“>
                           用户名或密码错误。
                   </ div>
                   <div class =“input-group input-group-lg”style =“margin：0 auto; width：100％;“>
                       <button type =”submit“class =”buttonlarg btn btn-primary btn-lg“style =”width：100％;“>登陆</ button>
                   </ div>
               </ form>
           < / div>
       </ div>
       <script>
           $（“[name ='username']，[name ='password']”）。focus（function（）{
               $（“＃hint”）。empty（）;
           }）
       </ script>
   </ body>
</ html>

文件下载地址：https：//download.csdn.net/download/qq_31491923/10704577

访问：
1.免费下载程序网站: http://47.107.130.183
2.老人管理程序网站: http://47.107.130.183:8088/ root:admin,pwd:admin
2.车辆管理程序网站: http://47.107.130.183:8081 root:admin,pwd:admin

荒野小漂客

关注

1
点赞
踩
23

收藏

觉得还不错? 一键收藏
0
评论
使用bootstrap的登陆页面

这里使用的是使用比较流行的自举完成的登陆界面：运行主要截图以及代码如下：主要CSS代码：@charset“UTF-8”;.grad { position：absolute; 宽度：100％; 高度：100％; 背景：-webkit线性梯度（90度，＃c0abde，＃98e2bf）; 背景：线性渐变（90度，＃c0abde，＃98e2...
复制链接

扫一扫