自己动手去写才会有收获，宁可模仿也不要全部复制粘贴

不说了，直接上代码。CSS有注释，适合新手。
<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Login</title>

<link rel="stylesheet" href="3.css" />

</head>

<body>

    <form method="post" class="login">

        <h1 class="login-title">Winner</h1><br />

        <input type="email" name="email" class="login-input" placeholder="请输入邮箱" autofocus /> <!--文本框内信息和加载页面时自动获得焦点-->

        <input type="password" name="password" class="login-input" placeholder="请输入密码" />

        <input type="submit" value="登陆" class="login-submit" />

        <input type="checkbox" class="remember-me" name="remember-me" />记住密码<br /><br />

        <p class="login-help"><a href="javascript:void(0);">忘记密码</a>

        </p>

    </form>

</body>

</html>
HTML界面的代码，只负责对数据进行封装。未链接CSS的界面效果如下：


CSS部份自己百度的属性都加上注释了，适合新手。
@charset "utf-8";

/* CSS Document */

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video{

    margin:0px; /*外边距 上 右 下 左*/

    padding:0px; /*内边距*/

    border:0px; /*边框样式*/

    font-size:100%;

    font:inherit; /*字体继承父类*/

    vertical-align:baseline; /*设置元素的垂直对齐方式。*/

}

body{

    background-image:url(b.jpg);

    line-height:; /*设置行间的距离（行高）*/

    font:12px/20px  Verdana; /*font-size/line-height，用来规定字体尺寸和行高*/

    /*Verdana是一套无衬线字体，它在小字上有结构清晰端整、阅读辨识容易等高品质表现.*/

}

.login{

    margin:50px auto; /*上边距50px 左右下为auto, margin：1px 2px 3px 4px 这个的顺序依次为：上 右 下 左*/

    padding:18px 20px;

    width:300px;

    background:#3f65b7;

    background-clip:border-box; /*规定背景的绘制区域*/

    border:1px solid #172b4e;

    border-bottom-color:#142647; /*设置元素的下边框的颜色*/

    border-radius:5px; /*为元素添加圆角边框*/

}

.login-input{

    display: block;

    width: 93%;

     height: 37px;

    margin-bottom: 20px; /*下外边距*/

    padding: 0 9px;

    color: white;

    text-shadow: 0 1px black; /*文本框内字体阴影*/

    background:#333;

    border-radius: 4px;

}

.login-input:focus{

    outline:; /*（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用*/

    background-color: #32486d;

}

.login-submit{

    display:block; /*display用于定义建立布局时元素生成的显示框类型.block元素将显示为块级元素，此元素前后会带有换行符*/

    width: 100%;

    height:37px;

    margin-bottom:15px;

    font-size:14px;

    font-weight:bold;

    color: #294779;

    background:#adcbfa;

    border:1px solid #284473;

    border-radius:5px;

    cursor: pointer;  /*显示的光标的类型（形状）*/

}

.login-submit:active{

    background:#a4c2f3;

}

.login-help{

    text-align:center;

}

.login-help a{

    font-size:12px;

    color:#CCC;

    text-decoration:none; /*去掉超连接的下划线*/

}

.login-help a:hover{

    text-decoration:underline;

}

.login-title{

    text-align:center;

    font-size:24px;

    color:#FFF;

}

