html+css模拟京东商城登陆首页

页面整体架构

目标：

先分析下页面架构，大三类：header、content、footer

header有啥？

logo，图片
欢迎登陆，文字
调查问卷链接，超链接

content有啥？

一个警告区域
一张大图
一个背景色的box，背景色跟图片一致一个背景色的box，背景色跟图片一致
一个登陆框

footer有啥？

很多链接
版权说明

登陆框是最复杂的：

警告区域
登陆方式选择：扫码、账号登陆
警告区域，隐藏的，账号错误时会显示
账号框=icon+input框
密码框=icon+input框
忘记密码
登陆按钮
其他登陆方式：qq、微信登陆
注册按钮

代码架构：

根目录	子目录
index.html
static文件夹	logo.png
	bg.jpg
	login.css

效果

页面实现

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="static/login.css">
<title>京东-欢迎登陆</title>
</head>
<body>
<!-- header -->
<div class="w"><div class="header"><div id="logo"><img src="static/logo.png"><span>欢迎登录</span></div></div>
</div><!-- content -->
<div class="warning-wrap"><div class="warning"><p>依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版<a href="">《京东隐私政策》</a>已上线，将更有利于保护您的个人隐私。</p></div>
</div><div class="login-wrap"><div class="w"><div class="content"><div class="login-form"><!-- warning start --><div class="warning-wrap"><div class="warning"> <p>京东不会以任何理由要求您转账汇款，谨防诈骗。</p> </div></div><!-- warning stop --><div class="login-box h50"><div class="fl login-way"> 扫码登录 </div><div class="fr login-way color-r"> 账户登录 </div></div><!-- form --><form><div class="h252 pl20 pr20"><div class="w100p"><div class="h40 center"><div class="warning fs10 color-r">Error:用户名或密码错误!</div></div></div><div class="w100p"><div class="h50 center"><label for="username" id="username" class="itxt-icon"><img src=""></label><input placeholder="邮箱/用户名/已验证手机" id="username" class="itxt" type="text" name="username" autocomplete="off"></div></div><div class="w100p"><div class="h50 center pt10"><label for="password" id="password" class="itxt-icon"><img src=""></label><input placeholder="密码" id="password" class="itxt" type="password" name="password" autocomplete="off"></div></div><div class="w100p"><div class="h32 right-link"><div class="fr fs10 pt10"><a href="">忘记密码</a></div></div></div><div class="w100p"><div class="h50 center"><div class="login-btn"><a href="">登&nbsp;&nbsp;&nbsp;&nbsp;录</a></div></div></div></div></form><!-- wechat  --><div class="w90p"><div class="login-plus h50 pt15"><ul><li class="fl fs20 mr10">QQ</li><li class="fl fs20 mr10">|</li><li class="fl fs20 mr10">微信</li><li class="fr fs20 color-r">立即注册</li></ul></div></div></div></div></div>
</div><!-- footer -->
<div class="w"><div class="footer"><div class="pt15 fs10 center"><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="">京东公益</a> <span>|</span><a href="">English Site</a></div><div class="pt10 fs10 center"><span>Copyright © 2004-2018</span><span>&nbsp;&nbsp;&nbsp;&nbsp;</span><span>模拟京东商城登录界面</span></div></div></div>
</body>
</html>

css实现

