使用简单的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>扫码登陆 | 账号登陆</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>关于我们 | 联系我们 | 人才招聘 | 商家入驻 | 广告服务 | 手机京东 | 友情链接 | 销售联盟 | 京东社区 | 京东公益 | English Site</p></a>
</div>
<div class="bottoms">
<p>Copyright©2004-2017 京东JD.com 版权所有</p>
</div>
</body>
</html>