先来看看样子。

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. 动画曲线demo

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  3. C# 实体集合和实体转换成相应的string、XDocument、XElement、XDocument

    https://msdn.microsoft.com/zh-cn/library/system.xml.linq.xelement(v=vs.110).aspx XElement.Parse 方法 ( ...

  4. 如何用C#做一个悬浮窗口程序

    用C#做一个像FlashGet的悬浮窗口,其实很简单,不像以前需要调用很多系统API.大致的步骤如下. 首先是主窗体部分,即要判断窗体的状态来决定是否显示悬浮窗口. 局部成员声明: private F ...

  5. GraphicsMagick 学习笔记

    两种最常用的图片处理工具:GraphicsMagick 或 ImageMagick,GM是IM的分支,这两个图片处理工具功能基本相同,各有特色.但他们并不是nodejs的插件,它们都是客户端软件,li ...

  6. FTPHelper-封装FTP的相关操作

    using System; using System.IO; using System.Net; using System.Text; namespace Whir.Software.DataSync ...

  7. 11个常用的Linux命令

    Linux命令行吸引了大多数Linux爱好者.一个正常的Linux用户一般掌握大约50-60个命令来处理每日的任务.今天为你解释下面几个命令:sudo.python.mtr.Ctrl+x+e.nl.s ...

  8. SMBUS的介绍与访问

    博文是为了总结自己在bios学习上面的点点滴滴,并且加深印象,由于本人水平有限,难免存在不足之处,望指正,同时感谢CSDN提供的平台.本文主要介绍的是SMBUS. 1  SMBUS的简介 特点: SM ...

  9. [Objective C］super dealloc 调用时机

    转自:http://dcm19872007.blog.163.com/blog/static/86519374201311953739818/ objective-c 语言中最头疼的事就是内存释放,申 ...

  10. 用React Native编写跨平台APP

    用React Native编写跨平台APP React Native 是一个编写iOS与Android平台实时.原生组件渲染的应用程序的框架.它基于React,Facebook的JavaScript的 ...