前端每日一小练2---京东注册页面（无JS验证）

来源：互联网发布：java ftp多线程编辑：程序博客网时间：2024/06/05 09:36

今天的demo主要涉及了以下几个小知识点：

1.使用label标签来对input标签进行文字提示以及对齐的方式；

2.使用position定位元素的位置；

3.使用css属性中的display，使得inline元素变成inline-block，具备inline和block的特性，

让inline可以设置宽度和高度。

本demo的页面结构代码：

        <div class="nav">导航链接部分</div><div class="topic"><img src="img/jd_logo.png"/><img src="img/welcome.png"/></div><form class="content" action="" method="post"><div class="reg"><label for="user_name"><span>*</span>用户名：</label><input type="text" id="user_name"/><span>4-20位字母、数字、汉字及'-'、'_'组合</span></div><div class="reg"><label for="user_pwd"><span>*</span>密码：</label><input type="password" id="user_pwd"/><span>6-20位字符，建议字母、数字和符号</span></div><div class="reg"><label for="user_pwded"><span>*</span>请确认密码：</label><input type="password" id="user_pwded"/><span>请再次输入密码</span></div><div class="reg"><label for="user_phone"><span>*</span>验证手机：</label><input type="text" id="user_phone"/><span>完成验证后，可以使用该手机找回</span></div><div class="reg"><label for="user_sns"><span>*</span>短信验证码：</label><input type="text" id="user_sns" style="width:110px;"/><span>获取短信验证码</span></div><div class="bottom"><input type="radio"/>我已同意并阅读<a href="#">《京东用户注册协议》</a><button></button></div><div class="right"></div></form>

demo的CSS样式：

*{/*通用选择器，清楚所有元素的margin和padding*/margin:0;padding:0;}body{background-color:#f2f2f2;font-size:12px;}.nav{/*导航栏部分*/height:25px;width:100%;background-color:#fafafa;position:fixed;border-bottom:1px solid #eee;}.topic,.content{width:842px;margin:0px auto;}.topic{padding-top:26px;}.topic img{margin-top:17px;}.content{/*表单区域的CSS样式*/margin-top:39px;background-color:#fff;position:relative;padding:5px;}.content .right{width:180px;height:180px;background:url(img/reg_phone.jpg) no-repeat;position:absolute;top:34px;left:659px;}.reg{margin-top:27px;}.reg label{display:inline-block;width:157px;text-align:right;}.reg label span{color:red;}.reg input{border:1px solid #ccc;display:inline-block;width:228px;height:30px;}.reg>span{line-height:30px;border:1px solid #ddd;padding:10px 4px;background-color:#f7f7f7;}#user_name{background:url(img/user.jpg) no-repeat  210px center;}#user_pwd,#user_pwded{background:url(img/pwd.jpg) no-repeat  210px center;}#user_phone{background:url(img/phone.jpg) no-repeat  210px center;}.bottom{width:230px;margin:40px auto;}.bottom button{width:270px;height:36px;margin-top:39px;background:url(img/regist_btn.jpg) no-repeat;}.bottom button:hover{background:url(img/regist_btn_hove.jpg) no-repeat;}.bottom a{text-decoration:none;}

运行效果截图：

0 0