窗口缩放布局就完全乱了，怎么办啊？

窗口缩放布局就完全乱了，怎么办啊？

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>homework</title>
<link rel="stylesheet" href="css/homework.css">
</head>
<body>
<!-- 顶部 -->
<div class="header">
<div class="logo">
<img src="images/logo.png" alt="这里是logo">
</div>
<div class="daohang">
<ul class="daohang_ul">
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">FACULTY</a></li>
<li><a href="#">EVENTS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
<!-- 正文内容 -->
<div class="main">
<!-- banner区 -->
<div class="banner">
<div class="backword_img">
<img src="images/banner3.jpg" alt="背景图">
</div>
<div class="zhao"></div>
<div class="login">
<form>
<ul>
<li><input type="text" placeholder="your Name"></li>
<li><input type="text" placeholder="your Phone"></li>
<li><input type="text" placeholder="your E-mail"></li>
<li class="special"><input type="text" placeholder="Write Your Comment Here"></li>
<button>SendMessage</button>
</ul>
</form>
</div>
</div>
<!-- ABOUT区 -->
<div class="about">
<div class="about1">
<div class="About_title">ABOUT</div>
<label class="line"></label>
<div class="text">Lorem Ipsum is simmply dummy text of the printing and typesetting <br>industry.Lorem has been the industry's atandard dummy <br>text ever since the 1500s.</div>
</div>
<div class="about2">
<div class="left">
<div class="left_title">A WORD <br>ABOUT US</div>
    <div class="left_word">
    <div class="text">Prasent dignissim viverra est,sed<br>bibendum ligula congue non.Sed ac nisl<br>et felis gravida commodo?Suspendisse<br>eget ullamcorper ipsum.Suspendisse<br>diam amet</div>
    <button>EXPLORE</button>
    </div>
</div>
<div class="middle">
<img src="images/bb3.jpg" alt="">
</div>
<div class="right">
<div class="students">
<div class="num">70000</div>
<label class="line"></label>
<div class="word">Students</div>
</div>
<div class="faculty">
<div class="num">600</div>
<label class="line"></label>
<div class="word">Faculty</div>
</div>
</div>
</div>
<div class="about3">
<div class="p1">
<img src="images/b1.jpg" alt="">
<div class="right_triangle"></div>
</div>
<div class="p2">
<div class="title">Library</div>
<div class="abstract">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="content">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to mack a type specimen book.</div>
<button>EXPLORE</button>
</div>
<div class="p3">
<img src="images/b2.jpg" alt="">
<div class="right_triangle"></div>
</div>
<div class="p4">
<div class="title">Computer Lab</div>
<div class="abstract">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="content">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to mack a type specimen book.</div>
<button>EXPLORE</button>
</div>
<div class="p5">
<div class="title">Conference Hall</div>
<div class="abstract">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="content">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to mack a type specimen book.</div>
<button>EXPLORE</button>
</div>
<div class="p6">
<img src="images/b3.jpg" alt="">
<div class="left_triangle"></div>
</div>
<div class="p7">
<div class="title">Play Ground</div>
<div class="abstract">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="content">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to mack a type specimen book.</div>
<button>EXPLORE</button>
</div>
<div class="p8">
<img src="images/b4.jpg" alt="">
<div class="left_triangle"></div>
</div>
</div>
</div>
<!-- GALLERY区 -->
<div class="gallery">
<div class="texts">
    <div class="Gallery_title">GALLERY</div>
    <label class="line"></label>
    <div class="text">Lorem Ipsum is simmply dummy text of the printing and typesetting <br>industry.Lorem has been the industry's atandard dummy <br>text ever since the 1500s.</div>
    </div>
