cssday3homework

最新推荐文章于 2023-12-21 14:12:17 发布

MATATOP

最新推荐文章于 2023-12-21 14:12:17 发布

阅读量197

点赞数 1

分类专栏： practice

本文链接：https://blog.csdn.net/Saranghae_Lcx/article/details/78457077

版权

practice 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Author" content="梁彩霞">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>jd</title>
<link href="jd.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="navi">导航链接部分</div>
<div id="header">
<img src="Images/jd_logo.png"/>
<img src="Images/1.png" class="welcome"/>
</div>
<div id="tabs">页签部分</div>
<div id="content">
<div class="line">
<span class="text"><b>*</b>用户名：</span>
<span class="ipt"><input class="kuang1 user"></span>
<span class="dsp">4-20位字母、数字、汉字及‘-’、‘_’组合</span>
</div>
<div class="line">
<span class="text"><b>*</b>密码：</span>
<span class="ipt"><input class="kuang1 psw" type="password"></span>
<span class="dsp">4-20位字母、数字、汉字及‘-’、‘_’组合</span>
</div>
<div class="line">
<span class="text"><b>*</b>请确认密码：</span>
<span class="ipt"><input class="kuang1 psw" type="password"></span>
<span class="dsp">请再次输入密码</span>
</div>
<div class="line">
<span class="text"><b>*</b>验证手机：</span>
<span class="ipt"><input class="kuang1" type="text"></span>
<span class="dsp">完成验证后，可以使用该手机找回</span>
</div>
<div class="line">
<span class="text"><b>*</b>短信验证码：</span>
<span class="ipt"><input class="kuang2" />
<input type="button" class="an" value="获得短信验证码"/>
</span>
<span></span>
</div>
<div class="line">
<span class="text"></span>
<span class="zhuce"><input type="checkbox" id="xy"><label for="xy">我已同意并阅读<a href="#" class="zcxy"><<京东用户注册协议>></label></a></span>
<span></span>
</div>
<div class="line">
<span class="text"></span>
<span class="liji"><a href="#" ><img src="Images/regist_btn.jpg"></a></span>
<span></span>
</div>
</div>
<div id="footer">页脚部分</div>
</body>

</html>

body{
font-size:12px;
color:#333;
background-color:#f2f2f2;
font-family:Arial,sans-serif;
}
*{
margin:0;
padding:0;
list-style:none;
}
#navi{
width:100%;
height:30px;
border-bottom:1px solid #eee;
background-color:#FAFAFA;
line-height:30px;
}
#tabs,#header,#content,#footer{
width:990px;
margin:0 auto;
}
#tabs{
height:33px;
line-height:33px;
}
#header{
padding:10px 0px;
}
.welcome{
border-left:1px solid #ddd;
}
#content{
padding-top:30px;
padding-bottom:20px;
border:1px solid #ddd;
border-top:none;
background:url(Images/reg_phone.jpg) no-repeat 770px 40px #fff;
height:450px;
}
.line{
width:750px;
height:60px;
padding-top:9px;
}
.line span{
float:left;
height:34px;
line-height:34px;
}
span.text{
width:190px;
text-align:right;
font-size:14px;
color:#999;
padding-right:10px;
}
.text b{
color:red;
margin-right:3px;
}
.kuang1{
width:238px;
height:16px;
color:#999;
padding:10px 25px 10px 5px;
border:1px solid #ccc;
background-position:248px center;
background-repeat:no-repeat;
}
.kuang1:focus{
border-color:#7abd54;
outline:none;
}
input.user{
background-image:url(Images/3.png);
}
.dsp{
background-color:#f7f7f7;
border:1px solid #ddd;
width:238px;
line-height:34px;
padding:1px 5px;
margin-left:5px;
}
.psw{
background-image:url(Images/4.png);
}
.kuang2{
width:116px;
height:16px;
color:#999;
padding:10px 25px 10px 5px;
border:1px solid #ccc;
background-position:248px center;
background-repeat:no-repeat;
}
.an{
width:116px;
height:34px;
background-color:#f7f7f7;
border:1px solid #ddd;
}
.zhuce{
line-height:34px;
padding:10px 5px;
}
.zcxy{
text:#005aa0;
margin-left:5px;
text-decoration:none;
}
span a:hover{
text-decoration:underline;
}
.liji{
border:none;
width:270px;
height:36px;
}
.liji:hover{
background-image:url(Images/regist_btn_hove.jpg)
}

MATATOP

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
cssday3homework

jd 导航链接部分页签部分 *用户名：4-20位字母、数字、汉字及‘-’、‘_’组合 *密码：4-20位字母、数字、汉字及‘-’、‘_’组合 *请确认密码：请再次输入密码 *验证手机：完成验证后，可以使用该手机找回 *短
复制链接

扫一扫