问一下，就是窗口缩小了，为什么最右边会是空白的？

<!DOCTYPE html>

<html>

<head>

<title></title>

<style type="text/css">

/*基本样式*/

*{

margin: 0;

padding: 0;

color: black;

font-size: 16px;

}

a{

text-decoration: none;

}

ul{

list-style: none;

}

/*标题栏-外框*/

.wrap{

width: 100%;

margin: 0 auto;

text-align: center;

background: #eee;

border-bottom: 2px solid rgb(36,135,201);

}

/*标题栏-内框*/

.title{

width: 1200px;

background: #eee;

height: 80px;

text-align: center;

word-spacing: 10px;

position: relative;

left: 50%;

margin-left: -600px;

}

/*标题栏-左边*/

.title .left{

position: absolute;

text-indent: 100px;

background: url(img/logo.png) left center no-repeat;

background-size: 80px 80px;

left: 0;

height: 80px;

line-height: 80px;

}

/*标题栏-右边*/

.title .right{

position: absolute;

right: 0;

height: 80px;

line-height: 80px;

}

/*标题栏-logo*/

.title .right .phonelogo{

display: inline-block;

background: url(img/1.png)center no-repeat;

background-size: 20px 30px;

text-indent: 80px;

}

/*标题栏-慕课高铁客户服务中心*/

.left span:first-child{

font-size: 22px;

padding-right: 14px;

border-right: 2px solid black;

}

/*标题栏-客户服务-颜色更改*/

.left span:last-child{

color: grey;

}

/*标题栏-imooc@com-颜色更改*/

.right a:nth-child(2){

color: rgb(251,116,3);

}

/*标题栏-登录-颜色更改*/

.right a:nth-child(4){

color: rgb(251,116,3);

}

/*我的IMOOClist-列表*/

.imooc{

background: #eee;

color: rgb(251,116,3);

line-height: 80px;

display: inline-block;

}

.imooclist{

display: none;

border: 1px solid rgb(251,116,3);

right: 200px;

margin-top: -20px;

background: white;

text-align: left;

position: absolute;

cursor: pointer;

}

.imooclist li{

margin:0 10px;

padding: 10px;

color: #777;

font-size: 14px;

}

.imooclist li:hover{

color: rgb(251,116,3);

}

.imooclist li:nth-child(2){

border-bottom: 1px dashed #777;

}

.imooclist li:nth-child(3){

border-bottom: 1px dashed #777;

}

.imooclist li:nth-child(5){

border-bottom: 1px dashed #777;

}

.imooclist li:nth-child(6){

border-bottom: 1px dashed #777;

}

.imooclist li:nth-child(8){

border-bottom: 1px dashed #777;

}

.imooclist li:nth-child(9){

border-bottom: 1px dashed #777;

}

/*footer*/

.footer{

width: 100%;

height: 80px;

position: absolute;

bottom: 0;

text-align: center;

background: #eee;

line-height: 40px;

border-top: 2px solid rgb(36,135,201);

}

.footer p,.footer span{

color: #aaa;

}

.footer p span{

padding: 0 4px;

}

/*form*/

table{

width: 620px;

margin-left: 32%;

margin-top: 10px;

}

.form input{

height: 24px;

width: 260px;

margin:4px 0;

}

/*输入框-第二列*/

.form td:nth-child(2){

text-align: left;

width: 260px;

}

/*提示框-第三列*/

.form td:nth-child(3){

text-align: left;

width: 260px;

}

/*第一列*/

.form td:first-child{

width: 100px;

text-align: justify;

text-align-last: justify;

}

.form select{

width: 264px;

height: 24px;

border: 1px solid #ccc;

}

.form p span{

color: rgb(36,135,201);

}

.form tr:nth-child(2){

height: 60px;

vertical-align: 10px;

}

.form tr:last-child{

height: 40px;

}

.form tr:last-child input{

width: 26px;

height: 26px;

vertical-align: top;

line-height: 30px;

}

.form tr:last-child span{

padding-left: 5px;

padding-top: 5px;

display: inline-block;

line-height: 20px;

}

.form tr:last-child span a{

color: rgb(36,135,201);

}

.important{

color: rgb(251,116,3);

}

.userNameHover_{

display: none;

float: left;

height: 200px;

width: 450px;

margin-top: -300px;

margin-left: 900px;

border: 1px solid rgb(36,135,201);

text-align: left;

}

.userNameHover_ p{

color: #333;

font-size: 14px;

line-height: 26px;

margin: 6px;

}

#userNameHover{

text-decoration: underline;

color: rgb(251,116,3);

}

.button{

width: 200px;

height: 40px;

background: rgb(251,116,3);

border: none;

color: white;

margin-top: 20px;

border-radius: 4px;

position: absolute;

left: 50%;

margin-left: -100px;

}

