本文介绍了如何使用HTML和CSS模仿京东网的登录页面，包括顶部布局、提示文字和登录表单的设计。通过CSS样式设置，实现了背景、字体、颜色和布局的细节，提供了完整的代码示例。
Copyright © 2004-2020 京东JD.com 版权所有
CSS：
*{
margin: 0;
padding: 0;
}
/* 页面的外层 */
#warp{
width: 100vw;
height: 100vh;
}
/* —————顶部————— */
#top{
margin: 0 auto;
width: 1500px;
height: 80px;
background-color: white;
display: flex;
justify-content: space-around;
}
/* 顶部左边 */
.top-left{
margin: 10px 50px 0px 0px;
}
/* 顶部右边边 */
.top-right a{
position: relative;
color: #999;
float: right;
top: 52px;
line-height: 20px;
text-decoration: none;
font-size: 12px;
}
.top-right a:hover{
color: #E4393C;
text-decoration: underline;
}
/* —————顶部下面的提示文字————— */
.cont-wrapper{
background: #fff8f0;
width: 100%;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
}
.cont-wrapper img{
width: 17px;
height: 17px;
align-items: center;
}
.cont-wrapper p{
vertical-align: middle;
color: #999;
font-size: 12px;
display: inline-block;
}
.cont-wrapper a{
color: #333;
text-decoration: none;
}
.cont-wrapper a:hover{
text-decoration: underline;
}
/* —————中间表单部分————— */
#content{
/* width: 1200px; */
height: 450px;
margin: 0 auto;
background-color: #c4893b;
overflow: hidden;
}
/* 中间内容
最低0.47元/天 解锁文章
1304
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