<div class="pic-text">
<div class="pic" id="p1">
<img src="images/03-01.jpg">
<div class="words"><p>SCIENCE LAB</p></div>
</div>
<div class="pic" id="p2">
<img src="images/03-02.jpg">
<div class="words"><p>INDOOR STADIUM</p></div>
</div>
<div class="pic" id="p3">
<img src="images/03-03.jpg">
<div class="words"><p>TRANSPORTS</p></div>
</div>
<div class="pic" id="p4">
<img src="images/03-04.jpg">
<div class="words"><p>KIDS ROOM</p></div>
</div>
<div class="pic" id="p5">
<img src="images/03-05.jpg">
<div class="words"><p>MEDITATION CLASSES</p></div>
</div>
<div class="pic" id="p6">
<img src="images/03-06.jpg">
<div class="words"><p>KIDS PLAY GROUND</p></div>
</div>
</div>
</div>
</div>

</div>
<!-- 底部 -->
<div class="footer">
<div class="content">© 2016 imooc.com 京ICP备13046642号</div>
</div>
</body>
</html>
*{
	margin: 0px;
	padding: 0px;
}

.clear{
	clear: both;
}

body{
	/*height: 10000px;*/
}


/*标题的CSS*/
.header{
	width: 100%;
	height: 100px;
	background-color: #07cbc9;
	position: fixed;
}
.header .logo{
	margin-top:26px;
	margin-left: 100px;
	float: left;
}
.header .daohang{
	float: right;
}
.header ul{
	height: 100px;
	margin-right: 50px;
}
.header ul li{
	height: 100px;
	width: 100px;
	list-style: none;
	float: left;
	font-weight: bolder;
	font-family: 微软软黑;
	text-align: center;
}
.header ul li a{
	color: #ffffff;
	text-decoration: none;
	position: relative;
	top: 39.5px;
}
.header ul li:hover{
	background-color: black;
}

/*main*/
/*banner的内容*/

.banner .backword_img img{
	width: 100%;
}

.banner .zhao{
	height: 893.671px;
	background-color: #000;
	position: absolute;
	opacity:0.5;
}

.banner .login{
	top: 400px;
	left:698px;
	position: absolute;
	z-index: 2;
}
.banner .login li{
	list-style: none;
	width: 500px;
	height: 40px;
	padding: 10px;
}

.banner .login input{
	background-color: transparent;
}

.banner .login .special{
	list-style: none;
	width: 500px;
	height: 60px;
	padding: 10px;
	text-align: center;
	font-size: 20px;
}

.banner .login input{
	color: #FFF;
	width: 100%;
	height: 100%;
}
.banner .login input::-moz-placeholder{
	color:#000;
}

.banner .login input:hover{
	border-color: #07cbc9;
}

.banner button{
	width: 150px;
	height: 40px;
	font-weight: border;
	text-align: center;
	font-family: 微软雅黑
	text-align: center;
	margin-left: 10px;
	background-color: transparent;
}

.banner button:hover{
	border:none;
	background-color: #07cbc9;
}

/*about区*/
.about{
	width: 100%;
}
.about .about1 .About_title{
	height: 60px;
	margin:20px auto;
	margin-top: 50px;
	margin-bottom: 15px;
	text-align: center;
	font-weight: bold;
	font-size: 50px;
}
.about .about1 .line{
	background-color: #07cbc9;
	display: block;
	width: 40px;
	height: 2px;
	margin:0px auto;
	margin-bottom: 15px;
}
.about .about1 .text{
	height: 70px;
	width: 550px;
	margin: 0px auto;
	text-align: center;
	font-family: 微软软黑;
	font-weight: lighter;
	font-size: 15px;
}

.about .about2{
	width: 100%;
	margin:20px;
	overflow: hidden;
	margin-bottom: 80px;
	position: relative;
}

.about .about2 .left{
	margin-left: 200px;
	float: left;
	width: 400px;
	text-align: center;
}
.about .about2 .middle{
	height: 450px;
	float: left;
}
.about .about2 .right{
	margin-left: 35px;
	float: left;
	text-align: center;
	position: relative;
	left: 0px;
}
.about .about2 .left .left_title{
	/*font-weight: bolder;*/
	font-size: 30px;
	font-family: 微软软黑;
	margin-top: 25px;
	margin-bottom: 10px;

}
.about .about2 .left .left_word{
	height: 150px;
	position: relative;
	text-align: left;
	/*float: left;*/
	/*margin-left: 200px;*/
	z-index: 2;
	left: 120px;
	border: 1px lightgray solid;
	font-family: 微软软黑;
	font-size: 15px;
	padding: 50px;
	background-color: #fff;
	opacity: 0.5;
}
.about .about2 .left .left_word .text{
	color: #000;
	opacity: 1;
}
.about .about2 .left .left_word button{
	margin-top: 30px;
	height: 45px;
	width: 90px;
	background-color: #000;
	color: #FFF;
}