.item_pwd{

width: 50px;

height: 10px;

display: inline-block;

display: none;

}

.item_pwd1{background: red;display: inline-block;}

.item_pwd2{background: rgb(251,116,3);}

.item_pwd3{background: green;}

</style>

</head>

<body>

<div class="total">

<div class="wrap" id="wrap">

<div class="title" id="title">

<div class="left">

<span>慕课高铁客户服务中心</span>

<span>客户服务</span>

</div>

<div class="right">

<span>意见反馈</span>

<a href="javascript:;">imooc@com</a>

<span>你好，请</span><a href="javascript:;">登录</a>

<span>|</span>

<a href="javascript:;">注册</a>

<a href="javascript:;" class="imooc" id="imooc">我的IMOOC ▼</a>

<div class="phonelogo">手机版</div>

</div>

</div>

</div>

<ul id="imooclist" class="imooclist">

<li>未完成订单</li>

<li>已完成订单（改/退）</li>

<li>我的保险</li>

<li>查看个人信息</li>

<li>账户安全</li>

<li>常用联系人</li>

<li>重点旅客预约</li>

<li>遗失物品查找</li>

<li>服务查询</li>

<li>投诉</li>

<li>建议</li>

</ul>

<hr>

<div class="content">

<div class="c_title"></div>

<div class="form">

<table>

<tr>

<td>

<span class="important">*</span>

<span>用户名：</span>

</td>

<td>

<input type="text" id="userAccount" placeholder="用户名设置成功后不可修改" name="">

</td>

<td><span class="tips_"></span></td>

</tr>

<tr>

<td>

<span class="important">*</span>

<span>登录密码：</span>

</td>

<td>

<input type="password" id="userPwd" placeholder="6-20位字母、数字或符号" name="">

<span class="tips_"></span>

</td>

<td>

<i class="item_pwd item_pwd1"></i>

<i class="item_pwd item_pwd2"></i>

<i class="item_pwd item_pwd3"></i>

</td>

</tr>

<tr>

<td>

<span class="important">*</span>

<span>确认密码：</span>

</td>

<td>

<input type="password" id="userPwd_" placeholder="再次输入您的登录密码" name="">

</td>

<td><span class="tips_"></span></td>

</tr>

<tr>

<td>

<span class="important">*</span>

<span>姓&emsp;&emsp;名：</span>

</td>

<td>

<input type="text" id="userName" placeholder="请输入姓名" name="">

</td>

<td><span class="tips_"><a href="javascript:;" id="userNameHover">姓名填写规则</a></span></td>

</tr>

<tr>

<td>

<span class="important">*</span>

<span>证件类型：</span>

</td>

<td>

<select class="selectId">

<option>二代身份证</option>

<option>护照</option>

</select>

</td>

<td><span></span></td>

</tr>

<tr>

<td>

<span class="important">*</span>

<span>证件号码：</span>

</td>

<td>

<input type="text" id="userId" placeholder="请输入您的证件号码" name=""><span></span>

</td>

<td><span class="tips_"></span></td>

</tr>

<tr>

<td>

<span>&emsp;邮&emsp;&emsp;箱：</span>

</td>

<td>

<input type="text" id="email" placeholder="请正确填写邮箱地址" name="">

</td>

<td><span class="tips_"></span></td>

</tr>

<tr>

<td>

<span class="important">*</span>

<span>手机号码：</span>

</td>

<td>

<input type="text" id="telephone" placeholder="请输入您的手机号码" name="">

</td>

<td><span class="tips_"></span></td>

</tr>

<tr>

<td>

<span class="important">*</span>

<span>旅客类型：</span>

</td>

<td>

<select>

<option>成人</option>

<option>学生</option>

</select>

</td>

<td><span></span></td>

</tr>

<tr>

<td>

</td>

<td colspan="2">

<input type="checkbox" id="choose"name="">

<span>我已阅读并同意遵守<a href="javascript:;">《中国铁路客户服务中心网站服务条款》</a></span>

</td>

</tr>

</table>

</div>

<button class="button" id="nextBtn">下一步</button>

</div>

<footer class="footer">

<p>关于我们<span>|</span>网站声明</p>

<p>Copyright © 2017imooc.com All Rights Reserved<span>|</span>京ICP备13046642-号</p>

</footer>

<div class="userNameHover_" id="userNameHover_">

<p>

1.确认姓名中生僻字无法输入时，可用生僻字拼音或同音字替代。<br>

2.输入姓名保存后，遇有系统无法正确显示的汉字，可用该汉字的拼音或同音字重新修改后保存。<br>

3.姓名中有繁体字无法输入时，可用简体替代。<br>

