最终效果图：

 <!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. mac下mysql安装及配置启动

    ---恢复内容开始--- 原始链接:https://segmentfault.com/q/1010000000475470 按照如下方法成功安装并启动: mysql.server start//启动服 ...

  2. if语句&switch&Scanner

    if流程控制语句: if 语句的用语法如下: if(boolean表达式){ //如果条件为true那么执行 } 只有条件为true时才会执行,否则执行if语句后面的代码. 实例代码: public ...

  3. windows10的普通用户使用Task Scheduler的问题

    在Create Task 窗口的General选项卡中,在Security options 里有几个单选项,分别是 Run only when user is logged on ,Run wheth ...

  4. RoboMongo命令（版本：Robo 3T 1.1.1）

    查询并排序db.getCollection('working_history').find({"identification" : "76170178"}).s ...

  5. Hadoop3.2.0集群（4节点-无HA）

    1.准备环境 1.1配置dns # cat /etc/hosts 172.27.133.60 hadoop-01 172.27.133.61 hadoop-02 172.27.133.62 hadoo ...

  6. Java基础实训2

    1. 一维数组的创建和遍历. 声明并创建存放4个人考试成绩的一维数组,并使用for循环遍历数组并打印分数.要求: (1)    首先按“顺序”遍历,即打印顺序为:从第一个人到第四个人: (2)    ...

  7. iOS SDWebImage知识点

    1.clear 和 clean clear 先把之前的缓存文件夹删除掉,然后新建一个文件夹 clean 先删除过期的文件,然后计算剩余缓存文件的大小 currentSize > maxSize, ...

  8. day19

    """ time 用于处理时间相关 1.获取时间 2.不同格式的时间转换 3.sleep函数"""import time# 浮点型的时间戳 ...

  9. HBase根据Rowkey批量查询数据JAVA API(一次查多条，返回多个记录)

    最近在生产中遇到了一个需求,前台给我多个rowkey的List,要在hbase中查询多个记录(返回给前台list).在网上也查了很多,不过自己都不太满意,filter的功能有可能查询结果不是准确值,而 ...

  10. Appium测试安卓apk遇到的问题及解决方法

    1.Showing error - “Returned value cannot be converted to WebElement: {ELEMENT=1}  解决方法:https://sqa.s ...