爲什麼這些div樣式會破壞我的網站佈局？

這是我的主要代碼：爲什麼這些div樣式會破壞我的網站佈局？

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<style> 
 
/*SLIDESHOW*/ 
 
body { 
 
    background-color: #150a35; 
 
} 
 
* {box-sizing:border-box} 
 
body {font-family: Verdana,sans-serif;} 
 
.mySlides {display:none} 
 

 
/* Slideshow container */ 
 
.slideshow-container { 
 
    max-width: 1000px; 
 
    position: relative; 
 
    margin: auto; 
 
} 
 

 

 
/* The dots/bullets/indicators */ 
 
.dot { 
 
    height: 13px; 
 
    width: 13px; 
 
    margin: 0 2px; 
 
    background-color: #bbb; 
 
    border-radius: 100%; 
 
    display: inline-block; 
 
    transition: background-color 0.6s ease; 
 
} 
 

 
.active { 
 
    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) { 
 
    .text {font-size: 11px} 
 
} 
 

 
/* SLIDESHOW */ 
 
/* Navigation list */ 
 
body {margin: 0;} 
 

 
ul.topnav { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #7c4dff; 
 
} 
 

 
ul.topnav li {float: left;} 
 

 
ul.topnav li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
ul.topnav li a:hover:not(.active) {background-color: #111;} 
 

 
ul.topnav li a.active {background-color: #4CAF50;} 
 

 
ul.topnav li.right {float: right;} 
 

 
@media screen and (max-width: 600px){ 
 
    ul.topnav li.right, 
 
    ul.topnav li {float: none;} 
 
} 
 

 
</style> 
 
</head> 
 

 
<body> 
 
<ul class="topnav"> 
 
    <li><a class="active" href="#hyperkeys">Hyper-Keys</a></li> 
 
    <li><a href="#home">Home</a></li> 
 
    <li><a href="#games">Games</a></li> 
 
    <li class="right"><a href="#tos">Terms of Service</a></li> 
 
    <li class="right"><a href="#contact">Contact</a></li> 
 
    <li class="right"><a href="#contact">FAQ</a></li> 
 
</ul> 
 

 
<br> 
 
<br> 
 
<div class="slideshow-container"> 
 

 
<div class="mySlides fade"> 
 
    <img src="1.png" style="width:100%"> 
 
</div> 
 

 
<div class="mySlides fade"> 
 
    <img src="2.png" style="width:100%"> 
 
</div> 
 

 
<div class="mySlides fade"> 
 
    <img src="3.png" style="width:100%"> 
 
</div> 
 

 
</div> 
 
<br> 
 

 
<div style="text-align:center"> 
 
    <span class="dot"></span> 
 
    <span class="dot"></span> 
 
    <span class="dot"></span> 
 
</div> 
 

 
<script> 
 
var slideIndex = 0; 
 
showSlides(); 
 

 
function showSlides() { 
 
    var i; 
 
    var slides = document.getElementsByClassName("mySlides"); 
 
    var dots = document.getElementsByClassName("dot"); 
 
    for (i = 0; i < slides.length; i++) { 
 
     slides[i].style.display = "none"; 
 
    } 
 
    slideIndex++; 
 
    if (slideIndex> slides.length) {slideIndex = 1}  
 
    for (i = 0; i < dots.length; i++) { 
 
     dots[i].className = dots[i].className.replace(" active", ""); 
 
    } 
 
    slides[slideIndex-1].style.display = "block"; 
 
    dots[slideIndex-1].className += " active"; 
 
    setTimeout(showSlides, 2000); // Change image every 2 seconds 
 
} 
 
</script> 
 
<br> 
 

 
</body> 
 
</html>

這是什麼樣子：

但當我添加此到<head>：

div { 
    padding: 15px 30px; 
    background: #7c4dff; 
    width: 430px; 
    border-radius: 8px; 
}

出現這種情況的網站：

所有的東西正好在同一時間，你可以什麼都不懂。我究竟做錯了什麼？

來源

2017-04-21 xVendetta

這似乎太簡單了，但..不要將該代碼添加到頭部？ – Toby

將div移動到樣式表的頂部。留下其餘的代碼。這意味着div {}將首先被應用，然後其餘的選擇器將根據您的調整改變它。如果將div {}放在樣式的末尾，則任何選定的div都將被div {}覆蓋。 – iSR5

使用

div { 
    padding: 15px 30px; 
    background: #7c4dff; 
    width: 430px; 
    border-radius: 8px; 
}

頁面上的變更每格匹配那些特性。 全部5個，不分任何職業。

你需要更具體的CSS選擇器。

div.thisdiv { 
    padding: 15px 30px; 
    background: #7c4dff; 
    width: 430px; 
    border-radius: 8px; 
} 

<div class="thisdiv" style="text-align:center"> 
    <span class="dot"></span> 
    <span class="dot"></span> 
    <span class="dot"></span> 
</div>

來源

2017-04-21 19:59:26 Scott

我應該如何解決這個問題？ – xVendetta

閱讀我的答案。 – Scott

爲什麼這些div樣式會破壞我的網站佈局？

回答

相關問題