最终效果图：

 <!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. 初识JDBC

    1,概念: JDBC(Java DateBase Connective) ,即利用Java语言操作数据库语言 2,示例:Mysql中的JDBC 1,新建一个Dynamic Web Projectx项目 ...

  2. Excel坐标自动在AutoCad绘图_6

    众所周知,Excel对数据处理的功能非常强大,它可以进行数据处理.统计分析已经辅助决策的操作,该软件已经渗透到各个领域.作为一个测绘人,GISer, 也经常利用excel完成一些测量表格的自动化计算, ...

  3. json转换导致金额失真问题解决

    平台的余额查询逻辑中,今天爆了个雷.因平台用户都是较大的商户,且资金一般都是整数(这也是埋雷这么久的原因吧),但今天有客户说他们今天充值金额有个0.63的零头,但为何页面展示的账户余额零头却只是0.6 ...

  4. 命令行创建cocos2d-x的工程

    1. 命令行创建cocos lua工程cocos new MyGame -p com.your_company.mygame -l lua2. 进入工程目录, 编译运行时库cocos compile ...

  5. C# rtsp 转码rtmp nginx踩下的坑

    最近有一个项目, 进行步态识别的时候,同时需要显示摄像的实时画面.对于 Winform 显示画面,之前针对 rtmp 流的时候,是先写一个HTML 网页加载视频流,然后在IIS上发布,将地址直接赋值给 ...

  6. POSIX

    API: POSIX (编译前的源代码) ABI: APPLICATION BINARY INTERFACE (编译后的二进制文件,linux & windows不兼容) ---------- ...

  7. ASP.NET 教程汇总

    channel9 https://channel9.msdn.com/ .net core项目实战 https://study.163.com/course/introduction.htm?cour ...

  8. 对于react中的this.setState的理解

    一.this.setState第二个参数的作用:修改数据更新后最新的DOM结构 二.this.setState为什么是异步的? 1.setState只在合成事件和钩子函数中是“异步”的,在原生事件和s ...

  9. spider爬虫练习

    package com.jinzhi.spider; import java.io.BufferedReader;import java.io.IOException;import java.io.I ...

  10. Java笔记 #07# Hibernate Validator

    Hibernate Validator是Spring Boot默认附带的标准校验API(javax.validation)实现. 应用实例(配合切面) 采用注解定义切面.java @Aspect @C ...