体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

代码写完之后发现一缩小浏览器，结构就乱了

来源：4-3 项目作业

weixin_慕盖茨9271251

2019-07-12 16:05:33

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>作业</title>
 <link rel="stylesheet" type="text/css" href="cs\css1.css">
</head>
<body>
 <div class="top">
 <div class="logo-png"><img src="images\logo.png"></div>
 <div class="menu">
 <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>
 <div class="banner">
 <div class="banner-img"><img src="images\banner3.jpg"></div>
 <div class="shape"></div>
 <div class="info"> 
 <form>
 <input type="text" name="" id="yourName" placeholder="yourName"><br>
 <input type="text" name="" id="yourPhone" placeholder="yourPhone"><br>
 <input type="text" name="" id="yourEmai" placeholder="yourEmai"><br>
 <textarea id="comment" placeholder="Wirte Your Comment Here"></textarea></li><br>
 <input type="button" name="" id="send" value="SEND MESSAGE">
 </form>
 </div>
 </div>
 <div class="About">
 <div class="a">
 <h1>ABOUT</h1>
 <div class="line"></div>
 <P>Lorem Ipsum is simple dummy text of the printing and typesting<br>indestry.Lorem Ipsum has been the industry's standard dummy<br>text ever since the 1500s.</P>
 </div>
 <div class="b">
 <div class="L">
 <div class="part1">
 A WORD <br>ABOUT US
 </div>
 <div class="part2">
 <div class="part2-1">Praesent 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>
 <input type="button" name="btn" value="EXPLORE">
 </div>
 </div>
 <div class="M"><img src="images\bb3.jpg"></div>
 <div class="R">
 <div class="R1">
 <div class="R1-1">70000</div>
 <div class="R1-2"></div>
 <div class="R1-3">Student</div>
 </div>
 <div class="R2">
 <div class="R1-1">600</div>
 <div class="R1-2"></div>
 <div class="R1-3">Faculty</div>
 </div>
 </div>
 </div>
 <div class="c">
 <ul>
 <li><img src="images\b1.jpg"></li>
 <li>
 <h3>Library</h3>
 <div class="p1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</div>
 <div class="p2">Loren 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 make a type specimen book.</div>
 <div class="p3"><input type="button" name="btn" value="EXPLORE"></div>
 </li>
 <li><img src="images\b2.jpg"></li>
 <li>
 <h3>Library</h3>
 <div class="p1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</div>
 <div class="p2">Loren 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 make a type specimen book.</div>
 <div class="p3"><input type="button" name="" value="EXPLORE"></div>
 </li>
 <li>
 <h3>Library</h3>
 <div class="p1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</div>
 <div class="p2">Loren 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 make a type specimen book.</div>
 <div class="p3"><input type="button" name="" value="EXPLORE"></div>
 </li>
 <li><img src="images\b3.jpg"></li>
 <li>
 <h3>Library</h3>
 <div class="p1">Lorem Ipsum is simply dummy text of the printing and typesetting industry</div>
 <div class="p2">Loren 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 make a type specimen book.</div>
 <div class="p3"><input type="button" name="" value="EXPLORE"></div>
 </li>
 <li><img src="images\b4.jpg"></li>
 </ul>
 </div>
 </div>
 <div class="Gallery">
 <div class="G1">
 <h1>GALLERY</h1>
 <div class="line"></div>
 <P>Lorem Ipsum is simple dummy text of the printing and typesting<br>indestry.Lorem Ipsum has been the industry's standard dummy<br>text ever since the 1500s.</P>
 </div>
 <div class="G2">
 <ul>
 <li>
 <img src="images\03-01.jpg">
 <div class="black">SCIENCE LAB</div>
 </li>

 <li>
 <img src="images\03-02.jpg">
 <div class="black">INDOOR STADIUM</div>
 </li>
 <li>
 <img src="images\03-03.jpg">
 <div class="black">TRANSPORTATION</div>
 </li>
 <li>
 <img src="images\03-04.jpg">
 <div class="black">KIDS ROOM</div>
 </li>
 <li>
 <img src="images\03-05.jpg">
 <div class="black">MEDITATION CLASSES</div>
 </li>
 <li>
 <img src="images\03-06.jpg">
 <div class="black">KIDS PLAY GROUND</div>
 </li>
 </ul>
 </div>
 </div>
 <div class="Footer">
 <p>© 2016 imooc.com 京ICP备13046642</p>
 </div>
