清爽简洁的用户登录页模板

2024-09-05 12:18:39

字体：大中小

来源：转载

供稿：网友

一个纯HTML代码实现的用户登录页，没有使用任何的JS和images，整体简洁到极致，呈现线条之美，网页加载速度一流，对美工要求不高，但崇尚速度的Fans们，这应该是个不错的选择，页面中的CSS代码是可以继续精简的，再此时间关系就把这项工作留给想用的朋友们。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"><HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>简洁用户登录页</TITLE><META content=text/html;charset=gb2312 http-equiv=Content-Type><STYLE type=text/css>BODY {TEXT-ALIGN: center; PADDING-BOTTOM: 100px; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND: #fff; COLOR: #666666; FONT-SIZE: 12px; PADDING-TOP: 100px}* {PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px}A {COLOR: #1e7ace; TEXT-DECORATION: none}A:hover {COLOR: #000; TEXT-DECORATION: underline}H3 {FONT-SIZE: 14px; FONT-WEIGHT: bold}PRE {MARGIN: 4px; COLOR: #1e7ace}P {MARGIN: 4px; COLOR: #1e7ace}INPUT {PADDING-BOTTOM: 1px; MARGIN: 2px; PADDING-LEFT: 1px; PADDING-RIGHT: 1px; FONT-SIZE: 11px; PADDING-TOP: 1px}SELECT {PADDING-BOTTOM: 1px; MARGIN: 2px; PADDING-LEFT: 1px; PADDING-RIGHT: 1px; FONT-SIZE: 11px; PADDING-TOP: 1px}TEXTAREA {PADDING-BOTTOM: 1px; MARGIN: 2px; PADDING-LEFT: 1px; PADDING-RIGHT: 1px; FONT-SIZE: 11px; PADDING-TOP: 1px}.inpa {WIDTH: 100px}.buttom {BORDER-BOTTOM: #1e7ace 1px solid; BORDER-LEFT: #1e7ace 1px solid; PADDING-BOTTOM: 1px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; BACKGROUND: #d0f0ff; FONT-SIZE: 12px; BORDER-TOP: #1e7ace 1px solid; BORDER-RIGHT: #1e7ace 1px solid; PADDING-TOP: 1px}#formwrapper {BORDER-BOTTOM: #1e7ace 1px solid; TEXT-ALIGN: left; BORDER-LEFT: #1e7ace 1px solid; PADDING-BOTTOM: 20px; MARGIN: 15px auto; PADDING-LEFT: 20px; WIDTH: 450px; PADDING-RIGHT: 20px; BORDER-TOP: #1e7ace 1px solid; BORDER-RIGHT: #1e7ace 1px solid; PADDING-TOP: 20px}FIELDSET {BORDER-BOTTOM: #1e7ace 1px solid; BORDER-LEFT: #1e7ace 1px solid; PADDING-BOTTOM: 10px; MARGIN-TOP: 5px; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; BACKGROUND: #fff; BORDER-TOP: #1e7ace 1px solid; BORDER-RIGHT: #1e7ace 1px solid; PADDING-TOP: 10px}FIELDSET LEGEND {BORDER-BOTTOM: #1e7ace 1px solid; BORDER-LEFT: #1e7ace 1px solid; PADDING-BOTTOM: 3px; PADDING-LEFT: 20px; PADDING-RIGHT: 20px; BACKGROUND: #fff; COLOR: #1e7ace; BORDER-TOP: #1e7ace 1px solid; FONT-WEIGHT: bold; BORDER-RIGHT: #1e7ace 1px solid; PADDING-TOP: 3px}FIELDSET LABEL {TEXT-ALIGN: right; PADDING-BOTTOM: 4px; MARGIN: 1px; PADDING-LEFT: 4px; WIDTH: 120px; PADDING-RIGHT: 4px; FLOAT: left; PADDING-TOP: 4px}FIELDSET DIV {	MARGIN-BOTTOM: 2px; CLEAR: left}.enter {	TEXT-ALIGN: center}.clear {	CLEAR: both}</STYLE></HEAD><BODY><DIV id=formwrapper><FORM method=post name=form2 action=?lo=lo><FIELDSET><LEGEND>用户登录</LEGEND><BR><DIV><LABEL for=Name>用户</LABEL> <INPUT id=name class=inpa maxLength=32 type=text name=name> <BR></DIV><DIV><LABEL for=password>密码</LABEL> <INPUT id=pss class=inpa maxLength=32 type=password name=pss> <BR></DIV><DIV class=cookiechk><LABEL></LABEL><INPUT class=buttom value=登录 type=submit name=Submit4> 　忘记密码？</DIV></FIELDSET> </FORM><DIV></DIV></DIV></BODY></HTML>

上一篇：一个窗口特效，窗口打开关闭的脚本

下一篇：Js实现两个滑块的区间拖动