我在创建的名为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>

08-03 15:17
查看更多