纯HTML+CSS静态百度登录界面制作

来源：互联网发布：三角洲部队百度软件编辑：程序博客网时间：2024/06/05 00:09

本次采用的是纯HTML+CSS制作出的静态显示效果,时间匆匆,做的比较简单,真正的登录框是通过点击右下角的二维码和电脑小标图可以进行二者得切换,HTML+CSS+JS版本的登录框下次再发给大家......

运行结果

<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>百度登录框</title><style type="text/css">*{margin: 0;padding: 0;}body{font-size: 12px;}a{text-decoration: none;color: #2647CB;}a:hover{text-decoration: underline;color: red;}.wrap{width: 390px;height: 450px;margin: 50px auto;border: 1px solid #8A8989;position: relative;}.main{width: 350px;height: 400px;margin: 0 auto;}.header{width: 100%;height: 50px;line-height: 50px;background-image: url(images/foot.png);background-color: rgb(247,247,247);background-repeat: no-repeat;}.header h3{display: inline-block;line-height: 50px;margin-left: 50px;}.header span{display: inline-block;float: right;margin: auto 15px;font-size: 30px;}.inputDiv{display: block;width: 350px;height: 40px;margin: 10px auto;}.phoneIn{display: inline-block;float: right;font-size: 14px;background-image: url(images/phone.png);background-repeat: no-repeat;margin: 30px 0px 10px 0px;}.smBtn{background: #2066C5;color: white;font-size: 18px;font-weight: bold;height: 50px;border-radius: 4px;}.smBtn:hover{background: #4067EE;}.pull-right{display: inline-block;float: right;}.other{width: 350px;padding-top: 50px;margin: 0 auto;}.toggleDiv{position: absolute;right: 0;bottom: 0;z-index: 1000;}.weima{text-align: center;padding-top: 50px;width: 390px;height: 400px;}.weima p {line-height: 50px;}</style></head><body><!-- 账号密码登录 --><div class="wrap"><div class="header"><h3>登录百度账号</h3><span>X</span></div><div class="main"><a href="" class="phoneIn">短信快捷登录</a><form action=""><input type="text" class="inputDiv"><input type="password" class="inputDiv"><p class="inputDiv"><input type="checkbox" value="checked" checked="checked"><label for="">下次自动登录</label><a href="" class="pull-right" >登录遇到问题</a></p><input type="submit" value="登录"  class="inputDiv smBtn"><a href="" class="pull-right" >立即注册</a></form><div class="other"><p>可以使用以下方式登录</p><a href=""><img src="images/qq.png" alt=""></a><a href=""><img src="images/wb.png" alt=""></a></div></div><div class="toggleDiv"><img src="images/small2wm.png" alt=""></div></div><!-- 二维码登录 --><div class="wrap"><div class="header"><h3>登录百度账号</h3><span>X</span></div><div class="weima"><p>手机扫描,安全登录</p><img src="images/2weima.png" alt=""><p>请使用手机百度app扫描登录</p></div><div class="toggleDiv"><img src="images/cpt.png" alt=""></div></div></body></html>

1 0