目录
css代码
.logo {
width: 170px;
height: 60px;
}
.w {
width: 990px;
margin: 0 auto;
}
.left {
height: 60px;
margin-bottom: 20px;
}
.welcome {
font-size: 25px;
margin-left: 20px;
}
.message {
background-color: rgb(255, 248, 240);
}
.protect {
font-size: 12px;
color: rgb(154, 155, 177);
}
.middle {
background-color: rgb(76, 0, 134);
}
.main {
/* width: 990px; */
height: 475px;
background-image: url(./image/bj.jpg);
}
form {
width: 300px;
height: 400px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
background-color: white;
float: right;
margin: 20px 0px;
}
.r-top {
margin-top: 5px;
text-align: right;
}
.r-top>img {
width: 50px;
/* height: 30px; */
}
h3 {
display: inline-block;
}
.input {
width: 220px;
height: 34px;
border: 1px solid rgb(221, 221, 221);
border-top-right-radius: 5px;
border-top-left-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
margin-left: 40px;
}
.btn {
width: 220px;
height: 34px;
border: none;
/* border: 1px solid rgb(221, 221, 221); */
border-top-right-radius: 5px;
border-top-left-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
background-color: rgb(253, 157, 148);
outline: none;
color: white;
}
p {
text-align: center;
}
.ipt,
.pw {
height: 32px;
width: 200px;
/* border: 1px solid rgb(226, 226, 226); */
outline: none;
border: none;
}
.mima {
text-align: right;
padding-right: 40px;
}
.mima>a {
color: rgb(151, 151, 151);
font-size: 14px;
text-decoration: none;
}
.mima>a:hover {
border-bottom: 1px solid rgb(228, 57, 60);
color: rgb(228, 57, 60);
}
.m-password {
color: rgb(250, 44, 25);
margin-left: 30px;
}
.duanxin {
color: rgb(102, 114, 139);
margin-left: 15px;
font-weight: 300;
}
.first {
margin-bottom: -10px;
}
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
font-size: 20px;
}
span {
font-size: 14px;
color: rgb(116, 111, 102);
}
.liji {
text-decoration: none;
color: rgb(116, 111, 102);
font-size: 14px;
margin-left: 60px;
}
.liji:hover {
border-bottom: 1px solid rgb(116, 111, 102);
}
svg {
margin-left: 20px;
}
form>p:nth-last-of-type(1) {
background-color: rgb(246, 246, 246);
height: 40px;
line-height: 40px;
}
.footer>ul {
/* margin-left:70px; */
text-align: center;
height: 30px;
}
.footer>ul>li {
float: left;
list-style: none;
}
.footer>ul>li>a {
text-decoration: none;
font-size: 12px;
color: black;
padding: 0px 10px;
}
.footer>p {
text-align: center;
font-size: 12px;
}
.footer>ul>li>a:hover {
color: red;
border-bottom: 1px solid red;
}
.top {
font-size: 12px;
color: rgb(255, 134, 13);
text-align: center;
height: 20px;
line-height: 20px;
/* background-color: rgb(255, 248, 240); */
}
html代码
<body>
<div class="left w">
<img src="./image/log.png" alt="" class="logo">
<span class="welcome">欢迎登录</span>
</div>
<div class="message">
<p class=" protect w">依据《网络安全法》,为保障您的账户安全和正常使用,请尽快完成手机号验证!新版《京东隐私政策》已上线,将更有利
J于保护您的个人隐私。</p>
</div>
<div class="middle">
<div class="main w">
<form action="">
<div class="top">
京东不会以任何理由要求您转账,谨防诈骗
</div>
<div class="r-top">
<img src="./image/r.png" alt="">
</div>
<div class="first">
<h3 class="m-password">密码登录</h3>
<h3 class="duanxin">短信登录</h3>
</div>
<p class="input">
<input type="text" class="ipt" placeholder="邮箱/账号名/登录手机">
</p>
<p class="input">
<input type="password" placeholder="密码" class="pw">
</p>
<p class="mima">
<a href="">忘记密码</a>
</p>
<p>
<input type="button" value="登录" class="btn">
</p>
<p>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-qq"></use>
</svg>
<span>QQ</span>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-weixin"></use>
</svg>
<span>微信</span>
<a href="" class="liji">立即注册</a>
</p>
</form>
</div>
</div>
<div class="footer w">
<ul>
<li><a href="">关于我们</a></li>
<li><a href="">联系我们</a></li>
<li><a href="">|</a></li>
<li><a href="">人才招聘</a></li>
<li><a href="">|</a></li>
<li><a href="">商家入驻</a></li>
<li><a href="">|</a></li>
<li><a href="">广告服务</a></li>
<li><a href="">|</a></li>
<li><a href="">手机京东</a></li>
<li><a href="">|</a></li>
<li><a href="">友情链接</a></li>
<li><a href="">|</a></li>
<li><a href="">销售联盟</a></li>
<li><a href="">|</a></li>
<li><a href="">京东社区</a></li>
<li><a href="">|</a></li>
<li><a href="">京东公益</a></li>
</ul>
<p>
Copyright 2004-2023京东JD.com版权所有
</p>
</div>
</body>