麻烦老师检查
来源：3-10 作业题
慕婉清6323512
2020-10-10 22:42:24
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JS表单验证</title> <link rel="stylesheet" type="text/css" href="index.css"> </head> <body> <!--头部区域--> <body> <!-- 头部 --> <header> <div class="header__wrap"> <div class="header__logo"> 慕课高铁客户服务中心 <strong>|</strong> <span class="header__logo__client">客户服务</span> </div> <nav class="header__nav"> <ul class="header__nav-list"> <li class="header__nav-list__item"> <span>意见反馈 </span> <a href="#" class="header__nav-list__item_orange">imooc@.com</a> </li> <li class="header__nav-list__item"> 您好,请 <a href="#" class="header__nav-list__item_orange">登录</a> | <a href="#">注册</a> </li> <li class="header__nav-list__item header__nav-list__imooc"> <span>我的IMOOC</span> <div class="header__nav-list__imooc__triangle"></div> <div class="header__nav-list__imooc__menu"> <ul class="header__nav-list__imooc__menu__list"> <li class="header__nav-list__imooc__menu__list__item"> <a href="#">未完成订单</a><br/> <a href="#">已完成订单(改/退)</a> </li> <li class="header__nav-list__imooc__menu__list__item"> <a href="#">我的保险</a> </li> <li class="header__nav-list__imooc__menu__list__item"> <a href="#">查看个人信息</a><br/> <a href="#">账户安全</a> </li> <li class="header__nav-list__imooc__menu__list__item"> <a href="#">常用联系人</a> </li> <li class="header__nav-list__imooc__menu__list__item"> <a href="#">重点旅客预约</a><br/> <a href="#">遗失物品查找</a> </li> <li class="header__nav-list__imooc__menu__list__item"> <a href="#">服务查询</a> </li> <li class="header__nav-list__imooc__menu__list__item"> <a href="#">投诉</a><br/> <a href="#">建议</a> </li> </ul> </div> </li> <li class="header__nav-list__item header__nav-list__phone"> <img src="未标题-1.png" class="header__nav-list__phone__pic"> <span><a href="#">手机版</a></span> </li> </ul> </nav> </div><!--wrap--> </header> <!--主体表单区--> <div class="content"> <h3>您现在所在的位置：<span>客运首页</span> > <span>注册</span></h3> <div class="main"> <div class="main_title">账户信息</div> <div class="main_item"> <span class="main_item-important">*</span> <label for="main_item-userAccount"><span>用户名</span> :</label> <input type="text" id="userAccount" placeholder=" 用户设置成功后不可修改"> </div> <p class="main_item_"></p> <div class="main_item"> <span class="main_item-important">*</span> <label for="main_item-userPass"><span>登录密码</span> :</label> <input type="password" id="userPass" placeholder=" 6-20位字母,数字或符号"> </div> <p class="main_item_"></p> <div class="main_item"> <span class="main_item-important">*</span> <label for="main_item-userPass"><span>确认密码</span> :</label> <input type="password" id="userPass" placeholder=" 请再次输入您的登陆密码"> </div> <p class="main_item_"></p> <div class="main_item"> <span class="main_item-important">*</span> <label for="main_item-userName"><span>姓名</span> :</label> <input type="text" id="userName" placeholder=" 请输入您的姓名"> <div class="namerule"> <a href="javascript:;">姓名填写规则</a> <div class="namerule_"> <p>1.确认姓名中生僻字无法输入时，可用生僻字拼音或同音字替代。</p> <p>2.输入姓名保存后，遇有系统无法正确显示的汉字，可用该汉字的拼音或同音字重新修改后保存。</p> <p>3.姓名中有繁体字无法输入时，可用简体替代。</p> <p>4.姓名较长，汉字与英文字符会计超过30个(1个汉字算2个字符)的，需按姓名中第一个汉字或英文字符开始按顺序连续输入30个字符(空格字符不输入)，其中英文字符输入时不区别大小写</p> </div> </div> </div> <p class="main_item_"></p> <div class="main_item"> <span class="main_item-important">*</span> <label for="main_item-idType"><span>证件类型</span> :</label> <select id="idType"> <option value="二代身份证">二代身份证</option> <option value="港澳通行证">港澳通行证</option> </select> </div> <div class="main_item"> <span class="main_item-important">*</span> <label for="main_item-information"><span>证件号码</span> :</label> <input type="text" id="information" placeholder=" 请输入您的证件号码"> </div> <p class="main_item_"></p> <div class="main_item"> <span class="main_item-important">*</span> <label for="main_item-email"><span>邮箱</span> :</label> <input type="email" id="email" placeholder=" 请正确填写邮箱地址"> </div> <p class="main_item_"></p> <div class="main_item"> <span class="main_item-important">*</span> <label for="main_item-telephone"><span>手机号码</span> :</label> <input type="tel" id="telephone" placeholder=" 请输入您的手机号码"> </div> <p class="main_item_"></p> <div class="main_item"> <span class="main_item-important">*</span> <label for="main_item-userType"><span>旅客类型</span> :</label> <select id="userType"> <option value="成人">成人</option> <option value="未成年">未成年</option> </select> </div> <div id="main_end"> <div id="choose"><input type="checkbox" id="choose">我已阅读并同意遵守<a href="javascript:;">《中国铁路客户服务中心网站服务条款》</a></div> <button id="handup">确认提交</button> </div> </div> </div> <!--尾部区域--> <footer class="footer"> <p>关注我们|网站声明</p> <p>Copyright© 2017 imooc.com All Rights Reserved | 京ICP备 13046642号-2 | 网站声明</p> </footer> <script type="text/javascript" src="index.js"></script> </body> </html>
*{
margin:0;
padding:0;
list-style:none;
text-decoration:none;
box-sizing:border-box;
}
body{
min-width: 1200px;
}
laber{
cursor: pointer;
}
/*页头区*/
header{
background-color: rgb(239, 239, 239);
border-bottom:2px solid rgb(36,135,201);
}
a{
color:inherit;
}
.header__wrap{
width:1250px;
height:110px;
margin:0 auto;
position:relative;
}
/* 头部左边logo */
.header__logo{
width:500px;
height:100px;
line-height:100px;
text-indent:100px;
letter-spacing:2px;
font-size:23px;
color:black;
position:absolute;
top:50%;
margin-top:-50px;
left:0px;
background:url('logo.png') left center no-repeat;
background-size:100px 100px;
cursor:pointer;
}
.header__logo__client{
font-size:18px;
color:rgb(102,102,102);
}
/* 头部右边导航 */
.header__nav{
height:110px;
position:absolute;
top:50%;
margin-top:-55px;
right:0;
}
.header__nav-list{
height:110px;
line-height:110px;
}
.header__nav-list__item{
float:left;
padding: 0 10px;
letter-spacing:1px;
}
.header__nav-list__item_orange{
color:rgb(251,116,3);
}
.header__nav-list__imooc{
position:relative;
}
.header__nav-list__imooc__triangle{
width:0;
height:0;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-top:10px solid rgb(251,116,3);
position:absolute;
top:45%;
right:-15px;
cursor:pointer;
}
/*nav导航 隐藏下拉框 */
.header__nav-list__imooc__menu{
width:163px;
height:320px;
position:absolute;
left:0;
top:70px;
border:1.5px solid rgb(251,116,3);
background-color: rgb(247, 247, 247);
overflow:hidden;
display: none;
}
.header__nav-list__imooc:hover
.header__nav-list__imooc__menu{
display: block;
}
.header__nav-list__imooc__menu__list{
font-size:13px;
color:rgb(119, 119, 119);
text-align:center;
padding: 0 10px;
overflow:hidden;
}
.header__nav-list__imooc__menu__list__item{
width: 130px;
line-height: 28px;
text-align: left;
padding-left: 10px;
border-bottom: 1.5px dotted rgb(251,116,3);
}
/* nav导航 手机版 */
.header__nav-list__phone{
padding-left:50px;
}
.header__nav-list__phone__pic{
width:20px;
vertical-align:middle;
}
/*主体头部区*/
.content{
width: 1250px;
margin:auto ;
}
h3{
font-size: 20px;
color: #000;
height: 45px;
line-height: 45px;
}
h3 span{
font-size: 18px;
color: #636363;
font-weight: normal;
}
.main{
height: 600px;
background: white;
border-radius: 10px;
border: 2px solid #fb7403;
margin-bottom: 100px;
}
.main_title{
background: #fb7403;
color: #eee;
width: 100%;
letter-spacing: 5px;
height: 40px;
line-height: 40px;
font-size: 20px;
padding-left :20px;
border-radius: 6px;
}
.main_item{
width: 60%;
margin: 20px auto;
height: 20px;
line-height: 20px;
font-size: 15px;
position: relative;
}
.main_item:first-child{
margin-top:50px;
}
label span{
display: inline-block;
text-align-last: justify;
width: 60px;
}
.main_item-important{
color: red;
}
.main_item input{
position: absolute;
width: 210px;
height: 20px;
top: 50%;
left: 15%;
margin-top: -10px ;
}
select{
position: absolute;
top: 50%;
left: 15%;
margin-top: -10px;
width: 210px;
}
.main_.item_ {
width: 60%;
height: 30px;
border-bottom: 0.5px solid #6385d1;
border-radius: 2px;
font-size: 15px;
color: #fb7403
letter-spacing: 2px;
font-weight: lighter;
padding-left: 10px;
margin: 0;
margin-left: 5%;
}
.main_item .namerule{
position: relative;
left: 350px;
top: -20px;
}
.main_item .namerule a{
color: #fb7403;
text-decoration: underline;
font-size: 15px;
}
.main_item .namerule a:hover{
display: block;
}
.main_item .namerule .namerule_{
width: 350px;
height: 220px;
position: absolute;
border: 1px solid blue;
font-size: 10px;
display: none;
left: -300px;
top: 0;
background: #ffffff;
}
#main_end {
text-align: center;
height: 50px;
line-height: 50px;
width: 100%;
letter-spacing: 2px;
}
#main_end #choose {
margin-right: 20px;
}
#main_end #choose a{
color: #006ee1;
}
#main_end #handup {
width: 230px;
height: 38px;
border: none;
background: #fb7403;
color: white;
border-radius: 3px;
margin-top: 35px;
}
/*页脚部分*/
footer{
display: block;
width:100%;
height:100px;
background:#eee;
border-top:2px solid rgb(36,135,201);
text-align:center;
color:#ccc;
}
footer p{
margin-top:20px;
}麻烦老师检查一下静态页面 另外麻烦看一下姓名规则那边为什么鼠标放上去不显示
写回答
1回答
-
好帮手慕慕子
2020-10-11
同学你好，整体布局效果是可以的，有一个细节可以调整下，如下所示，页脚内容垂直居中存在误差。
建议：去掉footer的固定高度，让其由内容撑开高度，添加padding设置上下空白间距，然后给p设置line-height属性，调整文字间距。
因为同学代码中如下写法，表示移入a链接，修改a的display属性值为block，而不是给namerule_元素设置样式
建议修改：
具体的细节样式同学自己再调整下就可以了，另，完成作业后可以提交作业，批作业的老师会针对同学的代码给出详细的批改建议，并整理成文档发送给同学，便于同学查看与修改的。
祝学习愉快~
0
相似问题