先来看看样子。

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. SecureCRT 常用配置

    1.SecureFx 中文乱码,应设置成utf-8编码了,依旧乱码 在 C:\Users\root\AppData\Roaming\VanDyke\Config\Sessions 下找到对应的sess ...

  2. JS应用（资料很全）

    http://www.cnblogs.com/meil/archive/2007/02/06/642559.html 如果你找的javascript的东西的话,建议你 ctrl+F  直接在这个页上找 ...

  3. js日期控件

    My97日期控件 官方网站 My97 Datepicker Home   http://www.my97.net/

  4. spring 3.0系统集成webservice

    spring 3.0系统集成webservice,踩了很多坑以后总算成功了,故写下这篇博客以记录. 1.准备jar包 由于项目是spring3.0,所以应该要使用cxf 2.7版本才可以成功配置,高版 ...

  5. dango models and database ---- relation ship

    一.django自带的ORM中可以定义表与表之间的对应关系.现比较一下各个不同关系之间数据库端的实现 1.ForeignKey(ManyToOne)关系 from django.db import m ...

  6. Refresh Tokens: When to Use Them and How They Interact with JWTs

    In this post we will explore the concept of refresh tokens as defined by OAuth2. We will learn why t ...

  7. StrongLoop

    http://loopback.io/getting-started/ 使用 StrongLoop 创建 Node.js MySQL 应用程序 StrongLoop 是 IBM 的一家子公司,Stro ...

  8. 概念了解：CGI，FastCGI，PHP-CGI与PHP-FPM 各公共网关接口介绍

    CGI CGI全称是“公共网关接口”(Common Gateway Interface),HTTP服务器与你的或其它机器上的程序进行“交谈”的一种工具,其程序须运行在网络服务器上. CGI可以用任何一 ...

  9. spring容器ApplicationContext初始化（spring应用上下文初始化）

    可以通过以下三种方式加载spring容器,实现bean的扫描与管理: 1. ClassPathXmlApplicationContext:从类路径中加载 ClassPathXmlApplication ...

  10. Android 利用fastjson进行json解析

    package com.example.FastJson.util; import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.Typ ...