</body>
</html>
.clearDiv::after{
	content: "";
	visibility: hidden;
	height: 0px;
	display: block;
	clear: both;
}
*{
	margin:0px;
	padding: 0px;
	font-family:  Microsoft YaHei UI;
}
.top{
	background-color: #07cbc9;
	overflow: hidden;
	width: 100%;
}
.top .logo-png{
	float: left;
}
.top .logo-png img{
	margin-left: 120px;
	margin-top: 10px;
}
.top .menu {
	float: right;
	margin-right: 60px;
	margin-top: 28px;
}
/*去掉下划线和调整字体粗细大小颜色*/
.top .menu  li{
	float: left;
	margin-right: 20px;
	list-style: none;
	font-size: 10px;
	font-weight:bold;
}
.top .menu a{
	text-decoration: none;
	color: white;
}
/*鼠标经过相应导航时，背景颜色变为黑色*/
.top .menu a:hover{
	background-color: black;
}
.banner{
	width: 100%;
	overflow: hidden;
}
.banner-img{
	float: left;
	width: 100%;
	height: 850px;
}
.banner-img img{
	width: 100%;
	height: 100%;
}
.shape{
	width: 100%;
	height: 850px;
	background-color: black;
	position: absolute;
	opacity: 0.4;
}
.info{
	position: absolute;
	margin-left: 38%;
	margin-top: 10%;
	text-align: center;
}
.info input{
	width: 500px;
	height: 50px;
	margin-top: 20px;
	background: none;
	border:1px solid #9D9D9B;
	font-size: 18px;
	text-indent: 1em;
	color: #fff;
}
.info textarea{
	width: 500px;
	height: 150px;
	margin-top: 20px;
	background:none;
	border:1px solid #757566;
	font-size: 18px;
	text-indent: 1em;
	color: #fff;
}
.info input[id="send"]{
	width: 200px;
	color: #757566;
}
.info input:hover{
	border:1px solid #07cbc9;
}
.info textarea:hover{
	border:1px solid #07cbc9;
}
.info input[id="send"]:hover{
	background-color: #07cbc9;
	border:0;
}
.About{
	margin-top: 60px;
}
.About .a{
	width: 500px;
	margin:0 auto;
}
.About p{
	margin-top: 20px;
	text-align: center;
}
.About h1{
	width: 150px;
	margin:0 auto;
	font-size: 40px;
}
.About .line{
	width: 45px;
	margin:20px auto ;
	border:2px solid #07cbc9;
}
.About .b{
	width: 1500px;
	margin:20px auto;
	overflow: hidden;
}
.About .b .L{
	width: 500px;
    float: left;
    left: 250px;
    position: relative;
    height: 330px;
    
}
.About .b .L .part1{
	margin-left: 18px;
    font-size: 28px;
    text-align: center;
    width: 150px;
}
.About .b .L .part2{
	width: 305px;
	border:1px solid #c3b9b9;
	padding: 18px 15px; 
	background-color: rgba(255, 255, 255, 0.4);

}
.About .b .L .part2 input{
	background-color: black;
    color: white;
    width: 90px;
    height: 30px;
    margin-top: 15px;
    border:0;
}
.About .b .L .part2 input:hover{
	background: none;
	color: black;
	border:1px solid black;
}
.About .b .M{
	width: 500px;
	float: left;
	background-color: green;
	height: 330px;
}
.About .b .M img{
	width: 500px;
	height: 330px;
}
.About .b .R{
	width: 500px;
	float: left;
	
	height: 330px;
}
.About .b .R .R1{
	width: 180px;
    height: 100px;
    text-align: center;
    line-height: 50px;
    margin-left: 50px;
    border: 1px solid #07cbc9;
}

