Html制作简单而漂亮的登录页面
先来看看样子。
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制作简单而漂亮的登录页面的更多相关文章
- HTML5实战教程———开发一个简单漂亮的登录页面
最近看过几个基于HTML5开发的移动应用,比如臭名昭著的12036移动客户端就是主要使用HTML5来实现的,虽然还是有点反应迟钝,但已经比较流畅了,相信随着智能手机的配置越来越高性能越来越好,会越来越 ...
- JavaWeb 学习003-简单登录页面功能实现
先说下题外话:学习不是看你学了多久,重点是学到多少: 这就要求 效率.我在这三个小时,但是有效率的又有多久?只是做了这么一点简单的事. 登录页面 跟数据库交互,进行判断是否登陆成功.我只是实现了一 ...
- HTML5和CSS3登录页面制作实录
本文详细介绍使用HTML5 和CSS3 制作一个登录页面的完整过程. View demo login.html <form id="login"> <h1> ...
- java web: eclipse & maven & jetty & struts2 & mysql = 简单登录页面
第一次接触java web开发,花费了一天半的时间,写了个简单的登录页面,以此文为记. 开发工具 Eclipse Luna Release (4.4.0) 已集成maven,maven目前的体会就是管 ...
- 一步一步理解 python web 框架，才不会从入门到放弃 -- 简单登录页面
上一节,我们基本了解了 Django 的一些配置,这一节,我们将通过一个简单的登录页面,进一步学习 Django 的使用. 新建项目 首先,新建一个 Django 项目,记得别弄错了哦. settin ...
- asp.net+mvc+easyui+sqlite 简单用户系统学习之旅（三）—— 简单登录页面+sqlite+动软代码生成器的使用
上一节讲到利用easyui的layout.tree.tab和datagrid创建用户管理的页面,注意利用到easyui的页面一定要按顺序添加jQuery和easyUI的.js和.css样式,灵活查看e ...
- vue_cli下开发一个简单的模块权限系统之建立登录页面并且实现在浏览器输入地址出现内容
新建一个Login.vue(登录页面,先把Hello.vue的内容复制过来即可) 然后我们打开router下面的index.js,第一个箭头:(引入vue路由)第二个箭头(引入我们新建的Login.v ...
- 这两天老是有兄弟问到Vue的登陆和注册，登陆成功留在首页，没有登录回到登录页面，现在我用最简单实用的方法实现（两分钟技就看懂）
其实登录注册,并且登录一次保持登录的状态,是每个项目都需要实现的功能. 网上也有很多的方法,不过,不是通俗易懂,在这里说一下我自己的方法,非常简单实用核心就是用localStorage存.取数据,这样 ...
- Web核心之最简单最简单最简单的登录页面
需求分析: 在登录页面提交用户名和密码 在Servlet中接收提交的参数,封装为User对象,然后调用DAO中的方法进行登录验证 在DAO中进行数据库查询操作,根据参数判断是否有对象的用户存在 在Se ...
随机推荐
- HDU 5361 In Touch （2015 多校6 1009 最短路 + 区间更新）
题目:http://acm.hdu.edu.cn/showproblem.php?pid=5361 题意:最短路.求源点到全部点的最短距离.但与普通最短路不同的是,给出的边是某点到区间[l,r]内随意 ...
- js经常使用功能代码
js经常使用功能代码(持续更新): 1---折叠与展开 <input id="btnDisplay" type="button" class=" ...
- 使用overflow:hidden处理元素溢出和坍塌
溢出 css溢出示意如图,子元素(背景为粉色)的长度或宽度超出父元素(背景为绿色). 通过为父元素赋 overflow:hidden 样式可将子元素超出父元素的部分隐藏起来. 也可为父元素赋 over ...
- 开发基于CXF的 RESTful WebService web 项目 webservice发布
配置步骤 开发基于CXF的 RESTful WebService 1.创建Web项目并导入CXF的jar 2.在Web.xml中配置 CXFServlet <servlet> <se ...
- Linux命令-帮助命令:man
man ls 查看ls命令的帮助信息(输出结果和less命令一样,需要空格,回车,,上箭头,下箭头,PgUp,PgDn,q等方式浏览) 注意:由于这个文件信息量比较大,需要查找某一个字符,输入/,输入 ...
- Linux命令-文件处理命令:cat
cat /etc/issue 查看etc目录下面的issue文件内容(issue是linxu系统的欢迎文件) cat -n /etc/issue 查看文件内容的时候显示行号 tac /etc/issu ...
- EMQ配置
参考官方配置页面:http://emqtt.com/docs/v2/tune.html Linux 操作系统参数系统所有进程可打开的文件数量官方配置: sysctl -w fs.file-max=20 ...
- dll中使用exe中的变量
注意:输出目录为:Result共享目录 1.exe项目: // EXE.cpp : 定义控制台应用程序的入口点.// #include "stdafx.h" extern" ...
- 转 Android开发学习笔记：浅谈WebView
原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://liangruijun.blog.51cto.com/3061169/647456 ...
- HDU 3746 数据结构之KMP
pid=3746">点击打开链接 题意:给T组数据,每组一个字符串,问最少加入多少个字符能够使这个串变成一个子串连续出现的串 思路:利用KMP的next数组进行变换,next数组保存的 ...