案例:京东登录页面css创建
京东登录页面
效果图
一、整体html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 设置标题 -->
<title>京东-欢迎登录</title>
<!-- 设置图标 -->
<link rel="icon" href="img/jd_logo.ico">
<!-- 导入外部样式 -->
<link rel="stylesheet" href="css/login.css">
<link rel="stylesheet" href="css/login-Top.css">
<link rel="stylesheet" href="css/login-Middle.css">
<link rel="stylesheet" href="css/login-Bottom.css">
</head>
<body>
<!--------------------- 网页最顶部部分 ----------------------------->
<div id="top-box">
<!----------- 放网页logo部分 ------------>
<div id="logo-box">
<div>
<a href="https://www.jd.com/cu=true&utm_source=dgpage.dsztfso.cn&utm_medium=tuiguang&utm_campaign=t_2018529520_&utm_term=72e0f8f36939447c9ca2561c75315ca7">
<img src="img/logo.png" alt="">
</a>
<img src="img/l-icon.png" alt="">
</div>
<a href="https://wj-dongjian.jd.com/q/61a05143f2ec2b00b35e40a6">登录页面,调查问卷</a>
</div>
<!------------- 放隐私政策部分 ------------>
<div id="privacy-box">
<p>
<img src="img/warning.png" alt="">
依据《网络安全法》,为保障您的账户安全和正常使用,请尽快完成手机号验证! 新版<a target="_blank" href="https://about.jd.com/privacy/">《京东隐私政策》</a>已上线,将更有利于保护您的个人隐私。
</p>
</div>
</div>
<!--------------------------- 网页中间部分 ---------------------------->
<div id="middle-box">
<!-- 中间大盒子 -->
<div>
<!-- 上面放登录按钮的部分 -->
<div id="btn-box">
<p>
<img src="img/warning.png" alt="">
京东不会以任何理由要求您转账汇款,谨防诈骗。
</p>
<div>
<button>扫码登录</button>
<span>|</span>
<button>账户登录</button>
</div>
</div>
<!------------- 放输入框的部分 --------------->
<div id="message-box">
<!-- 账号输入框 -->
<div>
<img src="img/pygame.png" alt="">
<input type="text" placeholder="邮箱/账户名/登录手机">
</div>
<!-- 密码输入框 -->
<div>
<img src="img/password_icon.png" alt="">
<input type="password" placeholder="密码">
</div>
<!-- 忘记密码 -->
<a target="_blank" href="https://aq.jd.com/process/findPwd?s=1">忘记密码</a>
<!-- 登录按钮 -->
<button>登  录</button>
</div>
<div id="third-party-box">
<a id="qq" href="https://graph.qq.com/oauth2.0/show?which=Login&display=pc&response_type=code&state=9616EDC5976C33482902DFDF144814256CE77E3198CD58905B8F80470D3CB25F55C9B504E36B4DB84DFB9572308C3324&client_id=100273020&redirect_uri=https://qq.jd.com/new/qq/callback.action?view=null&uuid=39a6f16e0cfb4621ada69ffacb0b07ab">QQ</a>
<span>|</span>
<a id="weixin" href="https://open.weixin.qq.com/connect/qrconnect?appid=wx827225356b689e24&state=3FB8ABAC5D06C27D7E5D962A3FD02F8B244AC1A4345CE0BEE461666AB46920532056189C967D4142EEB416BB93BCFF5A&redirect_uri=https://qq.jd.com/new/wx/callback.action?view=null&uuid=772e84b112114172affedf3840b88dc2&response_type=code&scope=snsapi_login#wechat_redirect">微信</a>
<a id="register" href="https://reg.jd.com/p/regPage?ignore=1">立即注册</a>
</div>
</div>
</div>
<!-------------------------- 网页底部部分 ----------------------------->
<div id="bottom-box">
<div>
<a target="_blank" href="https://about.jd.com/">关于我们</a>
<span>|</span>
<a target="_blank" href="https://www.jd.com/?cu=true&utm_source=c.duomai.com&utm_medium=jingfen&utm_campaign=t_16282_295963166&utm_term=dd8467555def42eeaa8b62230abe3112">联系我们 </a>
<span>|</span>
<a target="_blank" href="https://zhaopin.jd.com/home;jsessionid=797719A9866D25A3DF21DFB84409C6F1.s1">人才招聘 </a>
<span>|</span>
<a target="_blank" href="https://lai.jd.com/">商家入驻 </a>
<span>|</span>
<a target="_blank" href="https://jzt.jd.com/home/#/index">广告服务 </a>
<span>|</span>
<a target="_blank" href="https://app.jd.com/">手机京东 </a>
<span>|</span>
<a target="_blank" href="https://club.jd.com/links.aspx">友情链接 </a>
<span>|</span>
<a target="_blank" href="https://media.jd.com/">销售联盟 </a>
<span>|</span>
<a target="_blank" href="https://pro.jd.com/mall/active/3WA2zN8wkwc9fL9TxAJXHh5Nj79u/index.html">京东社区 </a>
<span>|</span>
<a target="_blank" href="https://gongyi.jd.com/">京东公益</a>
</div>
<p>Copyright © 2004-2022 京东JD.com 版权所有</p>
</div>
</body>
</html>
二、整体设置CSS代码
/* 关闭网页中所有标签自带的内边距和外边距 */
*{
margin: 0;
padding: 0;
}
/* 设置三个部分盒子的大小 */
#top-box{
height: 120px;
}
#middle-box{
height: 475px;
background-color: cadetblue;
}
#bottom-box{
height:265px;
}
三、顶部css代码
/* ---------------------放网页logo部分----------------------------- */
#logo-box{
height: 80px;
position: relative;
}
#logo-box>div{
position: absolute;
left: 220px;
top: 10px;
}
/* 设置图片外边距 */
#logo-box>div>img{
margin-left: 16px;
}
/* 去掉下划线 */
#logo-box>div>a{
text-decoration: none;
/* 后面的调查问卷 */
}
#logo-box>a{
position: absolute;
right:225px;
bottom: 10px;
font-size: 12px;
color: rgb(170, 170, 170);
text-decoration: none;
background: url("../img/q-icon.png") no-repeat left center;
padding-left: 25px;
}
/* 设置调查问卷悬停样式 */
#logo-box>a:hover{
color: rgb(211, 73, 70);
text-decoration: underline;
}
/* ----------------------------放隐私政策部分---------------------------- */
#privacy-box{
height: 40px;
background-color: rgb(255, 248, 241);
}
#privacy-box>p{
font-size: 12px;
color:rgb(170, 170, 170) ;
/* 水平方向居中 */
text-align: center;
/* 垂直方向居中 */
/* height: 40px; */
line-height:40px ;
}
/* 警告图片垂直居中 */
#privacy-box img{
vertical-align: middle;
}
#privacy-box a{
text-decoration: none;
color: rgb(51, 51, 51);
}
#privacy-box a:hover{
text-decoration: underline;
}
四、中间部分css代码
#middle-box{
/* 设置背景图 */
background: url("../img/bg.png") no-repeat left center rgb(221, 46, 19);
position: relative;
}
/* 设置登录信息框 */
#middle-box>div{
width: 345px;
height: 400px;
background-color: white;
position: absolute;
right: 225px;
top: 10px;
}
/* ------------放按钮的盒子------------------ */
#btn-box{
height: 90px;
}
/* -------------上面的提示信息部分------------- */
#btn-box>p{
height: 40px;
background-color: rgb(255, 248, 240);
color: rgb(170, 170, 170);
font-size: 12px;
text-align: center;
line-height: 40px;
}
/* 警示图标 */
#btn-box img{
vertical-align: middle;
}
/* ----------------下面按钮部分-------------------- */
#btn-box>div{
height: 50px;
}
/* ----------------登录方式选择部分------------------- */
#btn-box button{
border: none;
background-color: rgba(0, 0, 0, 0);
width: 165px;
height: 50px;
font-size: 18px;
color: rgb(102, 102, 102);
font-weight: 400;
}
#btn-box>div>button:nth-child(3){
color: rgb(221, 46, 19);
}
#btn-box span{
color: rgb(250, 250, 250);
font-size: 20px;
font-weight: 300;
}
/* --------------放各种登录信息的盒子-------------- */
#message-box{
height: 255px;
border-top: 1px solid rgb(245, 245, 245);
border-bottom: 1px solid rgb(245, 245, 245);
position: relative;
}
/*----------------- 账号和密码输入框 --------------- */
#message-box>div{
width: 305px;
height: 38px;
margin-left: 20px;
border: 1px solid rgb(190, 190, 190);
margin-top: 32px;
}
/* 单独设置第二个输入框和第一个输入框之间的距离 */
#message-box>div:nth-child(2){
margin-top: 20px;
}
/* 设置两个图标的大小 */
#message-box img{
width: 38px;
height: 38px;
border-right:1px solid rgb(190, 190, 190) ;
}
#message-box input{
height: 37px;
width: 250px;
/* 设置上对齐 */
vertical-align: top;
/* 去掉输入框边框 */
border: none;
/* 去掉输入框点击时的样式 */
outline: none;
font-size: 14px;
}
/* -------------------忘记密码部分-------------- */
#message-box>a{
position: absolute;
right: 20px;
margin-top: 23px;
color: rgb(109, 109, 109);
font-size: 12px;
text-decoration: none;
}
#message-box>a:hover{
text-decoration: underline;
color: rgb(221, 46, 19);
}
/* ----------------登录按钮部分----------------- */
#message-box>button{
position: absolute;
left: 20px;
bottom: 30px;
width: 305px;
height: 35px;
background-color: rgb(221, 46, 19);
color: white;
font-size: 20px;
border: none;
/* 设置字间距 不能居中对齐 */
/* letter-spacing: 25px; */
}
/* ---------------放第三方登录信息的盒子---------------- */
#third-party-box{
height: 50px;
line-height: 50px;
position: relative;
}
#qq,#weixin{
color: rgb(109, 109, 109);
font-size: 13px;
text-decoration: none;
padding-left: 27px;
}
#qq{
margin-left: 20px;
background: url("../img/qq.png") no-repeat left center;
}
#qq:hover,#weixin:hover{
color: rgb(221, 46, 19);
text-decoration: underline;
}
#weixin{
background: url("../img/weixin.png") no-repeat left center;
}
#third-party-box>span{
color: rgb(204, 204, 204);
font-size: 10px;
margin-left: 5px;
margin-right: 3px;
}
/* 注册按钮 */
#register{
position: absolute;
right: 20px;
font-size: 14px;
text-decoration: none;
color: rgb(189, 49, 48);
background: url("../img/right.png") no-repeat left center;
padding-left: 27px;
}
#register:hover{
text-decoration: underline;
}
五、底部部分css代码
#bottom-box>div{
height: 50px;
line-height: 50px;
text-align: center;
}
#bottom-box a{
color: rgb(105, 105, 105);
font-size: 12px;
text-decoration: none;
}
#bottom-box a:hover{
text-decoration: underline;
color: rgb(229, 56, 60);
}
#bottom-box span{
color: rgb(105, 105, 105);
font-size: 12px;
margin-left: 8px;
margin-right: 8px;
}
#bottom-box>p{
color: rgb(105, 105, 105);
font-size: 12px;
text-align: center;
}
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgeiiia
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01