4.姓名较长，汉字与英文字符合计超过30个（1个汉字算2个字符）的，需按姓名中第一个汉字或英文字符开始按顺序连续输入30个字符（空格字符不输入），其中英文字符输入时不区别大小写</p>

</div>

</div>

<script type="text/javascript">

//input

var userAccount=document.getElementById("userAccount"),

userPwd=document.getElementById("userPwd"),

userPwd_=document.getElementById("userPwd_"),

userName=document.getElementById("userName"),

userId=document.getElementById("userId"),

email=document.getElementById("email"),

telephone=document.getElementById("telephone"),

choose=document.getElementById("choose"),

nextBtn=document.getElementById("nextBtn");

//密码强度

var item_pwd=document.querySelectorAll(".item_pwd")

//tips

var tips_=document.querySelectorAll(".tips_")

console.log(tips_)

//标志位

var flag0=false,

flag1=false,

flag2=false,

flag3=false,

flag4=false,

flag5=false,

flag6=false;

//onfocus

userAccount.onfocus=function(){

tips_[0].innerHTML="6-30位字母，数字或'_'，字母开头"

tips_[0].style.color="#FB7403"

}

userPwd.onfocus=function(){

item_pwd[0].style.display="inline-block"

}

//正则

userAccount.onblur=function(){

var reg=/^\w{6,30}$/

if(this.value==""){

tips_[0].innerHTML="用户名不能为空"

tips_[0].style.color="red"

}else{

if(reg.exec(this.value)){

tips_[0].innerHTML="用户名输入正确"

tips_[0].style.color="green"

flag0=true

}else{

tips_[0].innerHTML="6-30位字母，数字或'_'，字母开头"

tips_[0].style.color="red"

}

}

}

userPwd.onblur=function(){

//纯数字

var reg1=/^\d{6,20}$/

//纯字母

var reg2=/^[a-z|A-Z]{6,20}$/

//纯符号

var reg3=/^[\W]{6,20}$/

//包含两种

var reg4=/^[0-9|a-z]{6,20}$|^[\W|a-z]{6,20}$|^[A-Z|0-9]{6,20}$/

//包含三种

var reg5=/^[\W+|\d+|\w+]{6,20}$/

if(this.value==""){

tips_[1].innerHTML="密码不能为空"

tips_[1].style.color="red"

item_pwd[0].style.display="none"

item_pwd[1].style.display="none"

item_pwd[2].style.display="none"

}else{

if(reg1.exec(this.value)||reg2.exec(this.value)||reg3.exec(this.value)){

tips_[1].innerHTML="密码正确"

tips_[1].style.color="green"

item_pwd[0].style.display="inline-block"

flag1=true

}else if(reg4.exec(this.value)){

tips_[1].innerHTML="密码中等"

tips_[1].style.color="green"

item_pwd[0].style.display="inline-block"

item_pwd[1].style.display="inline-block"

flag1=true

}

else if(reg5.exec(this.value)){

tips_[1].innerHTML="密码高等"

tips_[1].style.color="green"

item_pwd[0].style.display="inline-block"

item_pwd[1].style.display="inline-block"

item_pwd[2].style.display="inline-block"

flag1=true

}

else{

item_pwd[1].style.display="none"

tips_[1].innerHTML="6-20位字母，数字或符号"

tips_[1].style.color="red"

item_pwd[0].style.display="inline-block"

item_pwd[1].style.display="none"

item_pwd[2].style.display="none"

}

}

}

userPwd_.onblur=function(){

if(this.value==""){

tips_[2].innerHTML="密码不能为空"

tips_[2].style.color="red"

}else{

if(this.value!=userPwd.value){

tips_[2].innerHTML="密码不一致"

tips_[2].style.color="red"

}else{

tips_[2].innerHTML="两次输入一致"

tips_[2].style.color="green"

flag2=true

}

}

}

userName.onblur=function(){

var reg=/^[\u4e00-\u9fa5]{2,5}$|^[a-zA-Z_]{3,30}$/

if(this.value==""){

tips_[3].innerHTML="姓名不能为空"

tips_[3].style.color="red"

}else{

if(reg.exec(this.value)){

tips_[3].innerHTML="姓名正确"

tips_[3].style.color="green"

flag3=true

}else{

tips_[3].innerHTML="姓名只能包含中文或英文，且字符在3-30个之间！"

tips_[3].style.color="red"

}

}

}

userId.onblur=function(){

var reg=/^[1-9]\d{16}[0-9x]$/

if(this.value==""){

tips_[4].innerHTML="身份证号不能为空"

tips_[4].style.color="red"

}else{

if(reg.exec(this.value)){

tips_[4].innerHTML="身份证号正确"

tips_[4].style.color="green"

flag4=true

}else{

tips_[4].innerHTML="请输入18位身份证号码"

tips_[4].style.color="red"

}

}

}

