问题还是没有解决
提问了2次,不管是导航栏还是表单,问题都没有解决
导航栏移到imooc上整个都不见了
表单对其没必要新设一个类啊,我下面写了form>p>span:nth-child(2),而且使用老师的代码效果也不满意,姓名的名不能靠右,证件类型的对其也是歪的。能给个好一点的办法吗
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | <!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积分~
来为老师/同学的回答评分吧