@charset "utf-8"
*{font-family: 微软雅黑;font-size: 16px;color: #707070;
}
body{margin: 0;padding: 0;color: #707070;
}
p{line-height: 22px;
}
a{text-decoration: none;
}
input{outline: none;
}
textarea{outline: none;
}
#logo{width: 300px;height: 60px;float: left;}
#logo span{line-height: 60px;padding-top: 10px;height: 50px;font-size: 26px;display: block;float: right;
}
.header{height: 60px;margin-top: 10px;
}
.warning-wrap{background-color: #FFF7EC;
}
.warning-wrap .warning{/*height: 38px;*/margin: 0;/*vertical-align: middle;*/
}
.warning-wrap .warning p{margin: 0;padding: 12px;font-size: 12px;line-height: 20px;text-align: center;word-break: break-all;word-wrap: break-word;}
.login-wrap{background-color: #FAC5B3;
}
.login-wrap .content{height: 475px;/*background-color: #F6B9A6;*/background-image: url(bg.jpg);/**/
}
.login-wrap .content .login-form{width: 346px;height: 400px;background-color: #FFFFFF;position: relative;overflow: visible;float: right;top: 10px;/**/
}
.login-wrap .content .login-form .login-box {border-bottom: 1px solid #ddd;
}
.login-wrap .content .login-form .login-plus {border-top: 1px solid #ddd;
}
.login-plus ul{list-style: none;margin: 0;padding: 0;/*padding-top: 15px;*/
}
.login-wrap .content .login-form .login-box .login-way{font-size: 18px;text-align: center;margin-left: 50px;margin-right: 50px;/*padding-top: 20px;*/line-height: 50px;font-weight: bold;
}
.login-form .login-btn{height: 32px;background-color: #DB212E;/*margin-top: 30px;*/width: 100%;
}
.login-form .login-btn a{color: #FFFFFF;text-align: center;display: block;padding-top: 2px;/*vertical-align: middle;*/height: 32px;font-size: 20px;
}
.login-form .itxt{height: 38px;line-height: 18px;border: 1px solid #CCC;width: 254px;/*float: none;*/font-size: 15px;padding: 0;padding-left: 15px;overflow: hidden;
}
.login-form .itxt-icon{width: 38px;height: 38px;border: 1px solid #CCC;border-right: 0;background-color: #EFEFEF;display: inline-block;
}
.center{display: flex;justify-content: center;align-items: center;
}
.color-r{color: #DB212E;
}
.footer{height: 86px;position: relative;/*margin: 0 auto;*/
}
.footer .footer-links{/*width: 100%;*//*height: 20px;*/position: absolute;margin: auto;top: 0;bottom: 0;left: 0;right: 0;/*align-items: center;*/
}
.footer a{margin-left: 10px;margin-right: 10px;color: #707070;
}
.footer a:hover{color: #DB212E;text-decoration: underline;
}
.w{width: 990px;margin: 0 auto;
}
.w100p{width: 100%;margin: 0 auto;
}
.right-link{margin: 0;/*padding: 12px;*/font-size: 12px;line-height: 20px;text-align: center;word-break: break-all;word-wrap: break-word;}
.w90p{width: 90%;margin: 0 auto;
}
.fl{float: left;
}
.fr{float: right;
}
.fs10{font-size: 10px;
}
.mr10{margin-right: 10px;
}
.mt10{margin-top: 10px;
}
.tc{display: table-cell;
}
.pt10{padding-top: 10px;
}
.pt15{padding-top: 15px;
}.pl20{padding-left: 20px;
}
.pr20{padding-right: 20px;
}
.h50{height: 50px;
}
.h40{height: 40px;
}
.h32{height: 32px;
}
.h252{height: 252px;
}

html+css模拟京东商城登陆首页相关推荐

京东商城（HTML和CSS实现京东商城网站）
学习京东商城(HTML和CSS实现京东商城网站),本文实现该系统的功能截图,HTML和CSS部分关键语句,系统功能图等供大家学习参考本页面模仿京东商城本系统完全模仿京东商城写的页面,页面功能齐全 ...
js面向对象模拟京东商城图片放大效果
js面向对象模拟京东商城图片放大效果 JavaScript 的核心是支持面向对象的,同时它也提供了强大灵活的 OOP 语言能力.本文简单介绍一下使用JavaScript面向对象思想模拟京东商城鼠标悬浮 ...
简单的模拟京东商城购买过程-pymysql
学习python和数据分析推荐地方: www.lynda.com 获取lynda官网会员的方式:http://item.taobao.com/item.htm?id=557746408785 fr ...
html+css实现京东、英雄联盟静态页面
效果展示真高仿,像真的一样,页面的效果几乎都做出来了. 京东刚接触html css的时候写第一个页面,由于当时布局不太熟练,写了将近一个月- 英雄联盟实现功能京东点击切换轮播图京东自动轮播图 ...
当当、卓越、京东商城货物配送流程揭秘
电子商务:寒冬中直面配送短板电子商务企业逆市成长大城市配送速度力拼24小时内送达萧条的经济让零售业感受到瑟瑟寒意,电子商务却成为这个寒冬里屈指可数的"暖行业"之一.互联网研究 ...
淘淘商城--前台首页商品类目js展示
一.要实现的效果类似于要实现京东商城的首页商品类目展示的效果: 二.准备商品类目数据(json串) category.json { "data": [ { "u&quo ...
html5怎么做京东表格,HTML+CSS+PS 编写京东商城首页
仅供学习,转载请注明出处需求前面铺垫写了不少HTML.CSS.Photoshop的文章,那么本篇章就是要结合起来挑战写写京东的商城首页了. 好了,本次的目标就是实现这样的大概页面,让我们一步步来开 ...
H5+css : 360商城的首页布局模拟
H5+css : 360商城的首页布局模拟因为360商城页面过长,商品分类页面只选择了一个页面做一下实现.且只做了基本的布局和鼠标悬停效果 <!DOCTYPE html> <htm ...
HTML+CSS+PS 编写京东商城首页
仅供学习,转载请注明出处需求前面铺垫写了不少HTML.CSS.Photoshop的文章,那么本篇章就是要结合起来挑战写写京东的商城首页了. 好了,本次的目标就是实现这样的大概页面,让我们一步步来开 ...
HTML和CSS实现京东首页（html和css详解）
HTML和CSS实现京东首页,效果图如下: 基本代码如下:需要源代码和素材的评论区留言 (1)页面部分设计如下: <!DOCTYPE html> <html lang="e ...

html+css模拟京东商城登陆首页

目录

页面整体架构

效果

页面实现

css实现

html+css模拟京东商城登陆首页相关推荐

最新文章

热门文章