0
我花了一個小時找到問題,但我仍然無法找到它。 當我在瀏覽器中放大和縮小時,一些元素正在移動,一些變得更大。對我而言,移動的元素在67%的放大位置上。是什麼讓我的頁面看起來像這樣?
#structure {
\t background-color: blue;
\t height: 640px;
\t width: 1136px;
}
/* Starting the left side menu */
#select {
\t background-image: url('http://image.prntscr.com/image/876c2fde408443e0969559dfb4130848.png');
\t height: 640px;
\t width: 100px;
\t border-right: 4px solid rgba(69, 39, 28, 0.9);
\t float: left;
}
.menu {
\t height: 40px;
\t width: 40px;
\t margin-left: 30px;
\t margin-bottom: 34px;
}
.menu img {
\t height: 100%;
\t width: 100%;
}
#menu1 img, #menu7 img {
\t height: 120%;
\t width: 100%;
}
#menu1 {
\t height: 120px;
\t width: 40px;
\t margin-bottom: 50px;
\t margin-left: 37px;
\t margin-bottom: 30px;
}
#menu1 img {
\t margin-top: 7px;
\t height: 95px;
\t width: 28px;
}
#menu7 {
\t height: 40px;
\t width: 40px;
\t margin-top: 85px;
\t margin-left: 30px;
\t margin-bottom: 25px;
}
/* Closing the left side menu */
/* Starting slideshow Images */
#slideImg img {
\t position: relative;
\t height: 640px;
\t width: 683px;
\t float: left;
}
/* Closing slideshow Images */
/* Starting the quests side */
#quests {
\t background-image: url('http://image.prntscr.com/image/46c0de9e96474d5686b175d7cc343516.png');
\t height: 640px;
\t width: 350px;
\t float: left;
}
#seasonLevel {
\t height: 62px;
\t width: 62px;
\t z-index: 60px;
\t float: left;
\t position: relative;
\t top: 8px;
\t left: 10px;
}
#seasonLevel div {
\t position: relative;
\t top: 4px;
\t border: 3px solid white;
\t border-radius: 50%;
\t height: 60px;
\t width: 60px;
}
#seasonLevel div div {
\t border: 1px solid white;
\t border-radius: 50%;
\t height: 50px;
\t width: 50px;
\t margin: auto;
}
#seasonLevel div div p {
\t text-align: center;
\t font-family: sans-serif;
\t font-size: 30px;
\t color: rgba(255, 255, 255, 0.8);
\t position: relative;
\t bottom: 22px;
}
#seasonDesc {
\t width: 220px;
\t height: 65px;
\t position: relative;
\t left: 23px;
\t top: 12px;
\t float: left;
\t font-family: sans-serif;
}
#seasonDesc p:first-child {
\t font-size: 32px;
\t font-weight: bold;
\t position: relative;
\t bottom: 30px;
\t color: white;
\t font-weight: 600;
}
#seasonDesc p:last-child {
\t font-size: 23px;
\t font-weight: 600;
\t position: absolute;
\t top: 25px;
\t color: #DEDEDE;
\t opacity: 0.7;
}
#sunCont {
\t background-color: rgba(0, 0, 0, 0.3);
\t z-index: 50px;
\t height: 47px;
\t width: 314px;
\t position: relative;
\t right: 8px;
\t top: 33px;
\t z-index: 30px;
\t float: right;
}
.sun {
\t background-color: black;
\t opacity: 0.4;
\t width: 28px;
\t height: 28px;
\t border-radius: 50%;
\t margin-left: 0.01px;
\t margin-top: 9px;
\t display: inline-block;
\t position: relative;
\t left: 5px;
\t border: 1px solid white;
}
.rs {
\t height: 145px;
\t width: 331px;
\t position: relative;
\t background-image: url('http://image.prntscr.com/image/6741b6981a9543ac89e23b22521b631b.png');
\t display: inline-block;
\t background-size: 100%;
\t margin-bottom: 14px;
\t border: 0.2px solid black;
\t box-shadow: 0px 2px 0px black;
\t float: right;
}
/* Closing the quest side */
<!DOCTYPE html>
<html>
\t <head>
\t \t <title>VainGlory</title>
\t \t <meta name="viewport" content="width=device-width, initial-scale=1">
\t \t <link href='style.css' rel = 'stylesheet' type = 'text/css'>
\t </head>
\t <body>
\t \t <div id = 'structure'>
<!--LS-->
\t \t \t <div id = 'select'>
\t \t \t \t <div id = 'menu1'> <img src = 'http://image.prntscr.com/image/ddc0c251ac4d4ca6970047e49f575ff4.png'> </div>
\t \t \t \t <div class = 'menu'> <img src = 'http://image.prntscr.com/image/421e8f797e5e4af5abd56e2c84c48884.png'> </div>
\t \t \t \t <div class = 'menu'> <img src = 'http://image.prntscr.com/image/4cb6887febbd4bc7a6f8242688165a9c.png'> </div>
\t \t \t \t <div class = 'menu'> <img src = 'http://image.prntscr.com/image/64bf74940f2449de99f8eedd0115dc55.png'> </div>
\t \t \t \t <div class = 'menu'> <img src = 'http://image.prntscr.com/image/10dd330b566d4b1d9cedc7793c67460b.png'> </div>
\t \t \t \t <div class = 'menu'> <img src = 'http://image.prntscr.com/image/2f4fdfd4a3964536a84689e5316c04e8.png'> </div>
\t \t \t \t <div id = 'menu7'> <img src = 'http://image.prntscr.com/image/ac57c5f7b73f44b8aa92c58a2289cff8.png'> </div>
\t \t \t </div>
<!--MID-->
\t \t \t <div id = 'slideImg'>
\t \t \t \t <div> <img src = 'http://image.prntscr.com/image/1025277995cb442a950a05fe3b168614.jpg'> </div>
\t \t \t </div>
<!--RS-->
\t \t \t <div id = 'quests'>
\t \t \t \t <div class="rs">
\t \t \t \t \t <div id="seasonLevel">
\t \t \t \t \t \t <div>
\t \t \t \t \t \t \t <div>
\t \t \t \t \t \t \t \t <p>10<p>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t \t <div id = 'seasonDesc'>
\t \t \t \t \t \t <p>Autumn 2016</p>
\t \t \t \t \t \t <p>Remaining: <span id='time'></span></p>
\t \t \t \t \t </div>
\t \t \t \t \t <div id="sunCont">
\t \t \t \t \t \t <div class="sun">
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="sun">
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="sun">
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="sun">
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="sun">
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="sun">
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="sun">
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="sun">
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="sun">
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t <div class="rs">
\t \t \t \t </div>
\t \t \t \t <div class="rs">
\t \t \t \t </div>
\t \t \t \t <div class="rs">
\t \t \t \t </div>
\t \t \t </div>
<!--CLOSE-->
\t \t </div>
\t \t <script src="javas.js"></script>
\t </body>
</html>
非常感謝!而且,如果你願意並且有足夠的時間,想知道這件事真的有效,那將是一件很棒的事情。 –