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

不说了，直接上代码。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. 淘宝接口实现ip归属地查询

    <?php header('content-type:text/html;charset=utf-8'); /*获取当前ip归属地 调用淘宝接口 */ function get_ip_place ...

  2. python 装饰器简介

    24.装饰器     1.@ + 函数名:#1自动执行outer函数并且将下面的函数名f1当做参数传递                   #2将outer函数的返回值,重新赋值给f1. def ou ...

  3. iOS开发工具——统计Crash的工具Crashlytics－备用

    简介 Crashlytic 成立于2011年,是专门为移动应用开者发提供的保存和分析应用崩溃信息的工具.Crashlytics的使用者包括:支付工具Paypal, 点评应用Yelp, 照片分享应用Pa ...

  4. 转：窗口启用/禁用功能函数EnableWindow的使用

    在非MFC环境中如何使控件或者窗口禁用呢?起初是想通过发送消息来实现,但找来找去都木有找到控件禁用的消息(也是是博主木有找到的缘故),所以只能另辟蹊径,使用 EnableWindow这个函数, 该函数 ...

  5. ural 1207 Median on the Plane

    极角排序 #include <cstdio> #include <cstring> #include <algorithm> #include <cmath& ...

  6. (转)linux中常用的头文件

    头文件主目录include 头文件目录中总共有32个.h头文件.其中主目录下有13个,asm子目录中有4个,linux子目录中有10个,sys子目录中有5个.这些头文件各自的功能如下,具体的作用和所包 ...

  7. 【转】Java中 List的遍历

    原文网址:http://blog.csdn.net/player26/article/details/3955906 import java.util.ArrayList; import java.u ...

  8. ie11 selenium 报错org.openqa.selenium.NoSuchWindowException: Unable to get browser 处理方法

    selenium + ie11运行报错 org.openqa.selenium.NoSuchWindowException: Unable to get browser (WARNING: The s ...

  9. yii 笔记

    Yii1.1: $_GET 可以表示为 Yii::app()->request->getQuery() $_POST 可以表示为 Yii::app()->request->po ...

  10. 使用带Arduino IDE & WIZ820io的ATmega1284P

    使用带Arduino IDE & WIZ820io的ATmega1284P 2013/07/04 | Filed under:   IO模块 and tagged with:   arduin ...