京东网页搭建
效果图
QQ图片20181101201907.png
- html标签代码
<!-- index.html是网站的首页对应的html文件 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- 设置网页标题 -->
<title>京东-欢迎登录</title>
<!-- 设置网页图标 -->
<link rel="icon" type="image/ico" href="img/jd.jpg"/>
<!-- 导入样式表 -->
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<!-- =============================顶部内容=========================== -->
<div id="herder">
<!-- =====顶部顶===== -->
<div id="top">
<div>
<a target="_blank"><img src="img/logo.png" >
<img src="img/l-icon.png" ></a>
</div>
<a id="survey" target="_blank">登录界面-调查问卷</a>
</div>
<!-- =====顶部底===== -->
<div id="bottom">
<p><img src="img/warning.png" >   依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版<a target="_blank">《京东隐私政策》</a>已上线，将更有利于保护您的个人隐私。</p>
</div>
</div>
<!-- =============================中间部分=========================== -->
<div id="content">
<!-- 登录框 -->
<div id="login_page">
<!-- 提示块 -->
<div id="div1">
<p><img src="img/warning.png">   京东不会以任何理由要求您转账汇款，谨防诈骗。</p>
</div>
<!-- 按钮块 -->
<div id="div2">
<button id="btn1">扫码登录</button>|
<button id="btn2">账户登录</button>
</div>
<!-- 输入信息块 -->
<div id="div3">
<!-- 用户名 -->
<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 target="_blank">忘记密码</a>
<!-- 登录按钮 -->
<button type="button" id="btn3">登 录</button>
</div>
<!-- 注册和第三方登录块 -->
<div id="div4">
<a id="a1" class="aa" target="_blank">QQ</a>|
<a id="a2" class="aa" target="_blank">微信</a>
<a id="a3" target="_blank">立即注册</a>
</div>
</div>
</div>
<!-- =============================底部内容=========================== -->
<div id="footer">
<div>
<a target="_blank">关于我们</a>|
<a target="_blank">联系我们</a>|
<a target="_blank">人才招聘</a>|
<a target="_blank">商家入驻</a>|
<a target="_blank">广告服务</a>|
<a target="_blank">手机京东</a>|
<a target="_blank">友情链接</a>|
<a target="_blank">销售联盟</a>|
<a target="_blank">京东社区</a>|
<a target="_blank">京东公益</a>|
<a target="_blank">English Site</a>
</div>
<p>Copyright ? 2004-2018 京东JD.com 版权所有</p>
</div>
</body>
</html>
css样式表代码
/* ==================================通用功能================================== */
*{
/* 消除默认margin值 */
margin: 0;
/* 消除默认padding值 */
padding: 0;
/* 先让所有标签的子标签默认对自己定位 */
position: relative;
}
/* ====================================顶部==================================== */
#herder{
height: 120px;
background-color: seagreen;
}
/* -----------顶部顶部---------- */
#herder #top{
height: 80px;
background-color: white;
}
#herder #top div{
width: 392px;
height: 80px;
/* background-color: hotpink; */
/* 相对定位会让标签脱流 */
position: absolute;
left: 137px;
/* 垂直居中 */
top: 50%;
/* 负的图片高度 */
margin: -30px 0 0 0;
/* 60px是图片的高度 */
line-height: 60px;
}
#herder #top div a{
text-decoration: none;
}
#herder #top #survey{
/* 布局 */
position: absolute;
right: 137px;
bottom: 10px;
/* 设置颜色和字体 */
color: rgb(145, 145, 145);
font-size: 13px;
/* 去掉下划线 */
text-decoration: none;
/* 设置padding */
padding-left: 23px;
/* 添加背景图 */
/*
background: url(图片地址) repeat/no-repeat(是否平铺) x y(x y 一般不平铺的时候才设置) 背景颜色
x y：x坐标和Y坐标对应的值，除了可以设置数字值以外，还可以设置center让背景图片在x方向和y方向居中
*/
background: url(../img/q-icon.png) no-repeat 0 3px white;
}
#herder #top #survey:hover{
color: red;
text-decoration: underline;
}
/* -----------顶部底部---------- */
#herder #bottom{
height: 40px;
background-color: rgb(255, 248, 240)
}
#herder #bottom p{
/* 水平居中 */
height: 100%;
line-height: 40px;
/* 垂直方向居中 */
text-align: center;
/* 设置字体和字体颜色 */
font-size: 12px;
color: rgb(150, 150, 150);
}
#herder #bottom p img{
/* 设置高度 */
height: 25px;
/* 水平居中 */
position: absolute;
top: 50%;
margin-top: -12.5px;
line-height: 25px;
}
#herder #bottom p a{
color: rgb(30, 30, 30);
/* 去掉下划线 */
text-decoration: none;
}
#herder #bottom p a:hover{
/* 添加下划线 */
text-decoration: underline;
}
/* ====================================中间==================================== */
#content{
height: 470px;
/* 77， 157， 254 */
background: url(../img/doule11.jpg) no-repeat 50% center rgb(193, 45, 45);
}
#content #login_page{
width: 350px;
height: 400px;
background-color: white;
position: absolute;
top: 11px;
right: 133px;
}
/* 1.提示块 */
#content #login_page #div1{
height: 40px;
background-color: rgb(255, 248, 240)
}
#content #login_page #div1 p img{
height: 25px;
position: absolute;
top: 50%;
margin: -12.5px 0 0 0;
line-height: 25px;
}
#content #login_page #div1 p{
/* 字体设置 */
font-size: 12px;
color: rgb(180, 180, 180);
/* 水平方向居中 */
height: 40px;
line-height: 40px;
/* 垂直方向居中 */
text-align: center;
}
/* 2.登录选择块 */
#content #login_page #div2{
height: 55px;
/* background-color: white; */
color: rgb(230, 230, 230);
/* 设置竖线粗细 */
font-weight: 100px;
}
#content #login_page #div2 button{
width: 48%;
height: 100%;
/* 边框 */
border: none;
/* 字体和字体颜色 */
font-size: 18px;
color: rgb(60, 60, 60);
background-color: white;
}
/* 设置按钮成为焦点的状态 */
#content #login_page #div2 button:focus{
color: red;
/* 按钮成为焦点默认的边框效果 */
outline: none;
}
/* 3.信息收集 */
#content #login_page #div3{
height: 255px;
/* 设置边框 */
border-top: solid rgba(230, 230, 230, 0.6) 1px;
border-bottom: solid rgba(230, 230, 230, 0.6) 1px;
}
#content #login_page #div3 div{
/* background-color: honeydew; */
width: 300px;
height: 40px;
margin-left: 5%;
margin-top: 20px;
border: solid rgb(190, 190, 190) 1px;
}
#content #login_page #div3 #username{
margin-top: 35px;
}
/* 图片 */
#content #login_page #div3 div img{
width: 40px;
height: 40px;
float: left;
border-right: solid rgb(190, 190, 190) 1px;
}
/* */
#content #login_page #div3 div input{
height: 40px;
width: 246px;
border: 0;
float: left;
padding: 0 0 0 12px;
font-size: 15px;
}
#content #login_page #div3 div input:focus{
outline: none;
}
#content #login_page #div3 a{
position: absolute;
right: 30px;
margin-top: 20px;
color: rgb(90, 90, 90);
font-size: 13px;
text-decoration: none;
}
#content #login_page #div3 a:hover{
color: red;
text-decoration: underline;
}
#content #login_page #div3 button{
width: 300px;
margin-left: 23px;
height: 35px;
position: absolute;
bottom: 30px;
background-color: rgb(219, 34, 46);
border: none;
color: white;
font-size: 20px;
cursor: pointer;
}
/* 4.注册和第三方登录 */
#content #login_page #div4{
height: 50px;
background-color: rgb(252, 252, 252);
line-height: 50px;
font-size: 11px;
color: rgb(220, 220, 220);
}
#content #login_page #div4 #a1, #a2{
color: rgb(89, 89, 89);
font-size: 12px;
text-decoration: none;
padding-left: 25px;
padding-bottom: 2px;
}
#content #login_page #div4 #a1{
margin-left: 15px;
margin-right: 10px;
background: url(../img/qq.png) no-repeat 0 center rgb(250, 250, 250);
}
#content #login_page #div4 #a2{
margin-left: 8px;
background: url(../img/weixin.png) no-repeat 0 center rgb(250, 250, 250);
}
#content #login_page #div4 #a3{
position: absolute;
right: 25px;
color: rgb(182, 29, 29);
font-size: 15px;
text-decoration: none;
background: url(../img/right.png) no-repeat 0 center rgb(250, 250, 250);
padding-left: 25px;
}
#content #login_page #div4 #a1:hover{
color: red;
text-decoration: underline;
}
#content #login_page #div4 #a2:hover{
color: red;
text-decoration: underline;
}
#content #login_page #div4 #a3:hover{
text-decoration: underline;
}
/* ====================================底部==================================== */
#footer{
height: 105px;
background-color: white;
}
#footer div{
height: 50px;
/* background-color: darkgray; */
/* 水平居中 */
text-align: center;
/* 垂直居中 */
line-height: 50px;
}
#footer div a{
margin-left: 10px;
margin-right: 10px;
font-size: 12px;
color: rgb(89, 89, 89);
text-decoration: none;
}
#footer div a:hover{
color: red;
text-decoration: underline;
}
#footer p{
color: rgb(100, 100, 100);
font-size: 10px;
text-align: center;
}
