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

本次采用的是纯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="data:images/qq.png" alt=""></a><a href=""><img src="data:images/wb.png" alt=""></a></div></div><div class="toggleDiv"><img src="data: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="data:images/2weima.png" alt=""><p>请使用手机百度app扫描登录</p></div><div class="toggleDiv"><img src="data:images/cpt.png" alt=""></div></div></body>
</html>

纯HTML+CSS静态百度登录界面制作相关推荐

php静态登录界面代码,JSP_JSP登录验证功能的实现，静态的登录界面的设计login.htm - phpStudy...
JSP登录验证功能的实现静态的登录界面的设计login.htm,代码如下: 系统登录系统登录用户名密码将登录用户输入的信息提交到login.js ...
文本框：边框变色——百度-登录界面
案例:百度-登录界面 1.元件准备 2.设置文本框变色,当焦点进入输入框时,输入框边框变为蓝色:失去焦点时,恢复灰色. 步骤手机/邮箱/用户名框 ①拖入1个矩形框,并命名为Border01 ②设置矩 ...
html简单的登录界面制作
html简单的登录界面制作话不多说,老铁们直接拿代码去用吧. <!DOCTYPE html> <html><head><meta charset=" ...
html+css 实现华为登录界面
html+css 实现华为登录界面直接放代码,是阿腾阿! html css 直接放代码,是阿腾阿! 效果图(同学们请不要完全copy) html <!DOCTYPE html> < ...
企业网站前端制作实战教程 JQuery CSS JS HTML 登录界面
盒子模型引入重置css样式reset样式 @charset "utf-8"; html, body, div, span, applet, object, iframe, h1, ...
html适合app的登陆页面,纯CSS3创意手机APP登录界面动画特效
这是一款使用纯CSS3制作的效果非常有创意的手机APP登录界面动画特效.该特效在用户点击登录按钮之后,按钮变形为一个小球图标,并且小球会上下弹跳,之后小球会落入界面底部成为一个图标按钮. 使用方法 H ...
Swing学习----------QQ登录界面制作（二）
素材获取可关注微信公众号:开源IT,后台回复 "素材" 免费获取. 上次把QQ界面的主题框架实现了,但是还没有完成最小化,关闭按钮等的功能,这次重新完善了QQ登录界面的功能,本次更 ...
网易邮箱登录界面制作方法
今天用css和html制作一个简单的登录界面,下面是代码: <div class="box"><div class="top-box"> ...
Swing学习----------QQ登录界面制作(一)
素材获取可关注微信公众号:开源IT,后台回复 "素材" 免费获取. 最近学习的课程有点紧,所以暂时放下了SSH的学习,等时间稍微松点再开始SSH博客的跟进.在这个学期的JAVA课程 ...
HTML+CSS构建移动登录界面
传统行业的商家十分重视门面的装饰,因为一个好的门面会使用户活跃度变的很高.在一个网站中,可以将用户登录视为"门面",其设计的重要性不言而喻.本项目将带领读者实现一个用户登录页面. ...

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

纯HTML+CSS静态百度登录界面制作相关推荐

最新文章

热门文章