HTML写的第一个邮箱登陆界面

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



不说了,直接上代码。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:1; /*设置行间的距离(行高)*/
    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: 0; /*(轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用*/
    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;

}

时间: 2024-10-11 11:58:48

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

js跳转输入邮箱登陆界面

<script> var hash = { // 邮箱域名对应的邮箱登录地址 'qq.com' : 'http://mail.qq.com', 'gmail.com' : 'http://mail.google.com', 'sina.com' : 'http://mail.sina.com.cn', 'sina.cn' : 'http://mail.sina.com.cn', '163.com' : 'http://mail.163.com', '126.com' : 'http://mai

邮箱登陆界面占位符(placeholder)jQuery法

大家都知道邮箱登陆的时候默认状态下会有文字提醒,当鼠标聚焦到邮箱文本框时,内容文字被会被清空. html5下有占位符(placeholder)属性,但是兼容不是特别好~下面是jQuery的方法 css代码: <input type="text" id="address" value="请输入邮箱地址" /><input type="text" id="password" value=&qu

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

<!DOCTYPE html> <html> <title>登陆页面</title> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <form name = logon method = post> <table> <tr>

[终极巨坑]golang+vue开发日记【二】,登陆界面制作(一)

写在前面 本期内容是适合第一次使用vue或者golang开发的,内容会以实战的形式来讲解.看懂本段内容需要了解基础内容有html,css,最好可以看一下vue的基础.并且这里的每个知识点不可能详细解说,只会告诉你大概做什么的,入门切记要不求甚解,不然学到自闭 远征的第一步,启动一个vue项目 我们这次主要是写一个以vue为前端框架的登陆和注册,因此我们的第一步也就是创建一个vue项目,并且这个内容在上一节已经讲过了,不过这里我们可以再操作一番. vue create your_projectna

dede后台登陆又返回登陆界面怎么办

dede后台登陆又返回登陆界面......网上说的DATA等文件夹都有写入权限,试过好几种方法都不行! 其实最有可能的原因就是data文件夹的权限问题.大家可以通过FTP看下data文件的权限是否是775,也就是全部都有可读可写可执行的权限.记得把data文件的权限和sessions文件夹的权限改成777,用8Uftp软件进去以后,右键更改文件属性就可以了! 修改完这些以后记得用火狐或者遨游浏览器再登录下看看,360和IE记得要清空浏览器的缓存.第一步才是最重要的. .如果上面两步还不行的话就清

C# 使用ini格式存储值(比如:登陆界面的用户名和登录号)

这是第一篇博文,以后在平时的开发中通过自己找资料研究出来的东西都定期做个归纳整理出来分享给大家,也便于我自己以后再看看~~~ ps:当然,感觉自己还是个小菜~对于大神来说可能内容比较简单,莫见笑~很多东西也都是网上找来规整出来的,如果对你能有一点点帮助,将是我莫大的荣幸 首先,如果做了一个登陆界面,其中要求输入“用户名”[UserName],密码,才能登陆,为了免于每次打开系统都要输入用户名,所以,我们现在就要实现一个文件存储功能, 文件将以“.ini”格式存储: 写入文件: 1 [DllImp

div+css登陆界面案例2

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body{ margin: 0px; padding:0px; font-size:12px; background-color: #1873a

LinearLayout实现一个简易的登陆界面

今天通过学习六大布局中第一种布局方式:LinearLayout ,就拿来去做一个简易的登陆界面 存在的问题: LinearLayout中实现水平方向上的两个View一个居左,一个居右的效果,感觉这个才是学以致用 界面如下: 解决上面所存在问题的方案:通过巧妙地使用 android:layout_weight 达到所想要的效果 1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns

phpcmsV9后台登陆界面去掉验证码

第一步 找到文件phpcms\modules\admin\index.php注释掉第33行到第36行 $code = isset($_POST['code']) && trim($_POST['code']) ?trim($_POST['code']) : showmessage(L('input_code'), HTTP_REFERER); if ($_SESSION['code'] != strtolower($code)) { showmessage(L('code_error'),