文档章节

使用HTML5搭建京东登录界面(一)

博为峰教研组
 博为峰教研组
发布于 2017/03/28 18:12
字数 331
阅读 113
收藏 0

先来看一下最终的效果

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>

 

© 著作权归作者所有

共有 人打赏支持
博为峰教研组
粉丝 50
博文 1224
码字总数 479077
作品 0
黄浦
程序员
私信 提问
移动应用 APP 编辑器

【业务需求】 一、功能需求 1、移动应用项目是为了建立能在手机端进行翻页类HTML5页面的编辑、展示与传播的移动应用。 本次项目建立的系统属于轻应用,用户不需要下载APP应用程序,只需扫描二...

Miss_Fung
2015/12/28
15
5
Windows8/Silverlight/WPF/WP7/HTML5周学习导读(1月28日-2月3日)

Windows8/Silverlight/WPF/WP7/HTML5周学习导读(1月28日-2月3日) 本周Windows 8开发学习资源更新 本周Silverlight学习资源更新 本周Windows Phone开发学习资源更新 本周WPF学习资源推荐 本周...

冷秋寒
2018/06/29
0
0
JS 详解 Cookie、 LocalStorage 与 SessionStorage

基本概念 Cookie Cookie 是小甜饼的意思。顾名思义,cookie 确实非常小,它的大小限制为4KB左右。它的主要用途有保存登录信息,比如你登录某个网站市场可以看到“记住密码”,这通常就是通过...

飞翔的熊blabla
01/14
0
0
炙手可热的12款网站模板推荐

每周极客标签都将推出两篇荟萃内容的文章,内容覆盖了Bootstrap、CSS、Javascript、HTML5等当前最热门的特效和应用,本周我们推荐的这12款网站设计模板不仅带有独立的在线演示,并且依旧全部...

gbin1
2014/04/23
667
1
HTML5和CSS3不仅仅是两项新的Web技术标准

HTML5和CSS3不仅仅是两项新的Web技术标准 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术。虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那...

课工场CC老师
2017/10/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Go Timer实现原理剖析

简介 快速使用 操作介绍

恋恋美食
6分钟前
0
0
记录一个奇怪的问题

环境:jdk1.8虚拟机参数:-verbose:gc -XX:+PrintGCDetails -Xmx20m -Xms20m -Xmn10m -XX:SurvivorRatio=8  -XX:+HeapDumpOnOutOfMemoryError 可以看出,eden占8M却放不下6M数据,发生了......

暗中观察
34分钟前
0
0
创建多个git账号

实习开发中我们可能一个机子上配置多个git账号,如github.com,oschina.com 或者工作账号,私人账号,这时候就2个账号用一个key,肯定会冲突,有一个会提示没权限(账号和密码对应不上) ssh ...

echojson
37分钟前
1
0
rabbitmq安装教程

RabbitMQ有Windows与Linux版本的,这里先写Windows版本的安装。 以前安装软件总是在百度上找某某安装教程,结果能按照教程安装好的软件真的不多。想起先前以为大牛说的一句话,去官网按照官网...

em_aaron
今天
7
0
Android 贝塞尔曲线实践——波浪式运动

一、波浪效果如下 贝塞尔曲线自定义波浪效果的案例很多,同样方法也很简单,大多数和本案例一样使用二次贝塞尔曲线实现,同样还有一种是PathMeasure的方式,这里我们后续补充,先来看贝塞尔曲...

IamOkay
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部