用HTML前端技术做一个登入了界面＋一些小技巧

于 2017-12-11 21:43:27 发布
阅读量1.1w 收藏 25
点赞数 5
分类专栏： 网页前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40722661/article/details/78777109
版权

效果图先上：


所以进入整体：

该登入界面只涉及HTML和CSS，暂时不涉及javascript；

首先就是壁纸，要想壁纸不重复，而且大小平铺我们可以创建一个div，使div的背景图为整个页面的壁纸：

[html] view plain copy
  1. <body>  
  2.     <div id="wapper"></div>  
  3. </body>  
[css] view plain copy
  1. #wallpaper  
  2. {  
  3.     height:100%;  
  4.     width:100%;  
  5.     position:absolute;  
  6.     top:0px;  
  7.     left:0px;  
  8.     z-index:0;  
  9.     background:url("../pic/login_bg.jpg");  
  10.     background-size:cover;  
  11.     min-width:1000px;  
  12.     min-height:550px;  
  13. }  

编写这样的代码能够使我们的背景图片根据浏览器的大小来自动改变图片大小；


关于登入界面的话就主要分为两个部分：

Ｈｅａｄｅｒ和Ｃｏｎｔｅｎｔ；

ｈｅａｄｅｒ的制作比较简单就直接上代码了吧：

[html] view plain copy
  1. <div id="board_head">  
  2.     <img src="./pic/user.png" height="40px" width="40px">  
  3. </div>  
[css] view plain copy
  1. #login_board #board_head  
  2. {  
  3.     width:400px;  
  4.     height:40px;  
  5.     text-align:left;  
  6.     background:rgba(255,255,255,0.2);  
  7.     border-top-left-radius:14px;  
  8.     border-top-right-radius:14px;  
  9. }  


注意:　text-align:left;的作用就是要让图片靠向左边；


然后就是界面主体：

[html] view plain copy
  1. <div id="board_body">  
  2.     <div id="body_img">  
  3.         <img style="border-radius:50px;" src="./pic/myicon.gif" height="100px" width="100px">  
  4.     </div>  
  5.     <div id="input_board">  
  6.         <div id="input_icon"></div>  
  7.         <input id="password_input" type="password">  
  8.         <button id="check_button" onclick="check();"> </button>  
  9.     </div>  
  10. </div>  

接下来我们逐一来分析解释：

[css] view plain copy
  1. #board_body #body_img  
  2. {  
  3.     width:100px;  
  4.     height:100px;  
  5.     margin:30px auto;  
  6.     box-shadow: 0px 0px 15px -3px #fff;  
  7.     border-radius: 50px;  
  8. }  


这是用户头像的框架：主要是margin:auto;表示居中；圆角特效：border-radius:50px;圆角像素越大那么就可以是元素变成一个圆；阴影特效：box-shadow:0px 0px 15px -3px #fff;参数有点多．


接下就是输入框和点击按钮，输入框的左侧放置了一张图片，这张图片嵌套在一个div之中，为了保证该div与输入框能够完美的契合，所以我们需要把输入框input的一些默认的样式给清楚:

[css] view plain copy
  1. border: none;  
  2. padding:0px;  


当然如果你需要在输入的时候边框是会有颜色的话可是使用onblur事件；


[css] view plain copy
  1. #board_body #input_board   
  2. {  
  3.     text-align:center;  
  4.     margin: auto;  
  5.     width:330px;  
  6.     height:30px;  
  7.     padding-left: 30px;  
  8. }  
  9.   
  10. #input_board #input_icon  
  11. {  
  12.     height:100%;  
  13.     width:20px;  
  14.     background-color:rgba(255,255,255,0.2);  
  15.     background-image:url("../pic/input.png");  
  16.     background-size:90%;  
  17.     background-repeat:no-repeat;  
  18.     background-position:center;  
  19.     border-top-left-radius: 5px;  
  20.     border-bottom-left-radius: 5px;  
  21.     float: left;  
  22. }  
  23.   
  24. #input_board #password_input  
  25. {  
  26.     height:100%;  
  27.     width:250px;  
  28.     padding:0px;  
  29.     background:rgba(255,255,255,0.2);  
  30.     border: none;  
  31.     font-size: 18px;  
  32.     border-top-right-radius: 5px;  
  33.     border-bottom-right-radius: 5px;  
  34.     float: left;  
  35. }  
  36.   
  37. #input_board #check_button  
  38. {  
  39.     height:30px;  
  40.     width:30px;  
  41.     background:url("../pic/enter.png");  
  42.     background-color:rgba(255,255,255,0.2);  
  43.     background-size:cover;  
  44.     border: none;  
  45.     border-radius: 30px;  
  46.     float: left;  
  47.     cursor:pointer;  
  48.     margin-left:20px;  
  49. }  
  50. #input_board #check_button:hover{  
  51.     background-color:rgba(255,255,255,0.7);  
  52. }  

在check_button中有一个hover使鼠标在元素上方显示不同的样式；

总体就是这样．
我有颗小粒的痣
关注
  • 5
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值