最终效果图：

 <!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. 虚拟机——虚拟机VMware Workstation 的.vmdk格式与VirtualBox 的.vdi格式相互转换

    啦啦啦~~~ 由于现在Vmware Workstation的越来越普及,让很多小伙伴不知道怎么把以前用的VirtualBox虚拟机vdi格式转换成vmdk格式,下面我们就来转换一下吧... 第一步:找 ...

  2. HashMap 源码分析

    static final int DEFAULT_INITIAL_CAPACITY = 16;  默认容量 static final int MAXIMUM_CAPACITY = 1073741824 ...

  3. koa2：通过Ajax方式上传文件，使用FormData进行Ajax请求

    koa2通过表单上传的网上很多,但通过Ajax方式上传文件,使用FormData进行Ajax请求,不好找. 参考了这个用base64上传图片的例子.https://github.com/Yuki-Mi ...

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

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

  5. Rsync使用方法

    Rsync是一款开源.快速.多功能.可实现全量及增量的本地或者远程数据同步的优秀工具.并且支持多系统平台运行.Rsync具有本地与远程两台主机之间的数据快速复制同步镜像.远程备份等功能,该功能类似sc ...

  6. java线程学习之yield方法

    yield方法是暂停当前正在执行的线程对象,并执行其他线程. 这是一个静态方法,一旦执行,它会使当前线程让出CPU.让出的cpu并不代表当前线程不执行了.当前线程让出CPU后,还会CPU资源的争夺,但 ...

  7. Arrays工具类

    1.Arrays工具类针对数组进行操作的工具类 提供了排序查找等功能 2.方法: Arrays.toString(int[] a) 将数据转换成字符串 Arrays.sort(int[] a) 将数组 ...

  8. Leetcode 存在重复元素 （219,220）

    219. 存在重复元素 II 给定一个整数数组和一个整数 k,判断数组中是否存在两个不同的索引 i 和 j,使得 nums [i] = nums [j],并且 i 和 j 的差的绝对值最大为 k. / ...

  9. markdown code test - markdown code test - markdown code test - markdown code test

    目录 主要代码 bottom cc 主要代码 <div class="tocCol1 js-toc"></div> <a>bc</a> ...

  10. Appium+python 使用 press_keycode 如何输入大写字母

    背景:在做自动化测试项目时,需要在文本框中输入一串数字和字母组合的字符串(注:此页面为webview无法使用send_keys方法) 要使用send_keys方法首先要知道键盘字符对应的数值,这个可以 ...