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

 

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

 

　　HTML部分：

 

　　<divclass="dowebok">

 

　　<divclass="logo"></div>

 

　　<divclass="form-item">

 

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

 

　　</div>

 

　　<divclass="form-item">

 

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

 

　　</div>

 

　　<divclass="form-item"><buttonid="submit">登录</button></div>

 

　　<divclass="reg-bar">

 

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

 

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

 

　　</div>

 

　　</div>

 

　　CSS部分：

 

　　

 

　　*{margin:0;padding:0;}

 

　　html{height:100%;}

 

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

 

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

 

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

 

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

 

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

 

　　.form-itembutton{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)20px14pxno-repeat;}

 

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

 

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

 

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

 

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

 

　　.reg-bara: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;}

 

　　@mediascreenand(max-width:500px){

 

　　*{box-sizing:border-box;}

 

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

 

　　.logo{margin:50pxauto;}

 

　　.form-item{width:auto;}

 

　　.form-iteminput,.form-itembutton,.reg-bar{width:100%;}

 

　　}

 

　　效果如图所示：

 

　　BBBBB.jpg

 

　　以上分享了HTML简单登录页面的代码，项目中用的比较多，可以直接拿过去使用或修改自己喜欢的样式，也希望大家多动手尝试，看看自己能不能写出其他的效果，希望这篇文章对你有所帮助！



本文转载自中文网