先来看看样子。

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. 获得客户端详细信息以及每个进程的sql语句

    db性能下降时很多朋友都想监控到是哪个客户端.哪个用户.哪台客户端发起的什么会话sql语句, 但是微软自带的要使用profiler才能实现,但是考虑性能问题,很多人不愿意! 网上有很多脚本能监控到客户 ...

  2. 大话设计模式C++实现-第1章-简单工厂模式

    一.UML图 二.包括的角色 简单工厂模式包括三个角色: (1)工厂类Factory:工厂类是用来制造产品的. 因此,在Factory中有一个用于制造产品的Create函数或者Generate函数之类 ...

  3. sphinx和mysql like对比

    一共有3093326条企业数据,其中sphinx代码如下: <?php function microtime_float() { list($usec, $sec) = explode(&quo ...

  4. JS 对象的属性如果没有就初始化

    function fuck (inObj, path, parms) { // 一个长得像对象的字符串 var Things = path.split("."); // 即将返回的 ...

  5. Mockito 相关资料

    https://monkeyisland.pl/2008/04/26/asking-and-telling/ http://qiuguo0205.iteye.com/blog/1456528 http ...

  6. xdebug安装教程

    自动分析应该下载的文件: http://xdebug.org/wizard.php

  7. C++ 类的实例中 内存分配详解

    一个类,有成员变量:静态与非静态之分:而成员函数有三种:静态的.非静态的.虚的. 那么这些个东西在内存中到底是如何分配的呢? 以一个例子来说明: #include"iostream.h&qu ...

  8. 点滴积累【JS】---JS实现仿百度模糊搜索效果

    效果: HTML代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="In ...

  9. //%f表示以十进制格式化输出浮点数 %.2f

    //%f表示以十进制格式化输出浮点数 String s1 ="评分: %.1f"; String s2 = String.format(s1, 8.0); System.out.p ...

  10. jquery操作复选框(checkbox)十二技巧

    jquery操作复选框(checkbox)的12个小技巧. 1.获取单个checkbox选中项(三种写法)$("input:checkbox:checked").val()或者$( ...