我需要帮助。当我放大我的页面正在变成一团糟。 我会在此处发布我的代码及其截图。Screenshot of page when it isn't zoomed When it's zoomed.现在有什么方法可以修复它吗？ 而且，当我缩小时，它正在破碎。
我希望我解释得那么好。 这是我的代码：
body {
background: #DF7401;
background-size: cover;
font-family: Arial;
color: white;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
}
ul li{
float: left;
width: 200px;
height: 40px;
background-color: black;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
margin-right: 100px;
}
ul li a{
text-decoration: none;
color: white;
display: block;
}
ul li a:hover{
color: green;
}
ul li ul li{
display: none;
}
ul li:hover ul li{
display: block;
}
.obsah-top {
background: url(cont-top.png) no-repeat;
background-size: cover;
height: 50%;
box-shadow: 0 0 6px 2px #000000;
}
.stred-obrazok {
width: 200px;
height: 200px;
margin: 0;
top: 50%;
position: absolute;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
.uvodny-text {
font-family: Calibri;
font-size: 40px;
color: #008000;
text-align: center;
margin-top: 15%;
}
.pozadie {
position: absolute;
width: 70%;
background: rgba(0, 0, 0, 0) url("pozadie2.png") repeat scroll 0 0;
height: auto;
box-shadow: 0 0 6px 2px #000000;
margin-left: 16%;
margin-top: 7%;
z-index: -50;
}
h1 {
text-align: center;
font-family: Helvetica;
font-size: 35px;
color: #008000;
margin-top: 9%;
}
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.slider{
overflow: hidden;
height: 350px;
margin-top: 3%;
margin-right: 5%;
margin-left: 5%;
}
.slider figure div{
width: 20%;
float: left;
}
.slider figure img{
width: 100%;
float: left;
}
.slider figure{
position: relative;
width: 500%;
margin: 0;
left: 0;
animation: 30s slidy infinite;
}
@keyframes slidy{
0%{
left: 0%
}
10%{
left: 0%;
}
12%{
left: -100%;
}
22%{
left: -100%;
}
24%{
left: -200%;
}
34%{
left: -200%;
}
36%{
left: -300%;
}
46%{
left: -300%;
}
48%{
left: -400%;
}
58%{
left: -400%;
}
60%{
left: -300%;
}
70%{
left: -300%;
}
72%{
left: -200%;
}
82%{
left: -200%;
}
84%{
left: -100%;
}
94%{
left: -100%;
}
96%{
left: 0%;
}
100%{
left: 0%;
}
}
.box-1 {
width: 45%;
height: auto;
background: #DF7401;
box-shadow: 0 0 6px 2px #DF7401;
margin-left: 2%;
float: left;
margin-top: 6%;
}
.obrazokvboxe {
width: 50%;
height: auto;
float: left;
margin-left: 5%;
margin-top: 5%;
margin-bottom: 2%;
}
.box-2 {
width: 45%;
height: auto;
background: #DF7401;
box-shadow: 0 0 6px 2px #DF7401;
margin-right: 2%;
float: right;
margin-top: 6%;
}
p {
margin-left: 3%;
font-family: Calibri;
font-size: 23px;
color: #FFFFFF;
margin-right: 3%;
position: relative;
}
.textvboxe {
margin-left: 0%;
font-family: Helvetica;
font-size: 15px;
color: #008000;
margin-right: 3%;
margin-top: 23%;
}
h2 {
text-align: center;
font-family: Helvetica;
font-size: 25px;
color: #FFFFFF;
margin-top: 9%;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-left: 5%;
margin-bottom: 3%;
margin-top: 5%;
box-shadow: 0 0 6px 2px #6E6E6E;
}
.logo1 {
background-color: #FFFFFF;
float: left;
margin-left: 0;
margin-top: 0;
width: auto;
height: auto;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>Domov - TILIA Naturálna medicína</title>
<style type="text/css">
<body>
<ul>
<li><a><a href="domov.html">Domov</a></a>
</li>
<li><a><a href="o-nas.html">O nás</a></a>
<ul>
<li><a>Domov</a>
</li>
<li><a>O nás</a>
</li>
<li><a>Produkty</a>
</li>
<li><a>Blog</a>
</li>
<li><a>Kontakt</a>
</li>
</ul>
</li>
<li><a>Produkty</a>
<ul>
<li><a>Domov</a>
</li>
<li><a>O nás</a>
</li>
<li><a>Produkty</a>
</li>
<li><a>Blog</a>
</li>
<li><a>Kontakt</a>
</li>
</ul>
</li>
<li><a>Blog</a>
<ul>
<li><a>Domov</a>
</li>
<li><a>O nás</a>
</li>
<li><a>Produkty</a>
</li>
<li><a>Blog</a>
</li>
<li><a>Kontakt</a>
</li>
</ul>
</li>
<li><a>Kontakt</a>
</li>
</ul>
<div class="pozadie">
<h1>Vitajte na našej stránke!</h1>
<div class="slider">
<figure>
<div class="slide">
<img src="images/slide_one.jpg">
</div>
<div class="slide">
<img src="images/slide_two.jpg">
</div>
<div class="slide">
<img src="images/slide_three.jpg">
</div>
<div class="slide">
<img src="images/slide_four.jpg">
</div>
<div class="slide">
<img src="images/slide_five.jpg">
</div>
</figure>
</div>
<div class="box-1">
<div class="obrazokvboxe"><img src="chudnutie.png"></div>
<h2>Chudnutie</h2>
<div class="textvboxe">
<p>
Volam sa Dagmara Oremusova, narodila som sa v auguste 1970, pochadzam zo Zvolena, 15 rokov som žila mimo našej krajiny, 10 rokov v Mexicu. Tam som sa stretla s alternatívnou medicínou a iným pohľadom na zdravie a krásu tela.
</p>
</div>
<a href="zdravie.html" class="button">Čítať ďalej...</a>
</div>
<div class="box-2">
<div class="obrazokvboxe"><img src="zdravie.png"></div>
<h2>Zdravá výživa</h2>
<div class="textvboxe">
<p>
Volam sa Dagmara Oremusova, narodila som sa v auguste 1970, pochadzam zo Zvolena, 15 rokov som žila mimo našej krajiny, 10 rokov v Mexicu. Tam som sa stretla s alternatívnou medicínou a iným pohľadom na zdravie a krásu tela.
</p>
</div>
<a href="zdravie.html" class="button">Čítať ďalej...</a>
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
如果您正在谈论图片，只需添加img {max-width:100%}，但一般情况下，为了让您的网页在缩放时运行良好，您应该使用media query来定位您的网页宽度并为其应用自定义css屏幕。