先来看看样子。

html源码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Login</title>

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

 </head>

 <body>

     <div id="login">

         <h1>Login</h1>

         <form method="post">

             <input type="text" required="required" placeholder="用户名" name="u"></input>

             <input type="password" required="required" placeholder="密码" name="p"></input>

             <button class="but" type="submit">登录</button>

         </form>

     </div>

 </body>

 </html>

css代码：

 html{

     width: %;

     height: %;

     overflow: hidden;

     font-style: sans-serif;

 }

 body{

     width: %;

     height: %;

     font-family: 'Open Sans',sans-serif;

     margin: ;

     background-color: #4A374A;

 }

 #login{

     position: absolute;

     top: %;

     left:%;

     margin: -150px   -150px;

     width: 300px;

     height: 300px;

 }

 #login h1{

     color: #fff;

     text-shadow:  10px;

     letter-spacing: 1px;

     text-align: center;

 }

 h1{

     font-size: 2em;

     margin: .67em ;

 }

 input{

     width: 278px;

     height: 18px;

     margin-bottom: 10px;

     outline: none;

     padding: 10px;

     font-size: 13px;

     color: #fff;

     text-shadow:1px 1px 1px;

     border-top: 1px solid #312E3D;

     border-left: 1px solid #312E3D;

     border-right: 1px solid #312E3D;

     border-bottom: 1px solid #56536A;

     border-radius: 4px;

     background-color: #2D2D3F;

 }

 .but{

     width: 300px;

     min-height: 20px;

     display: block;

     background-color: #4a77d4;

     border: 1px solid #3762bc;

     color: #fff;

     padding: 9px 14px;

     font-size: 15px;

     line-height: normal;

     border-radius: 5px;

     margin: ;

 }

Html制作简单而漂亮的登录页面的更多相关文章

  1. HTML5实战教程———开发一个简单漂亮的登录页面

    最近看过几个基于HTML5开发的移动应用,比如臭名昭著的12036移动客户端就是主要使用HTML5来实现的,虽然还是有点反应迟钝,但已经比较流畅了,相信随着智能手机的配置越来越高性能越来越好,会越来越 ...

  2. JavaWeb 学习003-简单登录页面功能实现

    先说下题外话:学习不是看你学了多久,重点是学到多少: 这就要求   效率.我在这三个小时,但是有效率的又有多久?只是做了这么一点简单的事. 登录页面 跟数据库交互,进行判断是否登陆成功.我只是实现了一 ...

  3. HTML5和CSS3登录页面制作实录

    本文详细介绍使用HTML5 和CSS3 制作一个登录页面的完整过程. View demo login.html <form id="login"> <h1> ...

  4. java web: eclipse & maven & jetty & struts2 & mysql = 简单登录页面

    第一次接触java web开发,花费了一天半的时间,写了个简单的登录页面,以此文为记. 开发工具 Eclipse Luna Release (4.4.0) 已集成maven,maven目前的体会就是管 ...

  5. 一步一步理解 python web 框架，才不会从入门到放弃 -- 简单登录页面

    上一节,我们基本了解了 Django 的一些配置,这一节,我们将通过一个简单的登录页面,进一步学习 Django 的使用. 新建项目 首先,新建一个 Django 项目,记得别弄错了哦. settin ...

  6. asp.net+mvc+easyui+sqlite 简单用户系统学习之旅（三）—— 简单登录页面+sqlite+动软代码生成器的使用

    上一节讲到利用easyui的layout.tree.tab和datagrid创建用户管理的页面,注意利用到easyui的页面一定要按顺序添加jQuery和easyUI的.js和.css样式,灵活查看e ...

  7. vue_cli下开发一个简单的模块权限系统之建立登录页面并且实现在浏览器输入地址出现内容

    新建一个Login.vue(登录页面,先把Hello.vue的内容复制过来即可) 然后我们打开router下面的index.js,第一个箭头:(引入vue路由)第二个箭头(引入我们新建的Login.v ...

  8. 这两天老是有兄弟问到Vue的登陆和注册，登陆成功留在首页，没有登录回到登录页面，现在我用最简单实用的方法实现（两分钟技就看懂）

    其实登录注册,并且登录一次保持登录的状态,是每个项目都需要实现的功能. 网上也有很多的方法,不过,不是通俗易懂,在这里说一下我自己的方法,非常简单实用核心就是用localStorage存.取数据,这样 ...

  9. Web核心之最简单最简单最简单的登录页面

    需求分析: 在登录页面提交用户名和密码 在Servlet中接收提交的参数,封装为User对象,然后调用DAO中的方法进行登录验证 在DAO中进行数据库查询操作,根据参数判断是否有对象的用户存在 在Se ...

随机推荐

  1. 《学习opencv》笔记——矩阵和图像操作——cvCrossProduct and cvCvtColor

    矩阵和图像的操作 (1)cvCrossProduct函数 其结构 void cvCrossProdust(//计算两个三维向量的叉积 const CvArr* src1, const CvArr* s ...

  2. ‘close’ was not declared in this scope

    ‘close’ was not declared in this scope ‘read’ was not declared in this scope ‘sysconf’ was not decla ...

  3. 利用JMX统计远程JAVA进程的CPU和Memory---jVM managerment API

    从JAVA 5开始,JDK提供了一些JVM检测的API,这就是有名的java.lang.management 包,包里提供了许多MXBean的接口类,可以很方便的获取到JVM的内存.GC.线程.锁.c ...

  4. C# 获取文件MD5、SHA1

    /// <summary> /// 计算文件的 MD5 值 /// </summary> /// <param name="fileName"> ...

  5. Javascript中window.opener的一点小总结

    以前一直认为window.opener只有在window.open方法打开下的窗口才可以访问,没想到即使是a链接打开的页面的照样可以访问.window.opener指向父窗口,也就是来源窗口.可以利用 ...

  6. fft分析前后频谱数据

    正弦信号输入 input 输入的原始信号 short [128] fir 滤波后的输出信号 SHORT [128] fft 傅里叶变换后的freq数据  float [128] rmroise 去除底 ...

  7. php实现aes加密类

    php实现的aes加密类,代码中有使用方法. <?php //php aes加密类 class AESMcrypt { public $iv = null; public $key = null ...

  8. Windows Phone 推送通知的第四类推送

    在 MSDN 文档有关 Windows Phone 推送通知 有关推送的内容包含 Tile.Toast.Raw 这三种通知.这三种通知 的方式类似,运用的场合不同,这里不再赘述,它们的运行原理类似: ...

  9. ngBind {{}} ngBindTemplate

    1.首先我们最常使用的一个绑定表达式的指令是ngBind,比如在一个div标签中我们可以这样使用: <div ng-bind="vm.info"></div> ...

  10. LoadRunner “add measurements”（添加度量）菜单问题

    HP LoadRunner 11版本  配置