仿京东商城登录页面html

这篇文章，书生带来了一个静态的仿京东商城登录页面

有需要的可直接拿去修改修改就可以用了

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>* {padding: 0;margin: 0;}.top {height: 80px;width: 100%;/* background-color: pink; */}.topleft {float: left;width: 290px;height: 80px;background-image: url(img/logo.png);background-repeat: no-repeat;background-position: 83px center;}.topright {height: 80px;line-height: 80px;font-size: 20px;font-weight: 700;color: gray;}.maxbg {width: 100%;height: 600px;background-image: url(img/back.png);background-repeat: no-repeat;background-size: cover;}.entry {width: 420px;height: 350px;background-color: white;border: 1px solid white;position: relative;margin-left: 930px;top: 76px;}.left {float: left;padding-top: 20px;padding-left: 15px;font-size: 20px;color: gray;font-weight: 500;}.right {float: right;width: 150px;background-image: url(img/icon3.jpg);background-repeat: no-repeat;background-position: 50px 20px;font-size: 15px;color: red;font-weight: 500;padding-top: 17px;right: 10px;text-indent: 70px;}.username {clear: both;border: 2px solid rgb(214, 214, 214);width: 382px;height: 40px;margin-left: 15px;margin-top: 35px;background-image: url(img/icon1.jpg);background-repeat: no-repeat;background-position: 0 center;outline: none;color: black;text-indent: 3em;font-size: 16px;}.userpwd {clear: both;border: 2px solid rgb(214, 214, 214);width: 382px;height: 40px;margin-left: 15px;margin-top: 35px;background-image: url(img/icon2.jpg);background-repeat: no-repeat;background-position: 0 center;color: black;text-indent: 3em;font-size: 16px;outline: none;}.litlebox {margin-top: 30px;margin-left: 15px;}.login {color: rgb(145, 135, 135);font-size: 14px;padding-top: 20px;height: 20px;line-height: 20px;}.password {color: rgb(145, 135, 135);font-size: 14px;padding-top: 20px;height: 20px;line-height: 20px;padding-left: 245px;}.DengLu {margin-top: 20px;margin-left: 15px;}.denglu {width: 382px;height: 38px;background-color: rgb(228, 57, 60);border: rgb(228, 57, 60);color: white;font-size: 16px;outline: none;}.denglu:active {outline: none;box-shadow: 1px 1px 2px gray;}.bottoms {height: 80px;width: 100%;}.tet {padding-top: 15px;text-align: center;color: gray;font-size: 14px;}.txt {padding-top: 15px;text-align: center;color: gray;font-size: 14px;}</style>
</head><body>
<div class="top"><div class="topleft"></div><div class="topright">欢迎登录</div>
</div>
<div class="maxbg"><div class="entry"><div><span class="left">京东会员</span><span class="right">立即注册</span></div><div><input type="text" class="username" placeholder="邮箱/用户名/已验证手机"><input type="text" class="userpwd" placeholder="请输入密码"></div><div class="litlebox"><span class="login"><input type="checkbox"> 自动登录</span><span class="password">忘记密码？</span></div><div class="DengLu"><a href=""><input type="submit" value="登录" class="denglu"></a></div></div>
</div>
<div class="bottoms"><div class="tet"><p>关于我们 | 联系我们 | 人才招聘 | 商家入驻 | 广告服务 | 手机京东 | 友情链接 | 销售联盟 | 京东社区 | 京东公益 | English Site</p></div><div class="txt"><p>Copyright&copy;2004-2017 京东JD.com 版权所有</p></div>
</div>
</body>
</html>

以下是我的效果图的展示：

如果修改的话，对于初学者，有几点建议：

①如果不运用到项目，只为了静态展示，那么，多做几个页面，将底部的：关于我们|联系我们等等改为a标签进行页面跳转。

②可以修改一下css，进行美化页面的操作。

③根据自己的需求来修改页面图片，可以选择改为轮播图。

相关图片资源我放在我的资源里面

有需要的可以直接下载（相关资源可从我的资源下载，免费，可能因为系统原因暂时看不见我的资源，可以先收藏或关注，不迷路）

也可以自己添加图片，但要注意路径问题

学之广在于不倦，不倦在于固志。

也希望大家学习期间每天都会有收获

好了，文章结束，浪客书生，以键证道...

仿京东商城登录页面html相关推荐

仿京东商城登录页面_京东e卡如何使用？
一.使用京东E卡可以在 www.jd.com ("本网站")上购买自营商品,部分特殊商品除外,详细可见"购卡章程",具体有效期请登录京东商城,在"我 ...
京东商城项目实战（2）------京东商城登录页面
项目实战:京东商城(1)----京东商城首页京东商城(2)----京东商城登录页面京东商城(3)----京东商城注册页面效果图: 点击账户登录的效果: 源代码(如需其余源码,请在下方评论留言): ...
HTML前端仿京东静态登录页面
HTML前端仿京东静态登录页面很多小伙伴在学习前端静态布局的时候总是一头雾水不知版图从何构造今天就写了一篇这个京东登录页面和大家一快学习! <!DOCTYPE html> <h ...
京东商城项目实战（3）------京东商城注册页面
项目实战:京东商城(1)----京东商城首页京东商城(2)----京东商城登录页面京东商城(3)----京东商城注册页面网页效果: 网页源代码(入需其他源代码,请在评论下方留言): <!D ...
HTML5期末大作业：商城网页设计——仿京东商城网页端模板(8页面) HTML+CSS+JavaScript...
HTML5期末大作业:商城网页设计--仿京东商城网页端模板(8页面) HTML+CSS+JavaScript 商城网页HTML代码学生网页课程设计期末作业下载商城大学生网页设计制作成临近期末, ...
HTML5期末大作业：商城网页设计——仿京东商城网页端模板(8页面) HTML+CSS+JavaScript
HTML5期末大作业:商城网页设计--仿京东商城网页端模板(8页面) HTML+CSS+JavaScript 商城网页HTML代码学生网页课程设计期末作业下载商城大学生网页设计制作成临近期末, ...
基于javaweb仿京东商城管理系统的设计与实现(含论文和程序源码及数据库文件)
网上购物商城系统以弥补传统购物方式的弊端.在目前的商城里,如果采用网上商城方式,用户购物时就不需要到店里面排队,这样不仅能实时地了解商品的特色,而且方便了顾客,同时也减轻了商城的服务压力.随着WLAN ...
HTML期末大作业~仿京东商城模板网站(HTML+CSS+JavaScript)
HTML期末大作业~仿京东商城(HTML+CSS+JavaScript) 这次网页主要以(HTML+CSS+JavaScript)制作登录注册首页购物商品详情 ,等多个页面~特别适合web期末 ...
【android】高仿京东商城App，集成react-native热更功能
简介高仿京东商城项目具有完整的结构,代码整洁规范,结构清晰,集成React-Native热更功能,功能还在持续更新中-如果对你有帮助,给个star 使用kotlin语言开发,项目使用模块化开发,降低 ...
高仿京东商城app、集成react-native热更新功能
简介这是一个高仿京东商城的安卓项目,有完整的结构,代码整洁规范,结构清晰,集成React-Native热更功能 kotlin . retrofit2 + okhttp3 网络请求 .多模块 leak ...

仿京东商城登录页面html

仿京东商城登录页面html相关推荐

最新文章

热门文章