问题还是没有解决
提问了2次，不管是导航栏还是表单，问题都没有解决
导航栏移到imooc上整个都不见了
表单对其没必要新设一个类啊，我下面写了form>p>span:nth-child(2)，而且使用老师的代码效果也不满意，姓名的名不能靠右，证件类型的对其也是歪的。能给个好一点的办法吗
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="registry"> <!-- 导航栏 --> <header> <div class="header_wrap"> <div class="header_logo">高铁客户服务中心<span> | </span><span>客户服务</span></div> <nav> <span>意见反馈</span> <a href="#">163.com</a> <span>您好，请</span> <a href="#">登录</a> <span></span> <a href="#">注册</a> <div class="menu"> <span>我的IMOOC</span> <ul class="menu-list"> <li>我的账户</li> <li>已完成订单（改/退）</li> <li>我的保险</li> <li>查看个人信息</li> <li>账户安全</li> <li>常用联系人</li> <li>重点旅客预约</li> <li>遗失物品查找</li> </ul> </div> <div class="arrow"></div> </nav> <div class="phone"> <a href="#">手机版</a> </div> </div> </header> <!-- 表单栏 --> <div class="content"> <h2>您现在的位置：<span>客运首页 > 注册</span></h2> <form action=""> <h2>账户信息</h2> <P><span>*</span><span>用户名：</span> <input type="text" id="userName" placeholder="用户名设置成功后不可更改"> <span class="prompt"></span></P> <P><span>*</span><span>登录密码：</span> <input type="password" placeholder="6-20位字母、数字或符号"> <span class="prompt"></span></P> <P><span>*</span><span>确认密码：</span> <input type="password" placeholder="再次输入您的登录密码"> <span class="prompt"></span></P> <P><span>*</span><span>姓名：</span> <input type="text" placeholder="请输入姓名"> <span><a href="#">姓名填写规则</a></span></P> <P><span>*</span><span>证件类型：</span><select name="credit" id="credit"> <option value="二代身份证">二代身份证</option></select> <span class="prompt"></span></P> <P><span>*</span><span>证件号码：</span><input type="text" placeholder="请输入您的证件号码"> <span class="prompt"></span></P> <P><span></span><span>邮箱：</span><input type="email" placeholder="请正确填写邮箱地址"> <span class="prompt"></span></P> <P><span>*</span><span>手机号码：</span><input type="text" placeholder="请输入您的手机号码"> <span class="prompt"></span></P> <P><span>*</span><span>旅客类型：</span><select name="people" id="people"><option value="成人">成人</option></select> <span class="prompt"></span></P> <p><input type="checkbox">我已阅读并同意遵守 <a href="">《中国铁路客户服务中心网站服务条款》</a></p> <input type="submit" id="sub" value="下一步"> </form> </div> <!-- 页脚 --> <footer> <p>关于我们 | 网站声明</p> <p>Copyright © 2017 imooc.com All Rights Reserved | 京ICP备 13046642号-2</p> </footer> </div> <script type="text/javascript" src="js/script.js"></script> </body> </html>
*{
margin:0;
padding: 0;
}
a{
text-decoration: none;
color: #000;
}
.registry{
width: 100%;
height:120px ;
font-family: "Microsoft Yahei";
}
/* 导航栏 */
header{
position: relative;
background: #efefef;
border-bottom:#2487c9 2px solid;
}
.header_wrap{
position: relative;
width: 1260px;
height: 120px;
margin: 0 auto;
}
.header_logo{
position: absolute;
display: inline-block;
width: 460px;
height: 100px;
background: url(../img/logo.png) left center no-repeat;
line-height: 100px;
font-size: 24px;
text-indent: 120px;
top:10px;
}
.header_logo>span:first-child{
font-size:28px;
font-weight: bolder;
}
.header_logo>span:last-child{
font-size:20px;
color:#66667b;
}
.header_logo>a:nth-child(2),.header_logo>a:nth-child(2){
color:#fb7403;
}
/* 导航条 */
nav{
position: absolute;
right:100px;
font-size: 16px;
line-height: 120px;
}
nav>a:nth-child(2),nav>a:nth-child(4){
color:#fb7403;
padding: 10px;
}
.menu{
display: inline-block;
}
.menu-list{
display: none;
}
.menu-list li{
color: #000;
}
.menu:hover .menu-list{
display:block;
}
/* 小箭头 */
.arrow{
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 20px 20px 20px 20px;
border-color: #000 transparent transparent transparent;
}
.phone{
position: absolute;
right:0px;
display: inline-block;
width: 76px;
height: 24px;
margin: 0 auto;
background: url(../img/未标题-1.png) left no-repeat;
background-size:auto 100%;
top:48px;
text-indent: 24px;
}
/* 表单栏 */
.content{
height: 800px;
width: 1260px;
background: #fff;
position: relative;
margin: 0 auto;
}
.content>h2{
font-size:18px;
line-height: 45px;
}
.content>h2>span{
font-size:18px;
color:#636363;
font-weight: lighter;
}
form{
width:1256px;
height: 630px;
border:#fb7403 solid 2px;
border-radius: 10px;
}
form>h2{
font-size: 20px;
line-height: 40px;
background: #fb7403;
border:#fb7403 solid 2px;
border-radius: 5px;
color:#fff;
text-indent: 18px;
}
form>p{
font-size: 14px;
line-height: 20px;
text-align: center;
margin: 16px 0;
}
form>p:first-of-type{
margin-top: 54px;
}
/* 设置各段文本长度，目的对其居中 */
form>p>span:nth-child(1){
color: red;
display: inline-block;
width: 80px;
text-align: right;
}
form>p>span:nth-child(2){
display: inline-block;
width: 100px;
text-align: right;
text-align-last: justify;
}
form>p>span:last-child{
display: inline-block;
width: 390px;
text-align: left;
}
form input,form select{
display: inline-block;
width: 210px;
}
/* 我已阅读并同意遵守 */
form>p:last-child{
font-size: 20px;
line-height: 20px;
}
input[type=checkbox]{
width: auto;
}
/* 下一步 */
input[type=submit]{
width: 230px;
height:38px;
color:#fff;
background:#fb7403;
border: none;
border-radius: 5px;
margin-top: 64px;
margin-left: 413px;
}
/* 页脚 */
footer{
color:#a19999;
text-align: center;
height: 100px;
width: 100%;
background: #dcdcdc;
border-top:#2487c9 2px solid;
padding-top: 20px;
}
footer>p{
font-size: 16px;
line-height:25px;
}
正在回答 回答被采纳积分+1
第一次提问的问题：https://class.imooc.com/course/qadetail/183128
第二次提问的问题：https://class.imooc.com/course/qadetail/183351
两次提问都没有解决问题啊，麻烦老师再看下我的代码
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星