我在创建的名为section1的div类中遇到问题,该段落不会向左对齐,并且当我尝试在封闭的标题下的style标签中编辑其样式时,.section1不会显示并且无法正常工作当我设置对齐方式时。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<style>
body {margin:0;}
.Header {
z-index: 100;
position: fixed;
top: 0;
width: 100%;
background-color: #000000;
height: 70px;
}
@media screen and (max-width:680px) {
.Header.responsive {position: relative;}
.Header.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
}
@media (max-width: 960px){
.Header .headerLogo{
position: relative;
display: flex;
width: 86px;
height: 15px;
margin: 0 auto;
}
}
.headerLogo{
text-align: center;
font-size: small;
font-style: italic;
font-family: Verdana;
color: white;
}
</style>
<body>
<div class="Header" id="myHeader">
<a class = "headerLogo">
</a>
</div>
</body>
<body>
<div class="w3-content w3-section" style="max-width:500px">
<img class="mySlides w3-animate-right" src= style="width:100%">
<!--<img class="mySlides w3-animate-right" src="img_rr_02.jpg" style="width:100%">
<img class="mySlides w3-animate-right" src="img_rr_03.jpg" style="width:100%">
<img class="mySlides w3-animate-right" src="img_rr_04.jpg" style="width:100%"> _-->
<div class="w3-center w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
</div>
</div>
<div id="section1" align="left" style = "background-color: black; color: white; padding: 500px">
<a class = "header1">
<h1 align="left" style = "font-size: x-large">A new way to fold a board</h1>
<p></p>
</a>
</div>
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 5000);
}
</script>
</body>
</html>
最佳答案
在下面的代码中减小padding
的值。
<div id="section1" align="left" style = "background-color: black; color: white; padding: 500px">
以下是更新的代码段。
I am having an issue in the div class that I created named section1, where the paragraph wont align left and when I try to edit the style of it in the style tag under the closed head, .section1 does not show up and does not work when I set the alignment.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lunation Boards</title>
</head>
<style>
body {margin:0;}
.Header {
z-index: 100;
position: fixed;
top: 0;
width: 100%;
background-color: #000000;
height: 70px;
}
@media screen and (max-width:680px) {
.Header.responsive {position: relative;}
.Header.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
}
@media (max-width: 960px){
.Header .headerLogo{
position: relative;
display: flex;
width: 86px;
height: 15px;
margin: 0 auto;
}
}
.headerLogo{
text-align: center;
font-size: small;
font-style: italic;
font-family: Verdana;
color: white;
}
</style>
<body>
<div class="Header" id="myHeader">
<a class = "headerLogo">
<h1>Lunation Boards</h1>
</a>
</div>
</body>
<body>
<div class="w3-content w3-section" style="max-width:500px">
<img class="mySlides w3-animate-right" src="file:///C:/Users/noaht/Downloads/skateboard.pdf" style="width:100%">
<!--<img class="mySlides w3-animate-right" src="img_rr_02.jpg" style="width:100%">
<img class="mySlides w3-animate-right" src="img_rr_03.jpg" style="width:100%">
<img class="mySlides w3-animate-right" src="img_rr_04.jpg" style="width:100%"> _-->
<div class="w3-center w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
<span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
</div>
</div>
<div id="section1" align="left" style = "background-color: black; color: white; padding: 10px; min-height:80vh">
<a class = "header1">
<h1 align="left" style = "font-size: x-large">A new way to fold a board</h1>
<p></p>
</a>
</div>
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 5000);
}
</script>
</body>
</html>