.about .about2 .left .left_word button:hover{
	background-color: transparent;
	border:1px #000 solid;
	color: #000;
}

.about .about2 .right .line{
	background-color: #07cbc9;
	display: block;
	margin: 0 auto;
	margin-top: 10px;
	margin-bottom: 10px;
	width: 40px;
	height: 2px;
}

.about .about2 .right .students{
	height: 150px;
	width: 300px;
	border: #07cbc9 1px solid;
	margin-bottom: 20px;
	padding-top: 20px;
}
.about .about2 .right .faculty{
	height: 150px;
	width: 300px;
	border: #07cbc9 1px solid;
	padding-top: 20px;
}

.about .about2 .right .num{
	margin-top: 15px;
	font-size: 30px;
	font-weight: bold;
}

.about .about2 .right .word{
	font-family: 微软软黑;
	font-size: 25px;
}

.about .about3{
	width: 100%;
	overflow: hidden;
}

.about .about3 img{
   width: 475px;
   height: 400px;	
}

.about .about3 .p1{
	width: 25%;
	float: left;
	position: relative;
}
.about .about3 .p2{
	width: 25%;
	height: 400px;
	background-color:#07cbc9; 
	float: left;
}
.about .about3 .p3{
	width: 25%;
	float: left;
	position: relative;
}

.about .about3 .p4{
	width: 25%;
	height: 400px;
	background-color:#07cbc9; 
	float: left;
}
.about .about3 .p5{
	position: relative;
	top: -4px;
	width: 25%;
	height: 400px;
	background-color:#07cbc9; 
	float: left;
	clear: both;

}
.about .about3 .p6{
	position: relative;
	top: -4px;
	width: 25%;
	float: left;
}
.about .about3 .p7{
	position: relative;
	top: -4px;
	width: 25%;
	height: 400px;
	background-color:#07cbc9; 
	float: left;
}
.about .about3 .p8{
	position: relative;
	top: -4px;
	width: 25%;
	float: left;
}
.about .about3 .title{
	margin-left: 20px;
	margin-top: 20px;
	font-size: 25px;
	font-weight: bolder;
	color: #FFF;
}
.about .about3 .abstract{
	margin-left: 20px;
	margin-top: 15px;
	font-size: 20px;
	color: #FFF;
}
.about .about3 .content{
	margin-left: 20px;
	margin-top: 15px;
	color: gray;
}
.about .about3 button{
	width: 130px;
	height: 50px;
	margin-left: 172.25px;
	margin-top: 60px;
	background-color: #000;
	color: #FFF;
	border:none;
}
.about .about3 button:hover{
	background-color: transparent;
	border: 1px #000 solid;
	cursor: pointer;
}

.gallery .Gallery_title{
	height: 60px;
	margin:20px auto;
	margin-top: 50px;
	margin-bottom: 15px;
	text-align: center;
	font-weight: bold;
	font-size: 50px;
}
.gallery .line{
	background-color: #07cbc9;
	display: block;
	width: 40px;
	height: 2px;
	margin:0px auto;
	margin-bottom: 15px;
}
.gallery .text{
	height: 70px;
	width: 550px;
	margin: 0px auto;
	text-align: center;
	font-family: 微软软黑;
	font-weight: lighter;
	font-size: 15px;
}

.gallery .pic-text{
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
}

.gallery .pic-text .pic{
	float: left;
	margin: 20px;
}

.gallery .pic-text .words{
	position: relative;
	height: 60px;
	width: 100%;
	background-color: #000;
	color: #FFF;
	top: -4px;
}

