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

不说了，直接上代码。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. table 自动换行

    <table border=" align="center" style="table-layout:fixed;word-wrap:break-word ...

  2. linux“批处理”脚本

    依次执行A B C3条语句 最简单的 写如下代码 #!/bin/sh A B C 保存为test.sh然后添加执行权限chmod +x test.sh然后执行该脚本./test.sh

  3. 关于nginx架构探究（3）

    Nginx 模块综述 Nginx 所有的代码都是以模块的新式组织的,包括核心模块和功能模块.Nginx加载模块的时候不想Apache一样动态加载,它是直接被编译到二进制执行文件中,所以,如果想要加载新 ...

  4. 转：Spine.JS+Rails重客户端Web应用技术选型思路：『风车』架构设计

    原文来自于:http://www.infoq.com/cn/articles/fengche-co-architecture 风车这个项目开始于 2011 年 11 月份,之前叫做 Pragmatic ...

  5. Oracle_OCP课程实验学习

    Linux启动oracl.查看lsnrctl状态,然后启动监听start.sqlplus / as sysdba 启动数据库.conn sys/jxsrpv as sysdba .startup Ad ...

  6. 关于Adapter

    ArrayAdapter------------>单一值 SimpleAdapter---------->HashMap<String,Object> 多值 BaseAdapt ...

  7. 【转】DELL戴尔N4050笔记本拆机（图文）

    原文网址:http://www.ywxydn.com/1047.html

  8. java 定义mysql树形菜单

    数据库中的数据如下: 1.首先在Dao中实现查找方法 public List<ProductType> findAllByRoot() { //定义集合,添加ProductType对象 L ...

  9. EF并发性能文章

    http://www.cnblogs.com/farb/p/ConcurrencyAndTransctionManagement.html

  10. 【调试技巧】FireFox作为移动端的设置

    1.在地址栏输入“about:config”,按下回车进入设置菜单. 2.找到“general.useragent.override”,如果没有这一项,则点右键“新建”->“字符串”,输入这个字 ...