HTML模仿静态京东登陆界面

使用简单的html+css 进行京东登陆界面的简单模仿

并没有对css和html进行分开编辑

效果如图

素材元素私信获取

代码如下：

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>京东商城</title><style>*{padding:0;margin: 0;}.header{ /* 相对定位元素的定位是相对其正常位置 */position:relative;background-color: white;padding: 15px;}.image{float:left;margin-left:200px;}.font{      line-height: 3.5em;float: right;margin-right: 930px;font-size: 140%;font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;color:rgb(87, 84, 84);}.word{   /* 继承，绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>: */position:absolute;line-height: 8em;font-size: 80%;margin-left: 1050px;font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;color:rgb(23, 21, 21);}a:link{text-decoration: none;color: black;}.tip{background-color: rgb(254,248,241);display: inline-block;/*盒子的样式*/width: 100%;height: 40px;/*超链接文本*/font-size: 10px;text-align: center;line-height: 40px;color: rgb(153,153,164);}.body{position:relative;float: left;width: 100%;background-color: rgb(215, 72, 88);}.images{float:left;margin-left: 220px;}.data{float: right;margin-top: 20px;margin-right: 250px;background-color: white;border: 1px ;width: 400px;height:400px;}.top{background-color: antiquewhite;width: 400px;height:50px;text-align: center;color: red;font-size:25px;}.human{float: left;margin-top: 20px;margin-left: 150px;}.in{line-height: 2em;margin: 130px 100px 0px 80px;}.get{float: left;margin-top: 30px;margin-left: 30px;width: 350px;height:40px;background-color: rgb(227, 61, 61);text-align: center;letter-spacing: 1em;color: white;}.out{float: left;margin-top: 45px;width: 400px;height:20px;}.bottom{float: left;width: 100%;text-align: center;font-size: 70%;letter-spacing: 0.1em;font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;color:rgb(87, 84, 84);margin-top: 15px;}.bottoms{float: left;width: 100%;text-align: center;font-size: 70%;letter-spacing: 0.1em;font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;color:rgb(87, 84, 84);margin-top: 10px;}</style>
</head>
<body><div class="header"><div class="image"><a href="#"><img src="素材/图标.png"></a>   </div><div class="font"><p>欢迎登录</p></div><div class="word"><a href="#"><img src="素材/7cebcb7bba3d88ee48035b24bc8f829.png">登录页面，调查问卷</a></div></div><div class="tip"><P>！依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！新版《京东隐私政策》已上线，将更有利于保护您的个人隐私。</P></div><div class="body"><div class="images"><img src="素材/back.png"></div><div class="data"><table><tr>     <td><div class="top"><a href="#"><p>扫码登陆&nbsp;&nbsp;|&nbsp;&nbsp;账号登陆</p></a></div><div class="human"><img src="素材/id.png"></div><div class="in"><form>账户: <input type="text" name="userName" /> 密码: <input type="password" name="userPsd" /></form></div><div class="get"><a href="#"><h2>登陆</h2></a></div><div class="out"><a href="baidu.com"><img src="素材/qq.png"></a><a href="#"><img src="素材/wx.png"></a><a href="#"><img src="素材/zc.png"></a></div></td></tr></table></div></div><div class="bottom"><a href="baidu.com"><p>关于我们&nbsp; &nbsp;| 联系我们&nbsp; &nbsp;| 人才招聘 &nbsp;&nbsp;| 商家入驻 &nbsp;&nbsp;| 广告服务 &nbsp;&nbsp;| 手机京东&nbsp;&nbsp; | 友情链接 &nbsp;&nbsp;| 销售联盟&nbsp; &nbsp;| 京东社区&nbsp; &nbsp;| 京东公益&nbsp; &nbsp;| English Site</p></a>  </div><div class="bottoms"><p>Copyright&copy;2004-2017 京东JD.com 版权所有</p></div>
</body>
</html>

HTML模仿静态京东登陆界面相关推荐

4.2京东登陆界面上部分
4.2京东登陆界面上部分 <!DOCTYPE html> <html><head><meta charset="utf-8">< ...
使用HTML表单和表格完成静态QQ登陆界面
使用HTML表单和表格完成静态QQ登陆界面一.创建过程创建表单创建表格创建行创建单元格创建表单组建二.原理使用表单来显示收集用户信息并用表格来帮助排版三.主要代码 1. <ta ...
android模仿qq登录界面,初识Android二之小试牛刀模仿实现qq登陆界面
初识Android二之小试牛刀模仿实现qq登陆界面.俗话说得好,老师踢开门,修行在自己.勉勉强强学完生命周期,然后悠悠闲闲听了两节课后,老师就布置了一个登陆界面的实现,于是,磕磕绊绊的修行之路开始了. ...
京东登陆界面（静态）
ps:模仿的京东的登陆界面,但只是个静态的,还没有怎么熟练运用javascript的知识,代码如下 <!DOCTYPE html> <html><head>< ...
京东登陆界面正则匹配
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8 ...
java实现京东登陆界面,京东登陆界面的实现
京东-欢迎登录登录页面,调查问卷依据<网络安全法>,为保障您的账户安全和正常使用,请尽快完成手机号验证! 新版<京东隐私政策>已上线,将更有利于保护您的个人隐私. 京东不会 ...
VS2010模仿QQ2011登陆界面
模仿QQ2011的登陆界面有很多种方法,下面我介绍一下我自己的设计方法以及在设计过程中所用到的技术关键点: 附截图两张: 登陆界面中用到的技术关键点有: 一.背景的绘制 QQ2011登陆界面的背景分为 ...
java模拟京东登陆_requests+beautifulsoup模拟登陆京东
最近需要实现获取个人京东订单信息的功能,利用了requests+beautifulsoup来实现. requests是python的第三方库,相比之前常用的python标准库中的urllib2,req ...
Qt 之模仿 QQ登陆界面——功能篇（一）
一.简述今天是2017年第一篇技术文章,12月末事情太多,一直没来得及更新博客.今天继 Qt 之模仿 QQ登陆界面--样式篇这一篇来简单地看一下对登录界面做的一些功能,主要是登录用户下拉列表和 ...

HTML模仿静态京东登陆界面

HTML模仿静态京东登陆界面相关推荐

最新文章

热门文章