email.onblur=function(){

var reg=/^\w+\-*\w*@\w+\.[a-zA-Z_]{2,4}$/

if(this.value==""){

tips_[5].innerHTML="邮箱不能为空"

tips_[5].style.color="red"

}else{

if(reg.exec(this.value)){

tips_[5].innerHTML="邮箱格式正确"

tips_[5].style.color="green"

flag5=true

}else{

tips_[5].innerHTML="请输入正确的邮箱"

tips_[5].style.color="red"

}

}

}

telephone.onblur=function(){

var reg=/^[1][3,9][1-9]\d{8}$/

if(this.value==""){

tips_[6].innerHTML="手机号码不能为空"

tips_[6].style.color="red"

}else{

if(reg.exec(this.value)){

tips_[6].innerHTML="手机格式正确"

tips_[6].style.color="green"

flag6=true

}else{

tips_[6].innerHTML="请输入正确的手机号码"

tips_[6].style.color="red"

}

}

}

//下一步按钮

nextBtn.onclick=function(){

if(flag0==false||flag1==false||flag2==false||flag3==false||flag4==false||flag5==false||flag6==false){

alert("您填写的信息有误")

}else if(choose.checked==false){

alert("请勾选协议")

}

else{

window.open("http://www.imooc.com")

}

}

//姓名规则移入移出事件

var userNameHover=document.getElementById("userNameHover")

var userNameHover_=document.getElementById("userNameHover_")

userNameHover.onmouseover=function(){

userNameHover_.style.display="block"

}

userNameHover.onmouseout=function(){

userNameHover_.style.display="none"

}

//imooclist

var imooc=document.getElementById("imooc")

var imooclist=document.getElementById("imooclist")

var title=document.getElementById("title")

var wrap=document.getElementById("wrap")

//移入我的IMOOC-显示我的IMOOC列表

imooc.onmouseover=function(){

imooclist.style.display="block"

}

//移入列表-显示我的IMOOC列表

imooclist.onmouseover=function(){

imooclist.style.display="block"

}

//移出列表-隐藏我的IMOOC列表

imooclist.onmouseout=function(){

imooclist.style.display="none"

}

//移出标题栏-隐藏我的IMOOC列表

title.onmouseout=function(){

imooclist.style.display="none"

}

</script>

</body>

</html>

我这个标题栏和尾部都感觉不对劲，窗口一缩小全变了

慕粉1905369247 2020-03-26

源自：项目：JS表单验证案例 3-10 作业题

14

收起

2回答

好帮手慕夭夭回答被采纳获得+3积分 2020-03-27 14:21:53

同学你好，出现横向滚动条是正常的，浏览器缩小了，但是页面很大，自然要通过横向滚动条用来滑动超出的内容。另外，logo区域是因为定位的原因，因为页面变小，设置的位置超出了。可以如下调整：

定位麻烦，使用margin设置居中。里面的小盒子，一个左浮动，一个右浮动更简单。

给页面设置最小宽度，当浏览器缩小之后，保持最小宽度不变，以避免元素被挤得换行布局变乱。

尾部因为定位脱离文档流，所以页面的最小宽度对它不起作用，单独设置一个：

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

好帮手慕夭夭 2020-03-27 09:54:59

同学你好，老师这边测试，缩小之后没有空白，如下图所示。同学可以给页面设置一个最小宽度，例如min-width: 1200px;再测试一下。另外，如果还是有问题，可以不用管，因为此页面是电脑端页面，不需要考虑缩小的情况，在电脑上正常显示即可哦。

祝学习愉快！

提问者慕粉1905369247 #1

logo移出去了，还要缩小点，下面出现滑动条的时候

2020-03-27 09:57:46

相似问题

右边区块没有固定，会变小

将窗口缩小时固定导航条的文字会被挤出外面，怎么做才能使窗口缩小时文字隐藏并出现横向滚动条？

为什么遮罩会随着页面的缩小而变小怎么处理呢

浏览器窗口拉小，banner布局就乱了

请问网页是全屏时显示效果没问题，可是一旦网页窗口缩小，就会产生重叠

登录后可查看更多问答，登录/注册

2.组件化网页开发

参与学习人
提交作业 1121 份
解答问题 14456 个

本阶段在运用JS实现动态网页开发的基础上，带你深入理解企业开发核心思想，完成一个企业级网页的开发，体验前端工程师的成就感。

本课精华内容

问答作业

老师！请教一段代码

37 3

prev+next选择器是否和父子选择器一样呢

22 4

2-11检查

78 1

老师，这样对吗

80 1

提问的同学看这里（慕课网出品）

56 1

查看更多本课问答

请稍等 ...

意见反馈帮助中心 APP下载