HTML网站在缩小时会变得疯狂 [英] HTML Website Going Crazy when Zoomed out
本文介绍了HTML网站在缩小时会变得疯狂的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我不知道为什么，但当我缩小我的网站时，代码似乎崩溃了，整个事情看起来很恶心。我已经检查了这个问题的其他答案，但是没有任何解决方案真正适合我的代码。
body {background-image：url（gradient.png）;背景重复：不重复; background-size：cover;} h1.heading {color：＃046289; font-size：50px; margin-top：100px; text-align：center; font-family：'Poppins'，sans-serif;} p.heading {color：＃046289; font-family：'Poppins'，sans-serif; font-size：20.8px; font-weight：600;位置：相对; margin-left：70px;顶部：60px;} p.heading1 {color：＃046289; font-family：'Poppins'，sans-serif; font-weight：400;位置：相对; margin-left：70px;上：50px;} img.aml {width：280px;高度：280像素;位置：绝对; margin-left：360px; bottom：30px;} iframe.livevid {position：absolute; margin-left：840px;} p.vid {color：＃046289; font-family：'Poppins'，sans-serif; font-size：20.8px; font-weight：600;位置：绝对; margin-left：840px;顶部：313px;} p.vid1 {color：＃046289; font-family：'Poppins'，sans-serif; font-weight：400;位置：绝对; margin-left：840px; top：363px;} a {text-decoration：none;} pa：link {color：＃4204a5;} pa：visited {color：＃4204a5;} pa：hover {color：＃71a3f2;} / * BELOW - 导航栏* / ul {list-style-type：none;保证金：0;填充：0;溢出：隐藏;宽度：100％; } li {float：left;}。spacefornav {margin-left：462px;} li a：hover {color：＃71a3f2;} div.nav {color：＃046289;} li a {display：inline-block;颜色：＃046289; text-align：center; padding：8px 10px;文字修饰：无; font-family：'Poppins';无衬线字体; margin：0px 20px; font-weight：500; cursor：pointer;}
<！DOCTYPE html>< ; html lang =en-US>< head> < title>幼稚甘比诺< / title> < meta charset =UTF-8> < meta content ='width = device-width，initial-scale = 1.0，maximum-scale = 1.0，user-scalable = 0'name ='viewport'/> < link href =https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&subset=devanagari,latin-ext =stylesheet> < link rel =stylesheettype =text / csshref =stylesheet.css>< / head>< body> < h1 class =heading> CHILDISH GAMBINO< / h1> < UL> < div class =nav> < li class =spacefornav>< a href =home.html>主页< / a>< / li> < li>< a href =about.html>关于< / a>< / li> < li>< a href =music.html>音乐< / a>< / li> < li>< a href =contact.html>联络人< / a>< / li> < / DIV> < / UL> < p class =heading>AWAKEN MY LOVE！< / p> < p class =heading1>幼稚甘比诺的最新< br>最新鲜的专辑是< br> AVAILABLE NOW< a href =https://itunes.apple.com/us/album/awaken-my-love/id1173655524target =_ blank> iTunes< / a>，< br> < a href =https://play.spotify.com/album/4xnq1L6P551Qcb9gBXNMK7target =_ blank> Spotify< / a>和< a href =https://play.google.com/store/music/album?id=Bc3g3mmud6z3xm6todpsldagple&tid=song-Tdcdooebkcepkmj7amghovz2ncq&hl=entarget =_ blank> Google Play音乐< / a> ; < / p为H. < img src =images / awakenmylove.jpgclass =amltitle ='唤醒我的爱！'专辑艺术alt ='唤醒我的爱'专辑艺术> <<<< iframe width =280height =158src =https://www.youtube.com/embed/6v7W513Wj3g?rel=0frameborder =0allowfullscreen class = livevid>< / iframe> ; < p class =vid>立即观看！< / p> < p class =vid1> Childish Gambino在'Splendor In The Grass！中执行'3005'< / body>< / html>
解决方案
html，body {margin：0px;} body {background-color：rgb（74，107，174）; background-image：url（../ images / bg.jpg）;背景重复：不重复;背景位置：50％0％;背景大小：100％;宽度：100％; height：100％;}。inner-body {margin：0px auto;宽度：960像素;高度：970像素; background-color：rgba（255,255,255,0）;}。login {text-align：center; margin-left：641px; background-color：rgba（59,90,137,0.7）;宽度：315px;高度：20像素;填充顶：3px的;填充左：4像素; word-spacing：0.3px;字母间距：0.3px;白颜色; font-family：Calibri; font-size：12.5px;}。menu-outer {margin-top：30px; background-color：rgba（10,30,50,0.8）;填充：5像素; height：60px;}。menu {border-style：solid;高度：60像素;边框宽度：0.5px; border-color：rgb（100,100,150）; } .menu-image {position：absolute;边距：-50px;保证金左：18像素; background-image：url（../ images / logo.png）; height：150px; width：220px;}。menu-inner {margin-top：13px;身高：55px; margin-left：234px;颜色：rgb（164,211,241）; font-family：Trebuchet MS; font-size：18.5px;}。zone-outer {background-color：rgba（26,30,50,0.9）;身高：632px;}。zone {margin-left：auto; margin-right：auto; border-bottom-style：solid; border-bottom-color：rgb（100,100,150）;身高：625px;宽度：950像素;边框：1px固体; border-image：线性渐变（至底部，rgba（100,100,150,0），rgb（100,100,150））; border-image-slice：1;}。mini-zones {float：left;边距：25像素;保证金左：30PX;宽度：280像素; font-family：Trebuchet MS;白颜色; line-height：22.9px;}。footer {text-align：center;边距：5px的;填充顶：10px的; background-color：rgba（26,30,50,0.5）;宽度：960像素;高度：35px;填充：0.1px; font-family：Trebuchet MS;字体大小：14px的;颜色：白色;} ul.login {margin-right：10px; background-color：rgba（59,90,137,0.1）;显示：内联;填充左：0像素; margin-left：5px; color：white;} li.log {display：inline;} a：visited，a：link {color：rgb（164,211,241）; text-decoration：none;} li：hover {background-color：rgb（73,103,129）;文字修饰：无; color：white;} ul.menu-in {margin-top：0px;保证金左：50px的; padding：4.5px 3.5px 0px 3.5px;} ul.menu-in li {display：inline; margin-left：auto;填充：14px; border-radius：4px;} ul.menu-in li + li：before {position：absolute; margin-left：-22px;内容：|;显示：inline-block; padding-right：7px;颜色：rgb（164,211,241）; font-size：20px; text-decoration：none;} ul.login li {display：inline;} ins {color：rgb（164,211,241）;}。transperent {padding-left：30px;填充顶：0.8px; background-color：rgba（0,0,0,0.3）;身高：175px;白颜色; font-family：Trebuchet MS; font-size：42px;字间距：1px的;字母间距：9px;}。contrast {filter：brightness（180％）;}
<！DOCTYPE html> < HTML> < HEAD> < link rel =stylesheethref =css\main-style.css> < link rel =stylesheethref =css\home-page.css> < /头> <身体GT; < div class =inner-body> < div class =login> < ul class =login> < li>申请报价< / li> <李>&安培;＃9474;< /锂> < li>客户端登录< / li> <李>&安培;＃9474;< /锂> < li>车辆出口门户< / li> < / UL> < / DIV> < div class =menu-outer> < div class =menu> < div class =menu-image> < / DIV> < div class =menu-inner> < ul class =menu-in> < li>< a href =index.html> HOME< / a>< / li> < li>< a href =https://www.w3schools.com>关于FTZWS< / a>< / li> < li>< a href =services.html>我们的服务< / a>< / li> < li>< a href =https://www.w3schools.com>我们的客户< / a>< / li> < li>< a href =https://www.w3schools.com>联系我们< / a>< / li> < / UL> < / DIV> < / DIV> < / DIV> < div class =transperent> < p>带来技术&操作卓越。< / Pre> < / DIV> < div class =zone-outer> < div class =zone> < div class =mini-zones> < img class =contrastsrc =images / tile1.png> < p>设想一个国际门户，好的和商品流过国界。哪些国家可以降低税收，减少繁文，节，并消除路障。公司将货物和商品直接进口到自由贸易区 - 然后免税运送产品。< / p> < p>迈阿密自由贸易区通过直接的空中和海上运输连接，以及铁路和高速公路将北美，欧洲和亚洲连接到拉丁美洲和加勒比地区。由FTZ World SERVICES运营的47英亩（＃372）区为企业节省了时间和金钱。< / p> < p>< ins>< a href =https://www.w3schools.com>更多关于自由贸易区>< / a>< / ins>< / p> < / DIV> < div class =mini-zones> < img src =images / tile2.png> < p> FTZ World Services是您的世界门票。我们是迈阿密自由贸易区的授权运营商，即通往美洲的门户。我们每年从超过70个国家处理多达10亿美元的商品。< / p> < p>自由贸易区运营的领导者，FTZWS在幕后发挥魔力，提供卓越的物流和运营。 FTZWS的许多服务包括技术，公共仓储，庭院存储和现场美国海关。其他美国自由贸易区也受益于我们的技术支持和运营咨询。< / p> < p>< ins>< a href =https://www.w3schools.com>要求报价>< / a>< / ins>< / p> < / DIV> < div class =mini-zones> < img src =images / tile3.png> < p> FTZ World Service作为迈阿密自由贸易区的持牌运营商具有独特的优势。我们提供最先进的设施和卓越的区域管理记录，加上技术支持，仓储和存储。由于FTZWS了解美国海关规定，我们可以利用我们的软件和物流专业知识来加快您的文书工作，清除路障，并将产品更便宜，更快地推向市场。我们每月为数个行业的公司节省数千美元的费用。我们会给你更少的管理费用和更多的钱存放在你的口袋里。< / p> < p>< h>< a href =https://www.w3schools.com>更多关于我们提供的信息>< / a>< / ins>< / p> < / DIV> < / DIV> < / DIV> < div class =footer> < p style =margin-top：10px>版权所有©2014 FTZ World Services。版权所有。 < ins>联络我们< / ins> | < ins>要求报价< / ins>< / p> < / DIV> < / DIV> < / body>
来自说明，你给我理解当你的网页的宽度和高度发生变化时，div会在其他div上重合或重叠，如果这是你的问题，那么你最好先了解绝对位置和相对位置，并给出宽度高度边距边界填充等像素和百分比许多像w3schools一样的网站可供您浏览。另外，请阅读以下链接：
CSS - 百分比或像素？
为什么我不应该使用position：absolute来定位所有内容？
以下示例将作为参考很有用。I don't know why but when I zoom out of my website, the code seems to fall apart and the whole thing just looks disgusting. I've checked out other answers to this question but NONE of the solutions really tailor towards MY code.
body {
background-image: url(gradient.png);
background-repeat: no-repeat;
background-size: cover;
}
h1.heading {
color: #046289;
font-size: 50px;
margin-top: 100px;
text-align: center;
font-family: 'Poppins', sans-serif;
}
p.heading {
color: #046289;
font-family: 'Poppins', sans-serif;
font-size: 20.8px;
font-weight: 600;
position: relative;
margin-left: 70px;
top: 60px;
}
p.heading1 {
color: #046289;
font-family: 'Poppins', sans-serif;
font-weight: 400;
position: relative;
margin-left: 70px;
top: 50px;
}
img.aml {
width:280px;
height:280px;
position: absolute;
margin-left: 360px;
bottom: 30px;
}
iframe.livevid {
position: absolute;
margin-left: 840px;
}
p.vid {
color: #046289;
font-family: 'Poppins', sans-serif;
font-size: 20.8px;
font-weight: 600;
position: absolute;
margin-left: 840px;
top: 313px;
}
p.vid1 {
color: #046289;
font-family: 'Poppins', sans-serif;
font-weight: 400;
position: absolute;
margin-left: 840px;
top: 363px;
}
a {
text-decoration: none;
}
p a:link {
color: #4204a5;
}
p a:visited {
color: #4204a5;
}
p a:hover {
color: #71a3f2;
}
/*
BELOW - NAVIGATION BAR
*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
}
li {
float: left;
}
.spacefornav {
margin-left: 462px;
}
li a:hover {
color: #71a3f2;
}
div.nav {
color: #046289;
}
li a {
display: inline-block;
color: #046289;
text-align: center;
padding: 8px 10px;
text-decoration: none;
font-family: 'Poppins'; sans-serif;
margin: 0px 20px;
font-weight: 500;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Childish Gambino</title>
<meta charset="UTF-8">
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&subset=devanagari,latin-ext" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<h1 class="heading">CHILDISH GAMBINO</h1>
<ul>
<div class="nav">
<li class="spacefornav"><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="music.html">Music</a></li>
<li><a href="contact.html">Contact</a></li>
</div>
</ul>
<p class="heading">"AWAKEN MY LOVE!"</p>
<p class="heading1">
Childish Gambino's latest
<br>
and freshest album is
<br>
AVAILABLE NOW on <a href="https://itunes.apple.com/us/album/awaken-my-love/id1173655524" target="_blank">iTunes</a>,
<br>
<a href="https://play.spotify.com/album/4xnq1L6P551Qcb9gBXNMK7" target="_blank">Spotify</a> and <a href="https://play.google.com/store/music/album?id=Bc3g3mmud6z3xm6todpsldagple&tid=song-Tdcdooebkcepkmj7amghovz2ncq&hl=en" target="_blank">Google Play Music</a>
</p>
<img src="images/awakenmylove.jpg" class="aml" title="'Awaken My Love!' album art" alt="'Awaken My Love' album art">
<<iframe width="280" height="158" src="https://www.youtube.com/embed/6v7W513Wj3g?rel=0" frameborder="0" allowfullscreen class=livevid></iframe>
<p class="vid">Watch Now!</p>
<p class="vid1">Childish Gambino performing '3005'<br>live at Splendor In The Grass!</p>
</body>
</html>
解决方案
html, body{
margin: 0px;
}
body{
background-color: rgb(74, 107, 174);
background-image: url("../images/bg.jpg");
background-repeat: no-repeat;
background-position: 50% 0%;
background-size: 100%;
width:100%;
height:100%;
}
.inner-body{
margin: 0px auto;
width:960px;
height:970px;
background-color:rgba(255,255,255,0);
}
.login{
text-align: center;
margin-left: 641px;
background-color: rgba(59,90,137,0.7);
width: 315px;
height:20px;
padding-top:3px;
padding-left:4px;
word-spacing: 0.3px;
letter-spacing:0.3px;
color: white;
font-family: Calibri;
font-size:12.5px;
}
.menu-outer{
margin-top:30px;
background-color: rgba(10,30,50,0.8);
padding:5px;
height:60px;
}
.menu{
border-style: solid;
height:60px;
border-width:0.5px;
border-color: rgb(100,100,150);
}
.menu-image{
position: absolute;
margin-top:-50px;
margin-left:18px;
background-image: url("../images/logo.png");
height: 150px;
width:220px;
}
.menu-inner{
margin-top:13px;
height: 55px;
margin-left: 234px;
color: rgb(164,211,241);
font-family:Trebuchet MS;
font-size:18.5px;
}
.zone-outer{
background-color: rgba(26,30,50,0.9);
height:632px;
}
.zone{
margin-left: auto;
margin-right: auto;
border-bottom-style: solid;
border-bottom-color: rgb(100,100,150);
height: 625px;
width:950px;
border:1px solid;
border-image: linear-gradient(to bottom,rgba(100,100,150,0),rgb(100,100,150) );
border-image-slice: 1;
}
.mini-zones{
float:left;
margin-top:25px;
margin-left:30px;
width:280px;
font-family:Trebuchet MS;
color:white;
line-height:22.9px;
}
.footer{
text-align: center;
margin-top:5px;
padding-top:10px;
background-color: rgba(26,30,50,0.5);
width:960px;
height:35px;
padding:0.1px;
font-family:Trebuchet MS;
font-size:14px;
color:white;
}
ul.login{
margin-right: 10px;
background-color: rgba(59,90,137,0.1);
display: inline;
padding-left:0px;
margin-left: 5px;
color:white;
}
li.log{
display:inline;
}
a:visited,a:link {
color: rgb(164,211,241);
text-decoration: none;
}
li:hover {
background-color:rgb(73,103,129);
text-decoration: none;
color:white;
}
ul.menu-in{
margin-top:0px;
margin-left:50px;
padding:4.5px 3.5px 0px 3.5px;
}
ul.menu-in li{
display: inline;
margin-left: auto;
padding: 14px;
border-radius: 4px;
}
ul.menu-in li+li:before{
position: absolute;
margin-left: -22px;
content: "|";
display: inline-block;
padding-right: 7px;
color: rgb(164,211,241);
font-size: 20px;
text-decoration: none;
}
ul.login li{
display:inline;
}
ins{
color:rgb(164,211,241);
}
.transperent{
padding-left: 30px;
padding-top:0.8px;
background-color: rgba(0,0,0,0.3);
height: 175px;
color: white;
font-family:Trebuchet MS;
font-size: 42px;
word-spacing:1px;
letter-spacing:9px;
}
.contrast{
filter: brightness(180%);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css\main-style.css">
<link rel="stylesheet" href="css\home-page.css">
</head>
<body>
<div class="inner-body">
<div class="login">
<ul class="login">
<li>Request a Quote</li>
<li>│</li>
<li>Client Login</li>
<li>│</li>
<li>Vehicle Export Portal</li>
</ul>
</div>
<div class="menu-outer">
<div class="menu">
<div class="menu-image">
</div>
<div class="menu-inner">
<ul class="menu-in">
<li><a href="index.html">HOME</a></li>
<li><a href="https://www.w3schools.com">ABOUT FTZWS</a></li>
<li><a href="services.html">OUR SERVICES</a></li>
<li><a href="https://www.w3schools.com">OUR CLIENTS</a></li>
<li><a href="https://www.w3schools.com">CONTACT US</a></li>
</ul>
</div>
</div>
</div>
<div class="transperent">
<p>BRINGING TECHNOLOGY<br>AND OPERATIONAL EXCELLENCE.</Pre>
</div>
<div class="zone-outer">
<div class="zone">
<div class="mini-zones">
<img class="contrast" src="images/tile1.png">
<p>Imagine an international gateway where good and merchandise flow across borders. Where countries lower taxes, reduce red tape, and eliminate road blocks. Where companies import goods and merchandise directly into a Free Trade Zone - and then ship products out duty free.</p>
<p>The Miami Free Trade Zone connects North America, Europe and Asia to Latin America and Caribbean via direct air and sea transportation links, plus rail and expressway. Operatred by FTZ World SERVICES, the 47-acre Zone (#372) saves companies money and time.</p>
<p><ins><a href="https://www.w3schools.com">More about Free Trade Zone ></a></ins></p>
</div>
<div class="mini-zones">
<img src="images/tile2.png">
<p>FTZ World Services is your ticket to the world. We're the licensed operator of the Miami Free Trade Zone, the "Gateway to the Americas." We process as much as $1 billion in goods from more than 70 countries each year.</p>
<p>A leader in free trade zone operations, FTZWS works magic behind the scenes, offering logistical and operational excellence. FTZWS's many services include technology, public warehousing, yard storage and on-site U.S. Customs. Other U.S. free trade zones also benefit from our technological support and operational consulting.</p>
<p><ins><a href="https://www.w3schools.com">Request a quote ></a></ins></p>
</div>
<div class="mini-zones">
<img src="images/tile3.png">
<p>FTZ World Service has the unique advantage of being the licensed operator of the Miami Free Trade Zone. We offer state-of-the-art facilities and a stellar track record in zone management, plus technological support, warehousing, and storage. Because FTZWS understands U.S. Customs rules, we can use our software and logistical expertise to speed up your paperwork, remove road blocks, and get products to market cheaper and faster. We save companies across multiple industries thousands of dollars per month in fees. We'll give you less to manage and more dollars to keep in your pocket.</p>
<p><ins><a href="https://www.w3schools.com">More about what we offer ></a></ins></p>
</div>
</div>
</div>
<div class="footer">
<p style="margin-top:10px">Copyright ©2014 FTZ World Services. All Rights Reserved. <ins>Contact Us</ins> | <ins>Request a Quote</ins></p>
</div>
</div>
</body>
from the description, you gave I understood that when the width and height of your page are altered then divs coincide or overlap on other divs if this is your problem then you better first understand about position absolute and position relative and also giving widths heights margins borders padding etc in pixels and percentages there are so many websites available like w3schools for you to go through.Also, go through the following links CSS - Percentages or Pixels?
Why shouldn't I use position:absolute for positioning everything?
the following example will be useful as a reference.
这篇关于HTML网站在缩小时会变得疯狂的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
