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

来源：互联网发布：上海淘宝模特招聘编辑：程序博客网时间：2024/04/27 18:06

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

登陆界面

不说了，直接上代码。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;}

0 0