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

不说了，直接上代码。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. bat命令中的变量声明及使用

    在bat文件中声明变量的方式如下: set xxx_variant_name=yyyyyyyyyyyy move D:\abc\efg\test.txt %xxx_variant_name%\test ...

  2. php异步调用方法实现示例

    php 异步调用方法   客户端与服务器端是通过HTTP协议进行连接通讯,客户端发起请求,服务器端接收到请求后执行处理,并返回处理结果.   有时服务器需要执行很耗时的操作,这个操作的结果并不需要返回 ...

  3. android 安卓 微信布局 [1]

    微信布局 直接上代码吧 ---------------------------------------- 头部 -------------------------------------------- ...

  4. 网络请求时 返回 App Transport Security has blocked a cleartext HTTP

    如上图,是因为 Xcode7 没有对 plist 进行 http 请求的配置  所致 这时需要  加上上面的plist的红框中 的内容  并且 设置 为 yes  如下图

  5. 07 - 删除vtkDataObject中的SetExtentTranslator 和 GetExtentTranslator方法 VTK 6.0 迁移

    VTK6 引入了许多不兼容的变.其中之一是删除vtkDataObject中所有有关管道的方法.其中的两个方法就是SetExtentTranslator() 和 GetExtentTranslator( ...

  6. git操作的各种命令整理

    1.常用的Git命令   命令 简要说明 git add 添加至暂存区 git add–interactive 交互式添加 git apply 应用补丁 git am 应用邮件格式补丁 git ann ...

  7. SSD、高级格式化硬盘，4K，分区，对齐，Ghost能不能用的解释用SSD的都可以看看

    或者以上,建议选择2048,这是Win7分区使用的值,实际对齐大小就为1024K.  4.如何知道是否对齐?  使用工具AS SSD Benchmark(HDTune Pro 4.6目前测的禁绝)   ...

  8. 来一个可能防止恶意采集和爬虫的SH

    没办法,公司的要求,还有,一些山寨爬虫完全不够我们运维人员的感觉, 一天爬虫搞个三四十万的LOG,那我只好干了.. 人家GOOGLE,BAIDU,一天大约也就五六千吧.. 有一个小的SSH技巧,是判断 ...

  9. 自定义事件实现不同窗体间的通讯Delphi篇

    要实现子窗体与父窗体之间的通讯,有多种方法(比如:重载子窗体的构造函数,将父窗体的引用作为参数传递给子窗体).下面我要介绍的是利用自定义事件的方法,它能够最大程度的避免模块之间的耦合,充分体现面向对象 ...

  10. 创建git repo

    http://git-scm.com/book/en/Git-Basics-Getting-a-Git-Repository Getting a Git Repository You can get ...