有几个问题，请教老师
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<header class="had">
<ul class="left">
<li><img src="image/logo.png"></li>
<li>慕课高铁客户服务中心 |</li>
<li>客户服务</li>
</ul>
<ul class="right">
<li>意见反馈</li>
<li><a href="#">imooc@com</a></li>
<li>您好，请</li>
<li><a href="#">登录</a> |</li>
<li>注册</li>
<li><a href="#">我的IMOOC</a><span class="arrow"></span>
<ul class="two">
<li>未完成订单</li>
<li>已完成订单（改/退）</li>
<li>我的保险</li>
<li>查看个人信息</li>
<li>账户安全</li>
<li>常用联系人</li>
<li>重点旅客预约</li>
<li>遗失物品查找</li>
<li>服务查询</li>
<li>投诉</li>
<li>建议</li>
</ul>
</li>
<li><img src="image/iphone.png"></li>
<li>手机版</li>
</ul>
</header>
<!-- 主体部分 -->
<div class="main">
<h3>您现在的位置<span> : 客运首页 > 注册</span></h3>
<div class="meun-main">
<div class="box1">账户信息</div>
<p><label><b>*</b><span>用户名：</span></label><input type="text" placeholder="用户名设置成功后不可修改"><span class="span1">6-30位字母、数字或“-”，字母开头</span></p>
<p><label><b>*</b><span>登录密码：</span></label><input type="password" placeholder="6-20位字母、数字或符号"><span class="red"></span><span class="green"></span><span class="blue"></span></p>
<p><label><b>*</b><span>确认密码：</span></label><input type="password" placeholder="在此输入您的登录密码"><span class="span1">6-30位字母、数字或“-”，字母开头</span></p>
<p><label><b>*</b><span>姓名：</span></label><input type="text" placeholder="请输入姓名"><span class="span1 specail">姓名填写规则</span></p>
<div id="div1">
<p>1.确认姓名中生僻字无法输入时，可用生僻字拼音或同音字替代</p>
<p>2.输入姓名保存后，遇有系统无法正确显示的汉字，可用该汉字的拼音或同音字重新修改后保存。</p>
<p>3.姓名中有繁体字无法输入时，可用简体替代。</p>
<p>4.姓名较长，汉字与英文字符合计超过30个（1个汉字算2个字符）的，需按姓名中第一个汉字或英文字符开始按顺序连续输入30个字符（空格字符不输入），其中英文字符输入时不区别大小写</p>
</div>
<p><label><b>*</b><span>证件类型：</span></label>
<select>
<option checked="checked">二代身份证</option>
<option>护照</option>
<option>港澳台通行证</option>
</select></p>
<p><label><b>*</b><span>证件号码：</span></label><input type="text" placeholder="请输入您的证件号码"><span class="span1"></span></p>
<p><label><b>*</b><span>邮箱：</span></label><input type="text" placeholder="请正确填写邮箱地址"><span class="span1"></span></p>
<p><label><b>*</b><span>手机号码：</span></label><input type="text" placeholder="请输入您的手机号码"><span class="span1">请正确填写手机号码稍后将向该手机号码发送短信</span></p>
<p><label><b>*</b><span>旅客类型：</span></label><select>
<option checked=checked>成人</option>
<option>学生</option>
<option>残疾人</option>
<option>军人</option>
</select></p>
<p><input type="checkbox">我已阅读并同意遵守 <span class="span2"><<中国铁路客户服务中心网站服务条款>></span></p><br>
<input type="button" value="下一步" id="btn">
</div>
</div>
<footer class="foot">
<p>关于我们 | 网站声明</p>
<p>Copyright © 2017 imooc.com All Rights Reserved | 京ICP备 13046642号-2</p>
</footer>
</body>
</html>
*{
padding: 0px;
margin:0px;
}
a{
text-decoration: none;
color:orange;
}
/*导航项*/
.had{
width: 100%;
height: 130px;
background-color:#c1c1c1;
border-bottom:2px solid rgb(36,135,201);
font-family: "Microsoft YaHei";
}
.left{
float: left;
margin-left: 100px;
cursor: pointer;
}
.left li{
float: left;
display: block;
line-height: 130px;
text-align: center;
margin-left: 5px;
}
.left li:nth-child(1){
margin-top: 10px;
}
.left li:nth-child(2){
font-size: 25px;
}
.left li:nth-child(3){
color: gray;
}
.right{
float: right;
margin-right: 100px;
cursor:pointer;
}
.right li:nth-child(1){
margin-left:10px;
}
.right li img{
margin-top: 22px;
transform: scale(.5);
}
.right li{
display: block;
float: left;
line-height: 130px;
text-align: center;
margin-left:5px;
}
.right li:nth-child(6){
position: relative;
}
.right li:nth-child(6) .arrow{
display: inline-block;
height: 0px;
width: 0px;
border-top: 10px solid black;
border-right: 10px solid transparent ;
border-left: 10px solid transparent ;
}
/*二级菜单*/
.right li:nth-child(6) .two {
position: absolute;
top: 100px;
color: gray;
border: 1px solid rgb(251,116,3);
height: 341px;
width: 210px;
z-index: 1;
display: none;
}
.right li:nth-child(6) .two:hover{
display: block;
}
.right li:nth-child(6) .two li{
list-style: none;
width: 200px;
height: 30px;
line-height: 30px;
text-align: center;
}
.right li:nth-child(6) .two li:nth-child(2){
border-bottom: 1px dashed gray;
}
.right li:nth-child(6) .two li:nth-child(3){
border-bottom: 1px dashed gray;
}
.right li:nth-child(6) .two li:nth-child(5){
border-bottom: 1px dashed gray;
}
.right li:nth-child(6) .two li:nth-child(6){
border-bottom: 1px dashed gray;
}
.right li:nth-child(6) .two li:nth-child(8){
border-bottom: 1px dashed gray;
}
.right li:nth-child(6) .two li:nth-child(9){
border-bottom: 1px dashed gray;
}
.right li:nth-child(7){
margin-left:30px;
}
.right li:nth-child(8){
margin-left: 0px;
}
/*主体部分*/
.main{
width: 1200px;
margin:0 auto;
}
.main>h3{
margin-left: 100px
margin-bottom: 10px;
font-size: 20px;
}
.main span{
color: gray;
}
.main .meun-main{
width: 1000px;
margin:0 auto;
border:1px solid rgb(251,116,3);
margin-left: 100px;
border-radius: 5px 5px 0px 0px;
position: relative;
}
.main .meun-main .box1{
height: 50px;
line-height: 50px;
padding-left:30px;
background:rgb(251,116,3);
border-radius: 5px;
color: white ;
font-size: 20px;
}
.main .meun-main p{
width: 650px;
margin:0 auto;
height: 40px;
line-height: 40px;
margin-left: 300px;
}
.main .meun-main p:nth-child(2){
margin-top:50px;
}
.main .meun-main p:nth-child(3) .red{
display: block;
width: 40px;
height: 10px;
background: red;
}
.main .meun-main p:nth-child(12){
margin-left: 450px;
}
.main .meun-main p:nth-child(12) .span2{
color:blue;
}
.main .meun-main p>label{
width: 50px;
text-align: right;
}
.main .meun-main p>label>b{
color: red;
margin-right:5px;
}
.main .meun-main p>label>span{
display: inline-block;
width: 80px;
text-align-last: justify;
color:block;
}
.main .meun-main .span1{
margin-left:10px;
color: rgb(251,116,3)
}
.main .meun-main .specail{
text-decoration-line: underline;
}
.main .meun-main #div1{
position: absolute;
top:250px;
left:250px;
width: 300px;
height: 400px;
background: gray;
}
.main .meun-main #div1 p{
display: inline-block;
height: 30px;
}
.main .meun-main #btn{
margin-top: 30px;
margin-bottom: 30px;
margin-left: 480px;
width: 200px;
height: 30px;
line-height: 30px;
text-align: center;
background-color:rgb(251,116,3);
}
/*尾部*/
.foot{
background:#c1c1c1;
width: 100%;
height: 100px;
margin-top: 100px;
border-top:2px solid rgb(36,135,201);
}
.foot p{
height: 45px;
line-height: 45px;
text-align: center;
color: gray;
font-size: 20px;
}
第一主体部分的<h3>在设置时哪里错了，设置了感觉不对
第二主体部分的密码强度那一块的设置
第三主体姓名规则哪里为啥定位之后设置的也不对
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星