.About .b .R .R2{
	width: 180px;
    height: 100px;
    text-align: center;
    line-height: 50px;
    margin-left: 50px;
    border: 1px solid #07cbc9;
    margin-top: 30px;
}
.About .b .R .R1-2{
	border: 1px solid #07cbc9;
    width: 35px;
    margin: 0 auto;
}
.About .b .R .R1-1{
	font-size: 30px;
    font-weight: bold;
}
.About .b .R .R1-3{
	font-size: 20px;
}
.About .c{
	width: 100%;
	overflow: hidden;
	margin-top: 80px;
	list-style: none;
}
.About .c img{
	width:100%;
}
.About .c li{
	float: left;
	width: 25%;
	height: 400px;
	background-color: #07cbc9;
	list-style: none;
}
.About .c li h3{
	margin:30px 20px;
    font-size: 30px;
    font-weight: inherit;
    color: white;
}
.About .c li .p1{
	margin:30px 20px;
	font-size: 18px;
    font-weight: inherit;
    color: #fbf7f7;
}
.About .c li .p2{
	margin:30px 20px;
	font-size: 14px;
    font-weight: inherit;
    color: #e0dcdc;
}
.About .c li .p3{
	text-align: center;
}
.About .c li .p3 input{
	background-color: black;
    color: white;
    width: 120px;
    height: 50px;
    margin-top: 28px;
    border:0;
}
.About .c li .p3 input:hover{
	background: none;
	color: black;
	border:1px solid black;
}
.Gallery{
	margin-top: 40px;
	overflow: hidden;
}
.Gallery .G1{
	width: 500px;
	margin:0 auto;
}
.Gallery p{
	margin-top: 20px;
	text-align: center;
}
.Gallery h1{
	width: 180px;
	margin:0 auto;
	font-size: 40px;
}
.Gallery .line{
	width: 45px;
	margin:20px auto ;
	border:2px solid #07cbc9;
}
.Gallery .G2{
	width: 1140px;
    margin: 40px auto;
}
.Gallery .G2 li{
	float: left;
	list-style: none;
	height: 280px;
	background-color: black;
	margin-right: 20px;
    margin-bottom: 20px;
}
.Gallery .G2 li .black{
	color: white;
	line-height: 30px;
    margin-left: 15px;
}
.Footer{
	height: 60px;
    margin-top: 40px;
    background-color: #07cbc9;
}
.Footer p{
	height: 60px;
    line-height: 60px;
    width: 300px;
    margin: 0 auto;
    color: white;
}


写回答

3回答

好帮手慕阿满

2019-07-12

已采纳

同学你好，在代码中设置.About .b时，设置了宽度为1500px，如：

http://img.mukewang.com/climg/5d285f6c00011b1603850209.jpg

当浏览器缩小，宽度小于1500px时，为了能够达到1500px的宽度，造成浏览器可以左右滑动。

这里建议同学在设置样式时，不要设置具体的数值，可以使用百分比来代替。

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

0

weixin_慕盖茨9271251

提问者

2019-07-12

http://img.mukewang.com/climg/5d2852ec00010c7d10400461.jpg窗口化之后ABOUT区与其他区域之间，右边多出来了空白

0

好帮手慕阿满

2019-07-12

同学的代码完成的很不错，当浏览器缩放显示时，整体效果不乱的，同学说的结构乱是指什么呢？建议同学详细描述一下。

祝：学习愉快~

0

0 学习 · 9666 问题

查看课程

相似问题

浮动后如和放大缩小浏览器不发生变化

回答 2

老师，如何让图片在浏览器显示100%？

回答 1

在浏览器中title里面的中文乱码了，怎么解决

回答 2

文本框无法自适应浏览器

回答 2

老师我的about区下面的部分做好了但是电脑换分辨率排版会乱掉怎么办

回答 2

打开慕课网App查看更多内容