不同分辨率作业问题

不同分辨率作业问题

http://img1.sycdn.imooc.com/climg//59a8e2ba00012a4e14400821.jpg

http://img1.sycdn.imooc.com/climg//59a8e2bc00015dbb13720770.jpg

不同分辨率下的 网页显示 为什么会出现错乱码
慕粉1330426222 2017-09-01
源自：项目：网页布局案例   2-10 作业题
21
收起

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

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

5回答
小丸子爱吃菜 2017-09-03 12:41:41

不同显示器分辨率不同，所以打开页面的效果会不同，针对这个问题，给你两点建议：

1、给每个区域最外层的盒子设置width为100%；

2、页面的元素的布局能使用浮动的就不适用定位，定位主要针对某个元素需要特定的显示在哪个位置。

还有你的代码粘的太乱了，建议你将CSS代码放到style标签里面~

如果还是没有解决你的问题，可以将代码弄好后，再重新发布一个问题，这样清晰些。

祝学习愉快！


0
收起回答
提问者 慕粉1330426222 2017-09-02 09:50:26 
<style type="text/css">
	
	body{min-width: 500px;font-family: "Microsoft YaHei UI";}
	a{text-decoration: none;color:white }
	button{font-size: 12px;}
	.button-font-size{font-size: 10px;};
		.clear{clear: both;}
		.header{width: 100%;height: 105px;background-color: #07cbc9;position: sticky;top: 0px;z-index: 999}
		.header .logo{height: 80px;padding-top: 25px; padding-left: 200px;float: left;}
		.header .nav{float: right;padding-right: 50px;}
		.header .nav ul li{float: left;height: 105px;line-height: 105px;text-align: center;list-style: none;color: white;width: 100px;}
		.yc:hover div{height: 105px;background-color: black;margin-top: -105px;width: 100px}
		.yc1:hover div{height: 105px;background-color: black;margin-top: -105px;width: 100px}
		.yc2:hover div{height: 105px;background-color: black;margin-top: -105px;width: 100px}
		.yc3:hover div{height: 105px;background-color: black;margin-top: -105px;width: 100px}
		.yc4:hover div{height: 105px;background-color: black;margin-top: -105px;width: 100px}
		.yc5:hover div{height: 105px;background-color: black;margin-top: -105px;width: 100px}
		.banner{width: 100%;}
		.banner-bg .bg{width: 100%;height: 655px;}
		.banner-layer{width: 100%;height: 655px;background-color: black;opacity: 0.5;position: absolute;top: 105px;}
		.banner-text{width: 300px;height: 300px;margin: 0 auto ;position: absolute;top: 275px;left: 35%;}
		.banner-text-name{background:rgba(0,0,0,0);width: 430px;height: 35px;padding-left: 10px;font-size: 13px;border: 2px solid gray;color: white;}
		.banner-text-phone{background:rgba(0,0,0,0);width: 430px;height: 35px;padding-left: 10px;font-size: 13px;margin-top: 20px;border: 2px solid gray;color: white;}
		.banner-text-email{background:rgba(0,0,0,0);width: 430px;height: 35px;padding-left: 10px;font-size: 13px;margin-top: 20px;border: 2px solid gray;color: white;}
		.banner-area{margin-top: 20px;font-size: 13px;background: rgba(0,0,0,0);padding-left: 20px;padding-top: 10px;color: white;width: 420px;}
		.banner-button{width: 60%; font-size: 13px;background: rgba(0,0,0,0);text-align: center;color: white;margin-top: 20px; height: 30px;padding:10px 10px 25px 10px; border: 2px solid gray;float: left;}
		.banner-button:hover{background-color:#07cbc9;}
		.about{width: 100%;}
		.about-title{width: 100%;height: 40px;position: absolute;top: 750px;text-align: center;padding-top: 10px;margin: 50px auto;}
		.about-line{width: 25px;height: 1px;background-color:#07cbc9; margin-left: 49.1%;margin: 120px auto 50px;}
		.about-text1{color:gray;text-align: center;margin-top: 25px;word-spacing: 5px;}
		.about-middle-mle{position: absolute;margin-left: 33%;margin-top: 50px;}
		.about-middle-mle img{width: 500px;height: 380px;}
		.about-middle-right{margin-left: 70%;position: absolute;margin-top: 50px;}
		.about-middle-right-1{text-align: center;border: 1px solid #07cbc9;width: 80px;padding: 10px;}
		.about-middle-right-line{border: 1px solid #07cbc9;margin: 10px 30px;width: 20px;}
		.about-middle-right-2{margin-top: 20px;text-align: center;border: 1px solid #07cbc9;width: 80px;padding: 10px;}
		.about-middle-text1{font-size: 13px;color: gray}
		.about-middle-left-title{font-size: 40px;margin-left: 18%;position: absolute;margin-top: 50px;}
		.about-middle-left-text{background:rgba(0,0,0,0);line-height: 1.5em;border: 1px solid gray;width: 350px;padding: 20px;word-spacing: 10px;margin-left: 18%;position: absolute;margin-top: 150px;}
		.about-middle-left-button{background-color: black;color: white;margin-left: -2px;margin-top:20px;padding: 15px;font-size: 25px;border: none;}
		.about-middle-left-button:hover{background: white;color: black;border: 2px solid black;}
		.about-bottom{width: 100%;height: 800px;background-color: #07cbc9;margin-top: 500px;color: white;font-size: 30px;}
		.about-bottom-image1{width: 25%;height: 400px;float:left;}
		.about-bottom-image1 img{width: 100%;height: 400px;}
		.about-bottom-text1{width: 24%;height: 385px;float: left;padding-top: 15px;padding-left: 15px;line-height: 30px;}
		.about-bottom-text1-1{font-size: 80%;}
		.about-bottom-text1-2{font-size: 50%;color: gray;}
		.button{padding: 15px;color: white;background-color: black;border: none;font-size: 20px;margin: 10% 20%}
		.button:hover{background: white;color: black;border: 2px solid gray;background-color: transparent;}
		.about-bottom-image2{width: 23%;height: 400px;float: left}
		.about-bottom-image2 img{width: 100%;height: 400px;}
		.about-bottom-text2{line-height: 30px;width: 24%;float: right;padding-top: 15px;height: 385px;padding-left: 2px;}
		.about-bottom-text3{line-height: 30px;width: 24%;float: left;padding-top: 15px;height: 385px;}
		.about-bottom-image3{width: 25%;float: left}
		.about-bottom-image3 img{width: 100%;height: 400px;}
		.about-bottom-text4{line-height: 30px;width: 24%;float: left;padding-top: 15px;height: 385px;padding-left: 10px;}
		.about-bottom-image4{width: 25%;float: right;}
		.about-bottom-image4 img{width: 100%;height: 400px;}
		.gallery{width: 100%;height: 750px;}
		.gallery-title{width: 100%;height: 40px; margin-top: 50px;position: absolute;top: 2250px;text-align: center;padding-top: 10px;}
		.gallery-bottom{width: 100%;height: 710px;}
		.gallery-bottom-image-1 img{width: 20%;height: 10%;margin-top: 50px; margin-left: 20%;float: left}
		.gallery-bottom-image-2 img{width: 20%;height: 10%;margin-top: 50px; margin-left: 20px;float: left}
		.gallery-bottom-image-3 img{width: 20%;height: 10%;margin-top: 50px; margin-left: 20px;}
		.gallery-bottom-image-1-text-1{width: 20%;height: 10px;background-color: black;color: white;padding: 20px 0px;margin-left: 20%;margin-top: -5px; word-spacing: 10px;float: left;}
		.gallery-bottom-image-1-text-2{width: 20%;height: 10px;background-color: black;color: white;padding: 20px 0px;margin-left: 20px; margin-top: -5px;word-spacing: 10px; float: left;}
		.gallery-bottom-image-1-text-3{width: 20%;height: 10px;background-color: black;color: white;padding: 20px 0px;margin-left: 20px;margin-top: -5px;word-spacing: 10px; float: left;}
		.gallery-bottom-image-1-text-3-3{width: 20%;height: 10px;background-color: black;color: white;padding: 20px 0px; margin-left: 20px; margin-top: -5px;word-spacing: 10px; float: left;}
		.footer{background-color: #07cbc9;text-align: center;color: white;padding-top: 25px;width: 100%;height:45px;margin-top: 200px;}
	</style>


0
收起回答
提问者 慕粉1330426222 2017-09-02 09:49:59 
<div class="gallery">
				<div class="gallery-title">
					<h1>GALLERY</h1>
				</div>
				<div class="about-line"></div>	
				<div class="about-text1">
					<p>Lorem Ipsum is simply dummy text of the printing and typesetting<br>&nbsp;&nbsp;insdustry.Lorem Ipsum has been the industry's standard dummy <br></p>
					<p>text ever since the 1500s</p>
				</div>
				<div class="gallery-bottom">
					<div class="gallery-bottom-image-1">
						<img src="image\03-01.jpg">
					</div>
					<div class="gallery-bottom-image-2">
						<img src="image\03-02.jpg">
					</div>
					<div class="gallery-bottom-image-3"> 
						<img src="image\03-03.jpg">
					</div>
					<div class="gallery-bottom-text">
						<div class="gallery-bottom-image-1-text-1">SCIENCE LAB</div>
						<div class="gallery-bottom-image-1-text-2">INDOOR STADIUM</div>
						<div class="gallery-bottom-image-1-text-3-3">TRANSPORTATION</div>
					</div>
					<div class="gallery-bottom-image-1">
						<img src="image\03-04.jpg">
					</div>
					<div class="gallery-bottom-image-2">
						<img src="image\03-05.jpg">
					</div>
					<div class="gallery-bottom-image-3">
						<img src="image\03-06.jpg">
					</div>
					<div class="gallery-bottom-text">
						<div class="gallery-bottom-image-1-text-1">KIDS ROOM</div>
						<div class="gallery-bottom-image-1-text-2">MEDITATION  CLASSES</div>
						<div class="gallery-bottom-image-1-text-3">KIDS  PLAY  GROUND</div>
					</div>
					<div class="clear"></div>
				</div>
				<div class="clear"></div>
			</div>
			<div class="footer">
				 &copy;2016 imooc com 京IPC备13046642号
			</div>
	</div>
</body>
</html>


0
收起回答
提问者 慕粉1330426222 2017-09-02 09:49:10 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		*{margin: 0;padding: 0;}
	</style>
	<link rel="stylesheet" type="text/css" href="cssworkcss.css">
</head>
<body>
	<div class="header">
		<div class="logo">
			<img src="image\logo.png">
		</div>
		<div class="nav">
			<ul>
				<li class="yc">
					<a href="#">HOME</a>
					<div></div>
				</li>
				<li class="yc1">
					<a href="#">ABOUT</a>
					<div class="yc1"></div>
				</li>
				<li class="yc2">
					<a href="#">GALLERY</a>
					<div></div>
				</li>
				<li class="yc3">
					<a href="#">FACULTY</a>
					<div class="yc3"></div>
				</li>
				<li class="yc4">
					<a href="#">EVENTS</a>
					<div class="yc4"></div>
					</li>
				<li class="yc5">
					<a href="#">CONTACT</a>
					<div class="yc5"></div>
				</li>
			</ul>
		</div>
		<div class="clear"></div>
	</div>

<div class="banner">

<div class="banner-bg">

<img src="image\banner3.jpg" class="bg">

</div>

<div class="banner-layer"></div>

<div class="clear"></div>

<div class="banner-text">

<div banner-text-1>

<input type="text" name="your Name" placeholder="your Name" class="banner-text-name">

</div>

<div banner-text-2>

<input type="text" name="your Phone" placeholder="your Phone" class="banner-text-phone">

</div>

<div banner-text-3>

<input type="text" name="your Email" placeholder="your Email" class="banner-text-email">

</div>

<div>

<textarea placeholder="Write Your Conmment Here" rows="10%" cols="50%" class="banner-area"></textarea>

</div>

<div>

<button class="banner-button">SEND MESSAGE</button>

<div></div>

</div>

<div class="clear"></div>

</div>

<div class="about">

<div class="about-title">

<h1>ABOUT</h1>

</div>

<div class="about-line"></div>

<div class="about-text1">

<p>Lorem Ipsum is simply dummy text of the printing and typesetting<br>&nbsp;&nbsp;insdustry.Lorem Ipsum has been the industry's standard dummy <br></p>

<p>text ever since the 1500s</p>

</div>

<div class="about-middle">

<div class="about-middle-mle">

<img src="image\bb3.jpg">

</div>

<div class="about-middle-right">

<div class="about-middle-right-1">

<p>700000</p>

<div class="about-middle-right-line"></div>

<p class="about-middle-text1">Student</p>

</div>

<div class="about-middle-right-2">

<p>600</p>

<div class="about-middle-right-line"></div>

<p class="about-middle-text1">Faculty</p>

</div>

</div>

<div class="about-middle-left-title">

<p>&nbsp;&nbsp;A WORD <br>ABOUT US</p>

</div>

<div class="about-middle-left-text">

<p>Praesent dignissim vivverra est,sed<br>bibendum ligula congue non.Sed ac nisl<br>et felis gravida commodo?Supendisse<br>eget ullamcorper ipsum.Suspendisse<br>diam amet.</p>

<button class="about-middle-left-button">EXPLORE</button>

<div></div>

</div>

<div class="clear"></div>

</div>

<div class="about-bottom">

<div class="about-bottom-image1">

<img src="image\b1.jpg">

</div>

<div class="about-bottom-text1">

<p class="about-bottom-text1-1">Library</p><br>

<p class="about-bottom-text1-1">lorem Ipsum is simply dummy text of the<br>printing and typesetting industry</p>

<p class="about-bottom-text1-2">lorem Ipsum has been the industry's standard dummy<br>text ever since the 1500s,when an unknown printer took<br>a gally of type and scrambled it to make a type specimen book.</p>

<div class="about-buuton"><button class="button">EXPLORE</button></div>

</div>

<div class="about-bottom-image1">

<img src="image\b2.jpg">

</div>

<div class="about-bottom-text2">

<p class="about-bottom-text1-1">Computer Lab</p><br>

<p class="about-bottom-text1-1">lorem Ipsum is simply dummy text of the<br>printing and typesetting industry</p>

<p class="about-bottom-text1-2">lorem Ipsum has been the industry's standard dummy<br>text ever since the 1500s,when an unknown printer took<br>a gally of type and scrambled it to make a type specimen book.</p>

<button class="button">EXPLORE</button>

</div>

<div class="about-bottom-text1">

<p class="about-bottom-text1-1">Conference Hall</p><br>

<p class="about-bottom-text1-1">lorem Ipsum is simply dummy text of the<br>printing and typesetting industry</p>

<p class="about-bottom-text1-2">lorem Ipsum has been the industry's standard dummy<br>text ever since the 1500s,when an unknown printer took<br>a gally of type and scrambled it to make a type specimen book.</p>

<button class="button">EXPLORE</button>

</div>

<div class="about-bottom-image3">

<img src="image\b3.jpg">

</div>

<div class="about-bottom-text4">

<p class="about-bottom-text1-1">Play Ground</p><br>

<p class="about-bottom-text1-1">lorem Ipsum is simply dummy text of the<br>printing and typesetting industry</p>

<p class="about-bottom-text1-2">lorem Ipsum has been the industry's standard dummy<br>text ever since the 1500s,when an unknown printer took<br>a gally of type and scrambled it to make a type specimen book.</p>

<button class="button">EXPLORE</button>

</div>

<div class="about-bottom-image4">

<img src="image\b4.jpg">

</div>

<div class="clear"></div>

</div>


0
收起回答
好帮手慕糖 2017-09-01 16:20:27

你好，这里要根据你的代码来分析哟，建议：把你的代码粘贴过来，然后告知测试使用的浏览器，方便大家测试及解决问题！

祝学习愉快~

0
收起回答
  • 提问者 慕粉1330426222 #1
    这个是全部代码 很多东西在不同分辨率下显示的布局就会乱 用的safari 和火狐 这俩个浏览器
    2017-09-02 09:52:01
  • 提问者 慕粉1330426222 #2
    展示出的效果是2-9作业题的效果
    2017-09-02 09:52:46
问题已解决，确定采纳
还有疑问，暂不采纳

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

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

0 星

相似问题

老师，我的作业
1 0 5
请问mipmap目录下的各种分辨率文件夹有什么区别呢
0 0 3
分辨率不同
18 0 3
老师为什么浏览器大小默认100%是这样的？
7 0 3
不同分辨率
9 0 1

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

前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！

了解课程

本课精华内容

问答 作业

为什么我的没有框

5 45

表格的问题

377 41

大家好,body前面有一个红色的小××，麻烦大家帮我看看

378 40

到底是cellspacing还是cellpacing?

0 35

课间活动的表格怎么实现，想了很久也想不出来

60 30

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

在线咨询

领取优惠

免费试听

领取大纲

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