最终效果图：

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>西南石油大学邮件系统</title>

 <link rel="stylesheet" type="text/css" href="style.css" />

 </head>

 <body>

     <div class="top">

         <img alt="西南石油大学电子邮件系统" src="data:images/login_logo.png" style="padding-left:400px;padding-top:25px">

         <p class="p1"><a href="#" class="a1"><b>帮助</b></a></p>

     </div>

     <div class="main">

         <div class="login1">

             <div class="login2">账号登录

                 <a href="#"><img alt="拖动" src="data:images/dragbar.png" style="float:right"></a>

             </div>

             <div class="login3"><b style="padding-left:50px;line-height:70px;">用户登录</b><br>

                 <input type="text" placeholder="用户名" class="input"><br>

                 <input type="password" placeholder="密码" class="input">

                 <small style="color:red;padding-left:50px;">学生选择@stu.swpu.edu.cn</small>

                 <a href="#" class="a2">忘记密码</a>

                 <button class="buttom1">登录</button>

             </div>

         </div>

     </div>

     <div style="width:100%;height:50px;color:gray;text-align:center;margin:10px;"> 西南石油大学</div>

 </body>

 </html>

main.html

 @CHARSET "UTF-8";

 .top{

     width:100%;

     height:100px;

     background-color:#F5F5F5;

     display:line;

 }

 .p1{

     display:inline;

     float:right;

     padding-top:20px;

     padding-right:300px;

 }

 .main{

     width:964px;

     height:460px;

     background-image:url(images/login_bg_02.jpg);

     margin-top:20px;

     margin-left:280px;

 }

 .login1{

     width:380px;

     height:350px;

     float:right;

     margin-top:50px;

     margin-right:50px;

 }

 .login2{

     width:380px;

     height:40px;

     background-color:rgba(250,150,50,1);

     text-align:center;

     line-height:40px;

     color:white;

 }

 .login3{

     width:380px;

     height:310px;

     background-color:white;

 }

 .input{

     margin-left:50px;

     margin-bottom:30px;

     width:280px;

     height:30px;

 }

 .a1{

     text-decoration:none;

     color:#787878;

 }

 .a2{

     padding-left:50px;

     color:gray;

     text-decoration:none;

 }

 .buttom1{

     width:150px;

     height:40px;

     background-color:#468CD2;

     float:right;

     margin-right:45px;

     margin-top:25px;

     color:white;

 }

style.css

代码结构图：

链接：https://pan.baidu.com/s/1-mZ5pyWH4bmdvKN8uISWiw
提取码：e2k0
复制这段内容后打开百度网盘手机App，操作更方便哦

SWPU新闻后台登录页面的更多相关文章

  1. DEDE暴力破解后台登录页面

    DEDE暴力破解后台登录页面 #!/usr/bin/env python '''/* * author = Mochazz * team = 红日安全团队 * env = pyton3 * */ '' ...

  2. thinkPHP中怎么访问域名直接跳到后台登录页面

    问题: 我想只访问域名就跳到后台登录页面,怎么把地址栏里的路径隐藏掉 答案: 修改配置Common里的conf文件夹里,把默认模块改成“Admin”,默认控制器改成“login”系统默认的默认模块式h ...

  3. 今天网站后台登录页面需要生成一个二维码，然后在手机app上扫描这个二维码，实现网站登录的效果及其解决方案如下

    要实现二维码登录,需要解决2个技术,1.需要js websocket 与后台php实现长连接技术 2.实现二维码生成技术 要实现这个功能第二个算是比较简单,只需要下载一个php的二维码生成器即可,但要 ...

  4. SpringBoot学习笔记四之后台登录页面的实现

    注:图片如果损坏,点击文章链接: https://www.toutiao.com/i6803542216150090252/ 继续之前完成的内容,首先创建一个常量类 常量类的内容 服务器端渲染 前后端 ...

  5. Magento2-2.3.4 win10安装完magento无法加载静态资源导致无法进入后台登录页面

    后台面无法进入,截图如下

  6. 新闻cms管理系统(二) ---- 后台登录功能

    1.页面准备: (1)前端资源的导入:将准备好的页面添加到项目中,放到Public目录下(公共的页面样式.js.图片等资源) (2)添加登录的视图模板 将登录页面的视图放到Amin>View&g ...

  7. 27、Flask实战第27天：cms后台登录

    cms后台登录界面 后台登录页面,我们不用自己写,只需要去Bootstrap中文网去找一个模板改一下就行 这里使用的模板是:https://v3.bootcss.com/examples/signin ...

  8. php大力力 [036节] 后台系统的登录页面界面做完啦

    php大力力 [036节] 后台系统的登录页面界面做完啦 我认为做的不错,我就先不上截图啦 要你的祝福 分布注册 Twitter Login Or Signup Form 藤藤每日一练——172个Ic ...

  9. dede织梦后台-退出空白,注销空白,打开空白,登录返回首页,登录返回登录页面

    24.php 5.4版本 后台500错误,打开空白的问题 不兼容 登录时空白 后台空白 24-1./include/userlogin.class.php 今天把电脑上的phpStudy升级到2013 ...

