仿京东登录css代码:
* {
margin: 0px;
padding: 0px;
}
header {
width: 300px;
margin: 10px 0;
height: 60px;
}
img {
display: block;
width: 150px;
margin-left: 135px;
}
.logo {
position: absolute;
left: 70px;
}
b {
display: block;
width: 110px;
height: 40px;
position: absolute;
left: 370px;
top: 20px;
font-size: 25px;
font-weight: 400;
color: gray;
}
.warp {
background: url(../img/banner.png)no-repeat;
height: 550px;
margin-left: 200px;
}
.article {
background-color: #E93854;
}
.logo-form {
position: relative;
z-index: 4;
background: white;
overflow: visible;
width: 300px;
height: 260px;
margin-top: 15px;
}
.warp .logo-form {
float: right;
top: 30px;
right: 245px;
}
.logo-tab {
margin-left: 15px;
margin-top: 15px;
display: inline-block;
}
.h2 {
font-size: 17px;
font-family: "微软雅黑";
font-weight: 300;
color: gray;
}
.span {
display: inline-block;
margin-left: 125px;
background-image: url(../img/icon5.jpg);
background-repeat: no-repeat;
text-indent: 2em;
color: #C11A1A;
font-family: "微软雅黑";
font-size: 13px;
text-indent: 1.5em;
}
.form {
z-index: 6;
}
table {
float: none;
}
.table1 {
position: absolute;
z-index: 3;
top: 55px;
left: 16px;
width: 38px;
height: 38px;
border: 1px solid #bdbdbd;
background: url(../img/icon1.jpg);
}
.input1 {
line-height: 16px;
height: 16px;
border: 0;
float: none;
width: 220px;
overflow: hidden;
font-size: 13px;
font-family: "微软雅黑";
border: 1px solid #BDBDBD;
padding: 10px 0 10px 15px;
position: absolute;
top: 55px;
left: 45px;
}
.table2 {
position: absolute;
z-index: 3;
top: 115px;
left: 16px;
width: 38px;
height: 38px;
border: 1px solid #bdbdbd;
background: url(../img/icon2.jpg);
}
.input2 {
line-height: 16px;
height: 16px;
border: 0;
float: none;
width: 220px;
overflow: hidden;
font-size: 13px;
font-family: "微软雅黑";
border: 1px solid #BDBDBD;
padding: 10px 0 10px 15px;
position: absolute;
top: 115px;
left: 45px;
}
.char {
z-index: 3;
position: absolute;
top: 172px;
left: 17px;
font-family: "微软雅黑";
font-size: 11px;
color: gray;
}
.box {
line-height: normal;
height: 11px;
margin-right: 5px;
border: 1px solid #f5b34f;
border-radius: 5px;
}
.a {
text-decoration: none;
color: gray;
}
.span1 {
margin-left: 150px;
left: 150px;
}
.a:hover {
color: red;
text-decoration: underline;
}
.div-box {
border: 1px solid #E4393C;
position: absolute;
top: 203px;
left: 16px;
height: 35px;
width: 265px;
}
.new {
background: #E4393C;
display: block;
width: 265px;
height: 35px;
line-height: 35px;
color: white;
font-size: 16px;
font-family: "微软雅黑";
text-align: center;
text-decoration: none;
}
.new:hover {
background: #FF716C;
}
footer {
width: 100%;
margin: 0 auto;
}
#id {
padding-bottom: 30px;
text-align: center;
}
ul li {
font-size: 12px;
margin-top: 25px;
list-style-type: none;
display: inline-block;
color: gray;
}
a {
text-decoration: none;
color: gray;
}
i {
margin-left: 8px;
margin-right: 8px;
}
ul li a:hover {
color: red;
}
.copyright {
margin: 8px 0;
font-size: 12px;
color: gray;
font-family: "微软雅黑";
}
HTML页面代码:
仿京东页面
欢迎登录
效果如下:
扫一扫
513
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
