如何制作一个简单的HTML登录页面(附代码)


本文摘自PHP中文网,作者yulia,侵删。

几乎每个网站都会有登录页面,那你知道如何写HTML登录页面吗?这篇文章就和大家分享一个HTML简单登录界面的代码,有一定的参考价值,感兴趣的朋友可以看看。

制作登录页面需要用到很多CSS属性和HTML标签,如有不清楚的同学可以看看我以前的文章,之前都有介绍过,或者访问CSS视频教程, HTML视频教程,这些都是基础,一定要掌握。

实例:制作一个HTML登录页面,包含邮箱,登录密码,立即注册,忘记密码等,代码如下:

HTML部分:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<div class="dowebok">

         <div class="logo"></div>

         <div class="form-item">

             <input id="username" type="text" autocomplete="off" placeholder="邮箱">

         </div>

         <div class="form-item">

             <input id="password" type="password" autocomplete="off" placeholder="登录密码">

         </div>

         <div class="form-item"><button id="submit">登 录</button></div>

         <div class="reg-bar">

             <a class="reg" href="javascript:">立即注册</a>

             <a class="forget" href="javascript:">忘记密码</a>

         </div>

     </div>

CSS部分:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

* { margin: 0; padding: 0; }

         html { height: 100%; }

         body { height: 100%; background: #fff url(img/backgroud.png) 50% 50% no-repeat; background-size: cover;}

         .dowebok { position: absolute; left: 50%; top: 50%; width: 430px; height: 550px; margin: -300px 0 0 -215px; border: 1px solid #fff; border-radius: 20px; overflow: hidden;}

         .logo { width: 104px; height: 104px; margin: 50px auto 80px; background: url(img/login.png) 0 0 no-repeat; }

         .form-item { position: relative; width: 360px; margin: 0 auto; padding-bottom: 30px;}

         .form-item input { width: 288px; height: 48px; padding-left: 70px; border: 1px solid #fff; border-radius: 25px; font-size: 18px; color: #fff; background-color: transparent; outline: none;}

         .form-item button { width: 360px; height: 50px; border: 0; border-radius: 25px; font-size: 18px; color: #1f6f4a; outline: none; cursor: pointer; background-color: #fff; }

         #username { background: url(img/emil.png) 20px 14px no-repeat; }

         #password { background: url(img/password.png) 23px 11px no-repeat; }

         .tip { display: none; position: absolute; left: 20px; top: 52px; font-size: 14px; color: #f50; }

         .reg-bar { width: 360px; margin: 20px auto 0; font-size: 14px; overflow: hidden;}

         .reg-bar a { color: #fff; text-decoration: none; }

         .reg-bar a:hover { text-decoration: underline; }

         .reg-bar .reg { float: left; }

         .reg-bar .forget { float: right; }

         .dowebok ::-webkit-input-placeholder { font-size: 18px; line-height: 1.4; color: #fff;}

         .dowebok :-moz-placeholder { font-size: 18px; line-height: 1.4; color: #fff;}

         .dowebok ::-moz-placeholder { font-size: 18px; line-height: 1.4; color: #fff;}

         .dowebok :-ms-input-placeholder { font-size: 18px; line-height: 1.4; color: #fff;}

  

         @media screen and (max-width: 500px) {

             * { box-sizing: border-box; }

             .dowebok { position: static; width: auto; height: auto; margin: 0 30px; border: 0; border-radius: 0; }

             .logo { margin: 50px auto; }

             .form-item { width: auto; }

             .form-item input, .form-item button, .reg-bar { width: 100%; }

         }

效果如图所示:

阅读剩余部分

相关阅读 >>

不知道Html5 hidden属性怎么用?那就看看表单hidden属性的用法

Html翻转效果怎么实现

Html中sup标签上标字符和sub标签下标字符的使用方法介绍

学习中值得了解Html网页的基本结构(总结)

Html表格中的th表头内容怎么居中?th表头标签align属性的具体介绍

关于Html5中的section标签与div标签的区别(内有实例)

关于Html和css绘制三角形图标的方法

Html怎样对图片实现checkbox方法

关于Html的简介

Html元素的显示优先级是什么

更多相关阅读请进入《Html》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...