先来看看样子。

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. JavaWeb request对象常用操作

      JavaWeb request对象常用操作 CreateTime--2018年6月1日16点47分 Author:Marydon 一.前提 import javax.servlet.http.Ht ...

  2. iOS 全屏侧滑/UIScrollView/UISlider间滑动冲突

    代码地址如下:http://www.demodashi.com/demo/13848.html 效果预览 一.前期准备 有一个支持全屏侧滑返回的视图控制器ViewController,ViewCont ...

  3. python --特殊方法与多范式

    转自:http://www.cnblogs.com/vamei/archive/2012/11/19/2772441.html Python一切皆对象,但同时,Python还是一个多范式语言(mult ...

  4. 【python下使用OpenCV实现计算机视觉读书笔记1】输入输出

    说明: 该部分内容为<OpenCV Computer Vision with Python>读书笔记. 1.读入文件与保存. import cv2 image=cv2.imread('a. ...

  5. 网页字体生成工具fontello firefox下无效，未跨域，研究两天得出解决办法

    fontello是一个非常好的web font生成工具,但是在使用过程中发现生成的字体在firefox下死活渲染不出来,只有chrome可以正常渲染,字体文件和页面在同域下. 试过各种办法,最后发现一 ...

  6. CMD查看进程ID并查杀进程

    开始-运行,输入CMD打开命令行界面,输入命令netstat -ano 结束该进程C:\>taskkill /f /t /im Wiz.exe 根据进程ID杀 >taskkill /F / ...

  7. SQLSERVER中的timestamp 和 C#中的byte[] 转换

    项目中由于需求设计,数据库中需要一个timestamp时间戳类型的字段来作为区别数据添加和修改的标识.由于timestamp在SQL SERVER 2005数据库中,不可为空的timestamp类型在 ...

  8. mysql_use_result & mysql_store_result & MYSQLI_ASYNC

    博文一 : 在使用 mysql_query() 进行一次查询后,一般要用这两个函数之一来把结果存到一个 MYSQL_RES * 变量中. 两者的主要区别是,mysql_use_result() 的结果 ...

  9. Genral log（普通日志）与 Slow log（慢速日式）

    General log: Geleral log记录了服务器接收到的每一个查询或是命令,无论这些查询或是命令是否正确甚至是否包含语法错误,general log 都会将其记录下来 ,记录的格式为 {T ...

  10. IOS基于XMPP协议开发－－XMPPFramewok框架（一）：基础知识

    最近蘑菇街团队的TT的开源,使我对im产生了兴趣,然后在网上找到了XMPPFramework进行学习研究, 并写了以下系列教程供大家参考,有写的不对的地方,请大家多多包涵指正. 目录索引 IOS基于X ...