页面布局问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3-10final</title>
<!-- 引入css -->
<link rel="stylesheet" type="text/css" href="css/theme.css">
</head>
<body>
<!-- 主体 -->
<div id="imoocHighWay">
<!-- 头部 -->
<header id="highWayHeader">
<div id="headerNav">
<div class="logo"></div>
<span class="headerSpan1">慕课高铁服务中心</span>
<div class="headerLine"></div>
<span class="headerSpan2">客服服务</span>
<span class="headerSpan3">意见反馈</span>
<span class="headerSpan4">immooc@com</span>
<span class="headerSpan5">您好,请<a href="//login.html">登录</a></span>
<div class="headerLine"></div>
<span class="headerSpan6"><a href="//register.html">注册</a></span>
<div id="Menu">
<span class="headerSpan7">我的imooc</span>
<div class="arrow"></div>
</div>
<div id="phone">
<div class="phone"></div>
<span>手机版</span>
</div>
</div>
</header>
<!-- 二级菜单-->
<div id="subMenuDiv">
<ul>
<li>未完成订单</li>
<li>已完成订单（改/退）</li>
<li>我的保险</li>
<li>查看个人信息</li>
<li>账号安全</li>
<li>常用联系人</li>
<li>重点旅客预约</li>
<li>遗失物品查找</li>
<li>服务查询</li>
<li>投诉</li>
<li>建议</li>
</ul>
</div>
<section id="highWayContent">
<section id="section1"><span>您现在的位置：</span><span>客运首页 > 注册</span></section>
<section id="section2">
<div id="section2Div1"><span>账户信息</span></div>
<div id="section2Div2">
<div id="inputs">
<div id="UserName"><span class="span1"><label>*</label>用 户 名：</span><input type="text" name="username" placeholder="用户名设置成功后不可修改"/><span id="spanUserName"></span></div>
<div id="loginPassword"><span class="span1"><label>*</label>登录密码：</span><input type="password" name="password" placeholder="6-20位字母、数字或者符号"/><span></span></div>
<div id="passwordTip"></div>
<div id="confirmPassword"><span class="span1"><label>*</label>确认密码：</span><input type="text" name="confirmPassword" placeholder="请再次输入密码"/><span></span></div>
<div id="realName"><span class="span1"><label>*</label>姓 名：</span><input type="text" name="realName" placeholder="请输入姓名"/>
<span><a href="">姓名填写规则</a></span>
</div>
<div id="IDType">
<span class="span1"><label>*</label>证件类型：</span>
<select name="idCard">
<option value="fgIDCard">二代身份证</option>
<option value="sgIDCard">一代身份证</option>
<option value="driverLicense">驾驶证</option>
<option value="certificate1">港澳同行证</option>
<option value="certificate2">台湾通行证</option>
<option value="passport">护照</option>
</select>
<span></span>
</div>
<div id="IDNum"><span class="span1"><label>*</label>证件号码：</span><input type="text" name="IDNum" placeholder="请输入您的证件号码"><span></span></div>
<div id="email"><span class="span1"> 邮 箱：</span><input type="text"name="email" placeholder="请正确填写您的邮箱"><span></span></div>
<div id="phoneNum"><span class="span1"><label>*</label>手机号码：</span><input type="text" name="phoneNum" placeholder="请输入您的手机号码"><span></span></div>
<div id="traveller"><span class="span1"><label>*</label>旅客类型：</span>
<select name="tr">
<option value="Adult">成人</option>
<option value="Student">学生</option>
<option value="Child">儿童</option>
<option value="Disabled servicemen">伤残军人</option>
</select>
<span></span>
</div>
</div>
<div id="checkRules">
<input type="checkbox" value="checkRules"><span>我已阅读并同意遵守<a href="">《中国铁路客户服务中心网站服务条款》</a></span>
</div>
<div id="nextButton">
<input type="button" name="nextButton" value="下一步">
</div>
<div id="mainPwdStrength">
<div class="pwdStrength pwdStrength1"></div>
<div class="pwdStrength pwdStrength2"></div>
<div class="pwdStrength pwdStrength3"></div>
</div>
</div>
<div id="rulesForName">
1.确认姓名中生僻字无法输入时，可用生僻字拼音或同音字替代。<br>
2.输入姓名保存后，遇有系统无法正确显示的汉字，可用该汉字的拼音或同音字重新修改后保存。<br>
3.姓名中有繁体字无法输入时，可用简体替代。<br>
4.姓名较长，汉字与英文字符合计超过30个（1个汉字算2个字符）的，需按姓名中第一个汉字或英文字符开始按顺序连续输入30个字符（空格字符不输入），其中英文字符输入时不区别大小写。<br>
</div>
</section>
</section>
<footer id="highWayFooter">
<div id="footerDiv1">
<span id="footerSpan1">关于我们</span>
<div></div>
<span id="footerSpan2">网站声明</span>
</div>
<div id="footerDiv2">Copyright 2019 ©dlkyy All Rights Reserved | 渝ICP备 666666666号</div>
</footer>
</div>
<script type="text/javascript" src="js/js1.js"></script>
</body>
</html>
-------------------------------------------------CSS--------------------------------------------
/*清除样式*/
*{
margin: 0;
padding: 0;
}
body,html{
width: 100%;
min-width: 1200px;
}
#imoocHighWay{
width:100%;
min-width: 1200px;
position: relative;
font-family: "Microsoft Yahei", sans-serif ;
}
/*页头*/
#highWayHeader{
width: 100%;
height:124px;
background-color: #efefef;
border-bottom: 2px solid #2487c9;
}
#headerNav{
width: 1200px;
height: 110px;
margin: 0 auto;
padding: 7px 0;
overflow: hidden;
}
.logo{
float: left;
background: url("../imgs/logo.png") center center no-repeat;
width: 110px;
height: 110px;
}
.headerSpan1,.headerLine,.headerSpan2,.headerSpan3,
.headerSpan4,.headerSpan5,.headerSpan6,#Menu,#phone{
float: left;
line-height: 110px;
}
.headerSpan1{
font-size: 22px;
margin-right: 26px;
margin-left: 26px;
}
.headerLine{
height:48px;
width: 3px;
background: #000;
margin-top:31px;
margin-right: 10px;
}
.headerSpan2{
width: 64px;
font-size: 16px;
color:#666;
margin-right: 166px;
}
.headerSpan3{
width: 64px;
font-size: 16px;
margin-right: 10px;
}
.headerSpan4{
width: 100px;
font-size: 14px;
margin-right: 10px;
color:orange;
}
.headerSpan4:hover{
cursor: pointer;
}
.headerSpan5{
width: 90px;
font-size: 16px;
}
.headerSpan5 a,.headerSpan6 a{
text-decoration: none;
color: orange;
}
.headerSpan6{
font-size: 16px;
width: 32px;
margin-right: 30px;
}
#Menu .headerSpan7{
font-size: 16px;
width:64px;
}
.arrow{
float: right;
border-right: 5px solid black;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
margin: 50px 50px 50px 6px;
}
#phone{
overflow: hidden;
}
.phone{
float: left;
background: url("../imgs/smallPhone.png") center center no-repeat;
width: 59px;
height: 85px;
transform: scale(.3) translate(36px,46px);
}
/*定位有误！*/
#subMenuDiv{
width: 170px;
background: #d4d4d4;
border: 1px solid orange;
position: absolute;
z-index: 10;
right: 15.6%;
top: 75px;
display: none;
}
#subMenuDiv ul{
padding: 8px;
}
#subMenuDiv ul li{
list-style: none;
border-bottom: 1px dashed #b7b7b7;
padding:5px 0;
}
#subMenuDiv ul li{
list-style: none;
border-bottom: 1px dashed #b7b7b7;
padding:5px 0;
}
#subMenuDiv ul li:first-of-type{
border-bottom:none
}
#subMenuDiv ul li:nth-child(4){
border-bottom:none
}
#subMenuDiv ul li:nth-child(7){
border-bottom:none
}
#subMenuDiv ul li:nth-last-child(2){
border-bottom:none
}
#subMenuDiv ul li:last-of-type{
border-bottom:none
}
/*内容区*/
#highWayContent{
position: relative;
overflow: hidden;
}
#section1{
width: 1200px;
height: 24px;
margin: 0 auto;
padding: 8px 0;
}
#section1 span:first-of-type{
font-size: 18px;
font-weight: bold;
}
#section1 span:last-of-type{
color:#666;
}
#section2{
width: 1200px;
height: 700px;
border: 1px solid #fb7403;
margin: 0 auto 80px auto;
border-radius: 8px;
overflow:hidden;
}
#section2Div1{
width: 100%;
height: 43px;
background: #fb7403;
border-radius: 8px;
}
#section2Div1 span{
color: white;
font-size: 18px;
font-weight: bold;
line-height: 43px;
padding-left: 30px;
}
#section2Div2{
width: 100%;
height: 587px;
}
#section2Div2 #inputs{
width: 720px;
height: 454px;
margin-top: 52px;
margin-left:245px ;
/*border: 1px solid black;*/
}
#inputs div{
padding-bottom: 16px;
}
.span1{
width: 100px;
height: 25px;
display: inline-block;
}
#inputs label{
color: #fb7403;
margin-right: 2px;
}
#inputs input{
width: 210px;
height: 21px;
margin-right: 5px;
}
/*input和select不能对齐的问题*/
#inputs select{
width: 215px;
box-sizing: border-box;
margin: 0 -5px;
height: 25px;
}
#inputs span:last-child{
width:390px;
height: 25px;
line-height: 25px;
display: inline-block;
border: 1px saddlebrown solid;
}
#inputs a{
color:#fb7403;
}
#passwordTip{
width: 210px;
height: 25px;
margin-left: 100px;
display: none;
}
#rulesForName{
width: 505px;
height: 320px;
border: 1px solid #00FFFF;
line-height: 40px;
padding-left: 5px;
background: #f3f5f7;
float: right;
position: relative;
z-index: 10;
top:-410px;
left: -23px;
display: none;
}
#checkRules{
margin-left: 345px;
}
#checkRules a{
color:#1e90ff;
}
#mainPwdStrength{
position: relative;
width:390px;
height: 25px;
top:-505px;
right: -570px;
}
.pwdStrength{
width: 42px;
height: 6px;
position: absolute;
margin-top:10.5px;
}
.pwdStrength1{
background:red;
}
.pwdStrength2{
background:#00FF00;
right: 300px;
}
.pwdStrength3{
background: orange;
right: 250px;
}
#nextButton input{
display: block;
width: 240px;
height: 36px;
background: #fb7403;
border: none;
border-radius: 8px;
margin-left: 380px;
margin-top: 46px;
}
/*页脚*/
#highWayFooter{
width: 100%;
height: 100px;
background: #dcdcdc;
border-top:2px solid #2487c9;
}
#footerDiv1{
width: 160px;
height: 25px;
margin: 0 auto;
padding-top: 25px;
}
#footerDiv1 span{
display: block;
}
#footerDiv1 span:hover{
cursor: pointer;
color: #fb7403;
}
#footerSpan1,#footerDiv1 div{
display: block;
float: left;
}
#footerSpan2{
float: right;
}
#footerDiv1 div{
width: 2px;
height: 20px;
margin-top: 1px;
background: #000;
transform: translateX(16px);
}
#footerDiv2{
width: 1200px;
height: 25px;
margin: 20px auto;
position: relative;
text-align: center;
}
感觉越学越回去了，连css布局都出问题了，请老师帮忙解决一下。input输入框宽度，下拉菜单定位，密码强
度条定位等问题如图片所示。关于布局有没有什么建议的24
收起
正在回答
2回答
同学你好，关于同学的疑问，解答如下：
1、把下拉菜单放到id为Menu元素里面，给Menu设置相对定位。代码参考：
2、同学是想下方的三项内容，都对齐吗？
如果是的话，那么给右侧的元素（id为spanUserName的元素）添加vertical-align: middle属性。
3、密码强度的布局可参考下方
样式可以使用父级相对定位，子级绝对定位的方式。
4、关于第四问，不是很理解同学的意思，建议详细描述下，以便于准确的为同学解答疑问。
如果我的回答帮助了你，欢迎采纳，祝学习愉快~
qq_慕九州2374973
2019-12-21 17:05:18
添加float:left?
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星