您的位置: 首页  >  文章  >  用HTML前端技术做一个登入了界面＋一些小技巧

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

分类: 文章 • 2025-01-06 14:58:58

效果图先上：

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


所以进入整体：

该登入界面只涉及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使鼠标在元素上方显示不同的样式；

总体就是这样．

相关推荐