HTML写的第一个邮箱登陆界面的更多相关文章

  1. 作业：用HTML制作邮箱登陆界面

    <body leftmargin="200" rightmargin="200"> <font size="45" > ...

  2. 万事开头难，用HTML写的第一个界面，收获颇多

        很开心跟了叶老师学习和做项目,基础不好,前期他会帮你安排好学习路线和计划.前期没有项目做,叶老师先让我先学习jQuery,给我推荐了一些网站,叫我一边学习,一边写博客.其实很早就有想写博客的想 ...

  3. 用Html写一个简单的登陆界面

    <!DOCTYPE html> <html> <title>登陆页面</title> <head> <meta charset=&qu ...

  4. [终极巨坑]golang+vue开发日记【二】，登陆界面制作（一）

    写在前面 本期内容是适合第一次使用vue或者golang开发的,内容会以实战的形式来讲解.看懂本段内容需要了解基础内容有html,css,最好可以看一下vue的基础.并且这里的每个知识点不可能详细解说 ...

  5. Android 仿QQ微信开场导航以及登陆界面

    相信大家对于微信等社交应用的UI界面已经都很熟悉了,该UI最值得借鉴的莫过于第一次使用的时候一些列产品介绍的图片,可以左右滑动浏览,最后进入应 用,这一效果适用于多种项目中,相信今后开发应用一定会用得 ...

  6. Android仿QQ微信开场导航以及登陆界面

    相信大家对于微信等社交应用的UI界面已经都很熟悉了,该UI最值得借鉴的莫过于第一次使用的时候一些列产品介绍的图片,可以左右滑动浏览,最后 进入应用,这一效果适用于多种项目中,相信今后开发应用一定会用得 ...

  7. [终极巨坑]golang+vue开发日记【三】，登陆界面制作（二）

    写在前面 本期内容是承接上期已经做好了登陆界面来写的,不过本期是以golang为主,可能需要大家把最基本的语法结构熟悉一下:菜鸟教程.这样的话方便展开,自然而然的,本篇也是直接实战为主.这次需要依赖m ...

  8. 浅谈HTML之模仿人人网登陆界面（新手必学）

    为方便大家对web相关知识的了解,现谈谈新手如何从HTML css  Javascript到以后后台的发展.首先,让大家看看HTML仿人人登陆界面: <!doctype html> < ...

  9. ios swift模仿qq登陆界面，xml布局

    给大家推荐两个学习的地址: 极客学院的视频:http://www.jikexueyuan.com/path/ios/ 一个博客:http://blog.csdn.net/lizhongfu2013/a ...

随机推荐

  1. PHPCMS V9二次开发便捷自定义后台入口文件夹

    phpcms v9二次开发便捷自定义后台入口文件夹 最新发布的phpcms v9由于采用了mvc的设计模式,所以它的后台访问地址是固定的,虽然可以通过修改路由配置文件来实现修改,但每次都修改路由配置文 ...

  2. swf上传

    swfupload多文件异步上传 多文件选择异步上传的原理 传统上:多个文件逐一选.PHP开始处理,循环上 PHP+Flash上:JS调用flash控,Flash批量选取并保持选取所有文件列 swfu ...

  3. IIS下图片防盗连设置详解

    小站只有100个IIS,盗链后经常是连主页都打不开,就想着弄个图片防盗链,在网上找了一下资料,正则表达式的写法啊,ISAPI_REWRITE基本配置啊等等,找来啃了一天终于发现有三个方法实现. 第一. ...

  4. MCS51浮点计算程序

    MSC-51 3字节和4字节浮点数计算程序,主要用于数据采集及上传,经过IEEE转换,在上位机直接显示. ;这是本人使用的MSC-51 3字节和4字节浮点数计算程序,主要用于数据采集及上传,经过IEE ...

  5. FMX手机app，如何下载网站图片而不卡界面

    你用的版本? 你应该关注下delphi 更新说明第一方法: 可以用线程.第二方法: TNetHTTPClient 已经支持异步 TThread.CreateAnonymousThread( proce ...

  6. Skipped Rebuild All: Project with VS2008

    This Problem is getting me head around it in these days. BUt , i have solve it: Description of Probl ...

  7. 【HDOJ】4544 湫湫系列故事——消灭兔子

    贪心,普通贪心两层循环TLE了,然后用优先级队列维护内层. #include <iostream> #include <cstdio> #include <cstring ...

  8. 【HDOJ】1732 Push Box

    BFS.使用当前结点位置以及三个箱子的位置作为状态. #include <iostream> #include <cstdio> #include <cstring> ...

  9. 大型分布式C++框架《四：netio之请求包中转站 上》

    本来一篇文章就该搞定的.结果要分上下篇了.主要是最近颈椎很不舒服.同时还在做秒杀的需求也挺忙的. 现在不能久坐.看代码的时间变少了.然后还买了两本治疗颈椎的书.在学着,不过感觉没啥用.突然心里好害怕. ...

  10. linux 建库，编码，导入数据

    二.导入数据库1.首先建空数据库mysql>create database abc; 2.导入数据库方法一:(1)选择数据库mysql>use abc;(2)设置数据库编码mysql> ...