.gallery .pic-text .words p{
	padding: 15px;
}

#p1,#p4{
	margin-left: 375px;
}

#p4{
	clear: left;
}

.footer{
	width: 100%;
	height: 75px;
	background-color: #07cbc9;
	text-align: center;
	color: #FFF;
	font-size: 15px;
	font-family: 微软软黑;
}
.footer .content{
	margin-top: 20px;
	padding: 20px;
}

.left_triangle{
	float: left;
	height: 0px;
    width: 0px;
    border-left: 30px solid #07CBC9;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-right: 30px solid transparent;
    z-index: 2;
    position: absolute;
    top: 170px;
}
.right_triangle{
	height: 0px;
    width: 0px;
    border-left: 30px solid transparent;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-right: 30px solid #07CBC9;
    z-index: 2;
    float: right;
    position: absolute;
    top: 170px;
    right: -0.5px;
}

之前用的360写的，先用chrome打开发现布局乱了，360缩放布局也乱了，心态炸了。老师看一下，我的代码习惯有什么不好，还有怎么解决窗口大小变化布局就乱呢？需要重点用到什么知识，比如我的about区的上部分缩放最右边的就会下去，这是为什么呢？
96年的nash 2019-03-12
源自：网页布局案例   2-9 作业题
1
收起

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论，去登陆吧

3回答
好帮手慕阿满 2019-03-13 18:46:18

同学是指如下banner吗？

http://img1.sycdn.imooc.com//climg/5c88df040001889210360259.jpg

这部分不需要分三部分的。

举个比较典型的百分比布局，about底部，如：

http://img1.sycdn.imooc.com//climg/5c88df53000129fe10740373.jpg

可以将其分为4个部分，然后每个部分占据整个宽度的25%即可。

祝：学习愉快~

0
收起回答
好帮手慕阿满 2019-03-13 16:35:32

同学你好，建议同学左右布局时，使用百分比。或者给设置div宽度时，使用百分比。这样当浏览器缩放时，可以根据浏览器宽度来显示。祝：学习愉快~

0
收起回答
  • 提问者 96年的nash #1
    如果div里面是三部分组成，例如banner里面有三部分，里面的宽度也要设置为百分比的形式是吗？
    2019-03-13 16:43:39
好帮手慕阿满 2019-03-13 10:44:00

同学你好，同学的代码整体完成的不错，还有一个小小的建议，建议给header设置z-index使其在页面的最上层显示。关于布局混乱的问题，这里建议不要使用具体的数值，而是使用百分比来布局。使其自适应屏幕。

如果我的回答解决了你的疑惑，请采纳。祝：学习愉快~

0
收起回答
  • 提问者 96年的nash #1
    老师能举个例子吗？您看一下，我的代码里哪里可以把具体的数值换成百分比，或者哪里必须要换成百分比？
    2019-03-13 11:01:46
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

布局视口怎么放大，怎么缩小？
44 0 19
为什么圣杯布局在我改变浏览器页面大小时，布局会错乱呀？
2 1 6
老师，为啥我的圣杯布局窗口一缩小 布局就全乱了呐 不能实现教程中的效果
1 1 3
使用绝对定位后窗口缩小页面错乱
121 0 4
窗口一缩小字体位置就全乱了 这该怎么解决。
8 0 2

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

从网页搭建入门Java Web2018版
  • 参与学习           人
  • 提交作业       1088    份
  • 解答问题       10205    个

如果你有Java语言基础，又想以后从事Java Web开发，那么本路径是你的不二选择！本路径从网页搭建开始入手，通过大量案例来学习Java Web基础。定能助你完成Java Web小白的蜕变！

了解课程

本课精华内容

问答 作业

为什么这样不报错？

6 1

老师请问一下

1 4

老师这样写可以嘛

2 1

老师这样写可以吗

7 1

我为了实现两行三列的效果，设置了三级div。老师您看，这样编程符合要求吗

10 1

查看更多本课问答
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师