html - 使用引导程序开始一个新部分

问题描述

我想添加一个新部分，其中包含不与其他部分重叠的图像/文本，例如这是第一部分。[在此处输入图像描述][1] [1]：https://i.stack.imgur.com/6eSlL.png 这是第二部分：[在此处输入图像描述][2] [2]：https：/ /i.stack.imgur.com/seBGm.png

如您所见，有一个不同的部分填满了整个屏幕（chrome tab 的宽度和高度）。它们不是 2 个不同的 html 页面，它们位于同一个 html 文件中。这是证明：[在此处输入图像描述][3] [3]：https://i.stack.imgur.com/qwCiK.png

<body class="h-100 d-flex flex-column">
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark py-3">
        <div class="container">
            <div class="navbar-brand mx-auto"><h2 style="color: white;">Name</h2></div>

            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#burger"><span class="navbar-toggler-icon"></span></button>

            <div class="collapse navbar-collapse" id="burger">
                <ul class="navbar-nav mx-auto">
                    <li class="nav-item">
                        <a href="#python" class="nav-link px-3"><h2 style="color: white;">Python</h2></a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link px-3"><h2 style="color: white;">Name</h2></a>
                    </li>
                    <li class="nav-item">
                        <a href="#html&css" class="nav-link px-3"><h2 style="color: white;">Html&Css</h2></a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!--Secion One-->
    <section class="bg-dark d-flex align-items-center flex-1 text-light p-5 p-lg-0 text-center text-md-start">
        <div class="container">
            <div class="position-absolute top-50 start-50 translate-middle">
                <h1 class="hi">Design made by the <span style="color: #F23DFF;">youth</span></h1>
            </div>
                <div class="align-items-center text-center position-relative position-absolute top-50 start-0 translate-middle-y">
                    <h3 class="languages">About</h3>
                </div>
                <div class="align-items-center text-center position-relative position-absolute top-50 end-0 translate-middle-y">
                    <h3 class="languages">Langs</h3>
                </div>
        </div>            
    </section>
    <!--section Two-->
    <section class="justify-content-center d-flex">
        <div class="container position-absolute h-100">
            <svg class="svgOne" width="200" height="200" viewBox="0 0 600 600" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect width="600" height="600" fill="#C4C4C4"/>
                </svg>
                <h1 class="textOne">Never regret anything 
                    that made you smile.
                    </h1>
          </div>
      </section>
    <!--Section Three-->
    <section class="justify-content-center d-flex">
        <div class="container position-absolute h-100">
        </div>
    </section>
</body>

标签： htmlcss

html - 使用引导程序开始一个新部分

问题描述

解决方案

推荐阅读