CSS文件编辑京东登录界面
html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
京东-欢迎登录
</title>
<!--rel：icon（设置图标）
type:文件类型 image/x-icon（图片类型，png，ico，x-icon）
-->
<link rel="icon" type="image/x-icon" href="img/icon.ico"/>
<link rel="stylesheet" type="text/css" href="css/京东css.css"/>
</head>
<body>
<!--====1.顶部====-->
<div id="header">
<div id="icon">
<img src="img/logo.png"/>
<img src="img/l-icon.png"/>
</div>
<div>
<a target="_blank" href="https://surveys.jd.com/index.php?r=survey/index/sid/568245/lang/zh-Hans">登录页面，问卷调查</a>
</div>
</div>
<!--====2.中间====-->
<div id="ttt">
<!--<img src="img/warning.png"/>-->
<p style="text-align: center;">依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版<a target="_blank" href="https://about.jd.com/privacy/">《京东隐私政策》</a>已上线，将更有利于保护您的个人隐私。</p>
</div>
<!--中间间-->
<div id="content">
<div id="content1">
<img src="img/bg.png"/>
</div>
<div id="cc1">
<div id="cc11">
<p style="text-align: center;">京东不会以任何理由要求您转账汇款，谨防诈骗。</p>
</div>
<div id="cc12">
<button>扫码登录</button>|
<button>账号登录</button>
</div>
<div id="info-middle">
<!--输入框模块-->
<div id="username">
<img src="img/pygame.png"/>
<input type="text" name="username" id="" value="" placeholder="邮箱/用户名/已验证手机号"/>
</div>
<div id="password">
<img src="img/password_icon.png"/>
<input type="password" name="password" id="" value="" placeholder="密码"/>
</div>
<a href="https://safe.jd.com/findPwd/index.action">忘记密码</a>
<div id="cc13">
<button>登 录</button>
</div>
<div id="cc14">
</div>
</div>
</div>
</div>
<!--====3.底部====-->
<div id="footer">
<br />
<div style="text-align: center;" id="ff1">
<a href="https://www.jd.com/">关于我们</a> |
<a href="http://about.jd.com/contact">联系我们</a> |
<a href="http://zhaopin.jd.com/home;jsessionid=A2344F28B41EE1C7DFE4005961C18CEF.s1">人才招聘</a> |
<a href="https://www.jd.com/">商家入驻</a> |
<a href="https://www.jd.com/">广告服务</a> |
<a href="https://app.jd.com/">手机京东</a> |
<a href="https://club.jd.com/links.aspx">友情链接</a> |
<a href="https://media.jd.com/">销售联盟</a> |
<a href="https://sale.jd.com/act/n0hAvqy5CW8.html">京东社区</a> |
<a href="https://gongyi.jd.com/">京东公益</a> |
<a href="https://www.joybuy.com/">English Site</a>
</div>
<br />
<div style="text-align: center;" id="ff2">
<p>Copyright © 2004-2018 京东JD.com 版权所有</p>
</div>
</div>
</body>
</html>
CSS文件
*{
margin:0 ;
padding:0;
position:relative;
}
a{
text-decoration:none ;
}
/*=====header=====*/
#header{
width: 100%;
height: 80px;
background-color: white;
}
#header a{
float: left;
margin-left:600px ;
margin-top: 55px;
color: rgb(153,153,153);
font-size:12px;
background: url(../img/q-icon.png) no-repeat 0 center;
padding-left: 20px;
}
#ttt{
width: 100%;
height: 40px;
background-color: rgb(255,248,240);
/*background: url(../img/warning.png) no-repeat 0 center;*/
/* display: inline;*/
}
#icon{
float: left;
position: relative;
margin-left:100px ;
}
#ttt p{
line-height: 40px;
font-size:12px ;
color: rgb(153,153,153);
}
#ttt a{
color: rgb(51,51,51);
}
#ttt a:hover{
text-decoration: underline;
color:red;
}
/*=====content=====*/
#content{
width: 100%;
height: 473px;
background-color:rgb(221,46,19);
}
#content1{
position: relative;
float: left;
/*margin-left: 200px;
margin-top: 50px;*/
/*background-color: #FF0000;*/
width: 200px;
height:300px;
}
#cc1{
float: right;
width: 350px;
height: 440px;
background-color: antiquewhite;
margin-right: 135px;
margin-top: 10px;
}
#cc11{
position: relative;
float: left;
height: 40px;
width: 350px;
background-color: rgb(255,248,240);
line-height: 40px;
font-size:12px ;
}
#cc11 p{
color: rgb(153,153,153);
}
#cc12{
float: left;
width: 350px;
height: 55px;
background-color: #FFFFFF;
text-align: center;
border-bottom:1 solid rgb(153,153,153);
}
#cc12 button{
background-color: rgba(0,0,0,0);
font-size: 20px;
color: rgb(180,180,180);
width: 160px;
height: 55px;
border: 0;
border-bottom: 1px solid rgb(153,153,153);
}
#cc12 button:focus{
outline: none;
color: red;
}
#cc13{
float: left;
margin-left:22px ;
margin-top:220px ;
}
#cc13 button{
font-size: 20px;
color: white;
background-color: rgb(228,57,60);
width: 304px;
height: 35px;
border: 1px solid rgb(203,42,45);
}
#cc13 button:focus{
color: darkblue;
}
#cc13 button:hover{
background-color: #FFFF00;
}
/*=======================================================*/
#cc14{
margin-top:288px ;
width: 350px;
height: 57px;
background-color: rgb(252,252,252);
border-top:1px solid rgb(244,244,244) ;
}
/*=============================================================*/
/*登录框的中部*/
#info-middle{
float: left;
height: 288px;
width: 350px;
background-color: white
}
/*用户名和密码输入*/
#username, #password{
background-color: white;
width: auto;
height: 40px;
position: absolute;
left: 20px;
right: 20px;
top: 40px;
border: 1px solid rgb(180,180,180);
}
#password{
top: 110px;
}
#info-middle img{
float: left;
height: 100%;
border-right: 1px solid rgb(180,180,180);
}
#info-middle input{
border: 0;
float: left;
height: 100%;
width: 80%;
padding-left: 15px;
}
/*设置成为焦点的状态的样式*/
#info-middle input:focus{
outline: none;
}
/*忘记密码*/
#info-middle a{
/*float: right;*/
position: absolute;
top: 180px;
right: 20px;
font-size: 12px;
color: rgba(180, 180, 180,1);
}
#info-middle a:hover{
color: red;
text-decoration: underline;
}
/*=====footer=====*/
#footer{
width: 100%;
height: 86px;
background-color:white;
color: rgb(102,102,102);
font-size: 12px;
}
#ff1 a{
color: rgb(102,102,102);
font-size: 12px;
}
#ff1 a:hover{
text-decoration: underline;
color: red;
}
其中html文件为整体的div框架，css文件为各个div的属性
效果图
image.png
其中仍有一些图标未完成，会在后续的作业中完成其相同的任务目标
网友评论