使用HTML5搭建京东登录界面（一）
先来看一下最终的效果：
HTML部分的代码如下：
<body>
<header>
<div class="header-content">
<a href="index.html" class="logo"></a>
<span>欢迎登录</span>
<div class="login"><i></i><a href="#">登录页面，调查问卷</a> </div>
</div>
</header>
<main>
<section>
<div class="login-content">
<div class="login-content-top">
<a href="#">扫描登录</a>
<a href="#">账户登录</a>
</div>
<div class="login-content-notice">
<i></i>
<span>公共场所不建议自动登录，以防账号丢失</span>
</div>
<form action="">
<div class="form-item">
<label for="userlog" ></label>
<input type="text" id="userlog" placeholder="邮箱/用户名/已验证手机">
</div>
<div class="form-item">
<label for="userlog1" ></label>
<input type="text" id="userlog1" placeholder="密码 ">
</div>
<div class="form-check">
<input type="checkbox" id="checkbox"><label for="checkbox">自动登录</label>
<a href="#">忘记密码</a>
</div>
<input type="submit" value="登 录">
</form>
<div class="login-content-bottom">
<a href="#"><i></i>QQ</a><span></span>
<a href="#"><i></i>微信</a><span></span>
<a href="#">京东钱包</a>
<a href="weRegister.html"><i></i>立即注册</a>
</div>
</div>
</section>
</main>
<footer>
<p>
<a href="#">关于我们</a><span></span>
<a href="#">联系我们</a><span></span>
<a href="#">人才招聘</a><span></span>
<a href="#">商家入驻</a><span></span>
<a href="#">广告服务</a><span></span>
<a href="#">手机京东</a><span></span>
<a href="#">友情链接</a><span></span>
<a href="#">销售联盟</a><span></span>
<a href="#">京东社区</a><span></span>
<a href="#">English Site</a>
</p>
<p>Copyright©2004-2016 京东JD.com 版权所有 </p>
</footer>
</body>
使用HTML5搭建京东登录界面（一）相关推荐
- Vue实战篇一： 使用Vue搭建注册登录界面
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...
- vue框架搭建前端登录界面
使用vue框架搭建前端登录界面,用v-bind引入类,v-model实现数据绑定,v-on实现事件处理机制的处理. <!DOCTYPE html> <html lang=" ...
- EasyUI 搭建后台登录界面和管理系统主界面
EasyUI介绍 1.EasuyUI介绍: EasyUI:简单的界面设计框架,作用主要是用来设计网站的后台管理系统.帮助程序员快速的构建网站界面. 特点: 基于jQuery的一个UI插件 2.Easy ...
- 信贷系统搭建——实现登录界面与验证
文章目录 前言 一.问题描述 1.1权限管理 1.2业务管理 1.3模型管理 1.4案例管理 二.实现步骤 1.构建数据库和xlsx的读入 2.登陆界面 2.1 初始化窗体 2.2 创建窗体背景以及布 ...
- Android模仿京东登录注册,Android：布局实例之模仿京东登录界面
1 <?xml version="1.0" encoding="utf-8"?> 2 3 android:layout_width="ma ...
- ios 仿电脑qq登录界面_1、IOS开发--iPad之仿制QQ空间（登录界面搭建+登录逻辑实现）...
开始搭建登录界面 登录界面效果图: 步骤开始: 设置辅助窗口的位置在下方 快捷键option,然后拖拽复制之后: 这里就直接省去了将背景颜色改为经典黑了. 到这里QQ空间的登录界面搭建完毕. 下面进行 ...
- html5登录界面源代码_TwinCAT HMI，一款基于web的人机界面产品
纯属个人爱好,推荐一下这款产品,相比于传统HMI,优势很明显,不足也很明显,各位看官仁者见仁智者见智吧! 安装软件: Beckhoff官网下载: 1.TF2000-HMI-Engneering.exe ...
- 运用HTML5+CSS3和CSS滤镜做的精美的登录界面
原始出处http://chenjinfei.blog.51cto.com/2965201/774865 <!DOCTYPE HTML> <html> <head> ...
- 登录界面转换实现html,html5和css3登录注册表单界面切换动画
这是一款使用html5和css3 伪类:target制作的登录界面和注册表单界面切换动画. HTML html结构包含两个表单:登录表单和注册表单.开始时使用css将注册表单隐藏. Log in Yo ...
最新文章
- 深度学习vs机器学习 | 这些本质区别你知道多少？
- 计算机类自主招生推荐信,自主招生推荐信范文-20210709232503.docx-原创力文档
- 无法隐藏php thinkphp,thinkphp 在隐藏index.php和Home模块时有问题
- 如何使用Apache Camel，Quarkus和GraalVM快速运行100个骆驼
- Linux多线程贝叶斯建树教程,建树经验.doc
- SQL经典语句(转载)
- 可能比文档还详细--VueRouter完全指北
- App专项测试测试有哪些？
- 机器学习之欠采样和过采样
- Win10如何开启CPU虚拟化
- 流媒体弱网优化之路(NACK)——纯NACK方案的优化探索
- 统计文件中元音字母的数量
- 解决TortoiseSVN不显示状态图标（图文步骤详解）
- 告别无休止的甩锅，开发和运维如何高效合作
- python制作相册_《自拍教程73》Python 自动生成相册文件夹
- 字节跳动实习校招社招内推
- 软件工程——软件设计总结
- GAMES104 作业2-ColorGrading
- QLocale 获取系统语言简写
- 各位集美兄得看过来! 利用AI给青春有你2的选手们做数据分析挖掘(一):基于PaddlePaddle爬虫选手信息