随机推荐

  1. http协议状态码及其意义

    什么是状态码? 状态码的作用是:服务器告诉客户端,发生了什么事. 在http协议中状态码出现在http response 的第一行.它会返回一个三位数的状态码和状态信息.状态码为了便于程序进行处理,而 ...

  2. javaweb 发布目录

    一个Java Web项目要运行,它首先要放在tomcat之类的容器中:该JavaWeb项目的构成一定要包含下面几种文件以及文件夹: META-INF : 存放一些meta information相关的 ...

  3. 华为AR-111S路由器GRE协议设置

    一.GRE的定义: gre(generic routing encapsulation,通用路由封装)协议是对某些网络层协议(如ip 和ipx)的数据报进行封装,使这些被封装的数据报能够在另一个网络层 ...

  4. 【转】LNK1123: 转换到 COFF 期间失败: 文件无效或损坏

    用VS2010编译C++项目时出现这样的错误: LNK1123: 转换到 COFF 期间失败: 文件无效或损坏 方案一:(这个方法比较好,在用qt运行时出现问题也能解决) 复制 C:\Windows\ ...

  5. 用 webpack 创建 vue 项目

    1.安装支持webpack 包 npm i -D  webpack webpack-cli  aspnet-webpack webpack-dev-middleware  webpack-hot-mi ...

  6. mysql 事物没提交导致事物一直运行解决方案

    1.设置 innodb_kill_idle_transaction 参数, 可以永久避免 https://dbaplus.cn/news-11-974-1.html

  7. 孙子兵法的计是最早的SWOT分析，《孙子兵法》首先不是战法，而是不战之法。首先不是战胜之法，而是不败之法

    孙子兵法的计是最早的SWOT分析,<孙子兵法>首先不是战法,而是不战之法.首先不是战胜之法,而是不败之法 在打仗之前,你要详细地去算. 计算的目的是什么呢?孙子说,是为了知胜,就是为了知道 ...

  8. drf 单表

    ^_^ # [{title,price},{}] 构造的数据结构 简单的FBV/CBV def showbooks(request): # FBV if request.method =='GET': ...

  9. IP通信基础的第一个星期

    IP通信基础不仅是很多专业课程的基础,同时学好它,在以后很多工作上都可以运用到,有网络工程师.通信工程师等等,当然,有些证书也会涉及到IP通信基础,有网络中级高级 CCNA等等. 那么,学好IP通信基 ...

  10. jdbc笔记(二) 使用PreparedStatement对单表的CRUD操作

    首先声明,本文只给出代码,并不是做教程用,如有不便之处,还请各位见谅. PreparedStatement相较于Statement,概括来说,共有三个优势: 1. 代码的可读性和易维护性:Prepar ...