我应该提一下，我的屏幕分辨率为1920x1080，但是如果使用的浏览器宽度增加了150％，图片和标题的大小也会增加，并且移动的位置也会变小留在原地的UL。如果有人知道我在CSS代码中做错了什么，我将在下面发布我的代码：
<body>
<z13>
<img src="marioswine.png" style = "display: block; margin: 0 auto;"
alt="cactxt" height = "125px" class = "center"/>
</z13>
<e2><img src="y.png" style = "display: block; margin: 0 auto;" alt="albany"
class = "strip"/></e2>
<h2 class = "announcement"> Announcements</h2>
<ul class = "wall">
<li class = "bars"></li>
</ul>
<div style = "position: absolute; left: 0px; top: 180px;">
<button id = "home" class = "strip"> HOME </button>
<button id = "about"> About Us </button>
<button id = "locations"> Locations </button>
<button id = "wine"> wine </button>
<button id = "beer"> beer </button>
<button id = "spirits"> spirits </button>
<button id = "lottery"> lottery </button>
<button id = "contact"> Contact Us </button>
</div>
<div>
<d>
<p>We are the greatest wine in all of wine....its gonne be yuuuuuuuge!!!!!
</p>
</d>
</div>
<div class="slideshow-container" style = "position: absolute; left: 260px;
top: 180px;">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="wine.jpg" style="width:100%">
<div class="text">Awesome wine</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="beer.jpg" style="width:100%">
<div class="text">Great Beer!</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="spirits.png" style="width:100%">
<div class="text">The spirit of spirits!!</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
//This is my CSS code, I think the real problem should be here
<style type = "text/css">
//This is what i tried to use to be able to fit my content into a device of
any size, but it's not working
body{
width:100%;
height:100%;
}
z11{
top: -50px;
position: absolute;
}
z12{
top: 5px;
position: absolute;
}
z13{
top: 0px;
left: 40%;
//right: 5%;
position: absolute;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
}
.strip {
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 100%;
}
a3{ position: absolute;
top: 175px;
left: 245px;
}
b{ position: absolute;
top: 350px;
left: 255px;
width: 100%;
}
c{
position: absolute;
top: 225px;
right: 300px;
}
d{
position: absolute;
top: 525px;
left: 260px;
width: 100%;
max-width: 50%;
min-width: 20%;
//height: 100%;
border: 1px solid black;
background-color: #DCDCDC;
}
e{
position: absolute;
top: 350px;
right: 5px;
//max-width: 50%;
width: 500px;
}
e2{
position: absolute;
top: 175px;
left: 775px;
//max-width: 100%;
}
ul.wall{position: fixed;
position: absolute;
list-style-type:none;
top: 125px;
left: 0;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #2b2622;
}
li.bars{
display: block;
color: white;
text-align: center;
padding: 25px 16px;
text-decoration: none;
}
.side {
background-color: #555555; /* black */
color: white;
width: 250px;
border: none;
padding: 39px 32px;
text-align: center;
text-decoration: none;
display: block;
font-size: 18px;
}
button {
background-color: #555555; /* black */
color: white;
width: 250px;
border: none;
padding: 39px 32px;
text-align: center;
text-decoration: none;
display: block;
font-size: 18px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
button:hover {
background-color: #688396; /* Green */
color: black;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
h2.announcement{
position: absolute;
top: 175px;
left: 1400px;
}
</style>
<style>
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 500px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 90%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
left: 90.7%;
border-radius: 3px 0 0 3px;
//width: 45px;
}
.prev {
left: 0%;
border-radius: 3px 0 0 3px;
width: 45px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover{
background-color: rgba(0,0,0,0.8);
}
.next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
//background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
</style>