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

不说了，直接上代码。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. [Laravel 5 教程学习笔记] 一、Windows下安装Laravel 5

    最近看到一些统计,说是Laravel是目前PHP框架中使用最多的,所以就想来学习下.之前其实也想过学习这个框架,但是每次到第一步安装的时候就卡住了,无奈  .之前用ThinkPHP的时候,下载完放到网 ...

  2. wordpress后台打开缓慢的临时解决方法

    解决方法是添加下面的主题在目前的代码在functions.php: //禁用Open Sans class Disable_Google_Fonts { public function __const ...

  3. 游戏算法中lua脚本详解

    此外,函数本身也是一个变量,比如: dp@dp:~ % cat test.lua local mylen={} mylen.len3=function (x,y,z) return math.sqrt ...

  4. vsftpd 访问 权限控制

    vsftpd 重启命令 service vsftpd  start|restart|stop vsftpd 关于权限控制,有两个文件分别设置,都会起作用 /etc/vsftpd/user_list / ...

  5. ie浏览器下HTML上传控件input=file的美化

    近期写东西用到了input=file这个按钮,给其添加背景,在其它浏览器上都可以正常的显示,可一到ie上便不听话了,完全没有添加上,显的很难看.今天在网上找到一方法,试过后感觉很好,终于把这个问题给解 ...

  6. 剑指offer之关于整数的处理

    首先是整数次方的处理 在这处理的时候有几个细节主义处理 1.当指数是负数的时候 2.当指数式0的时候 3.当不满足条件的时候要抛出异常 再一个就是常用的将一个树化为二进制的形式,或者是求整数的幂或者矩 ...

  7. hdu 4544 湫湫系列故事——消灭兔子

    http://acm.hdu.edu.cn/showproblem.php?pid=4544 优先队列+贪心. #include <cstdio> #include <queue&g ...

  8. Stack的三种含义（数据超过栈的大小，就发生stack overflow）

    非常典型的基础知识,转自http://www.ruanyifeng.com/blog/2013/11/stack.html 学习编程的时候,经常会看到stack这个词,它的中文名字叫做"栈& ...

  9. B450配置

    电脑型号 联想 B450 笔记本电脑  (扫描时间:2015?5?7?操作系统 Windows 7 旗舰版 32位 SP1 ( DirectX 11 ) 处理器 英特尔 酷睿2 双核 T9800 @ ...

  10. delphi7调用java写的webservice，在调用的时候弹出“wssecurityhandler:request does not contain required security header”

    delphi7调用java编写的webservice问题我用delphi7调用java写的webservice,在调用的时候弹出“wssecurityhandler:request does not ...