cari

Rumah  >  Soal Jawab  >  teks badan

Tajuk yang ditulis semula ialah: Kaedah pelaksanaan memusatkan elemen div dan kedudukan

Saya cuba mencipta semula sesuatu seperti ini tetapi sekarang saya menghadapi beberapa isu. Masalah pertama yang saya hadapi ialah memusatkan div 'utama' saya, saya melakukan ini: 

body{
  background: linear-gradient(110deg, #fdcd3b 60%, #ffed4b 60%);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.main {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Tetapi disebabkan 'kedudukan: tetap' latar belakang saya tidak lagi ditunjukkan dan saya menambah latar belakang dalam badan.

Satu lagi masalah yang saya hadapi ialah di tapak web yang ingin saya buat semula, terdapat dua elemen p bersebelahan, tetapi saya tidak dapat menggabungkan dua elemen p saya menggunakan kod ini: 

p{
  margin: 0;
  display:inline;
  float:left;
}

Beginilah rupa elemen p saya dan keseluruhan html: 

<!DOCTYPE html>
<html>
  <head>
    <title>练习网站</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
    <script src="https://kit.fontawesome.com/c934cb6477.js" crossorigin="anonymous"></script>
  </head>
    <body>

      <main class="container">

        <!-- <header>
          <div class="header">
          </div>
        </header> -->

        <div class="main">
          <h1>嘿，我是测试</h1>
          <h2>学生软件开发者。</h2>

          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquam arcu et urna placerat dignissim. Nulla nec sollicitudin lorem, at maximus lorem. Cras porta quis sapien ut ornare. Nullam nec sem molestie, scelerisque sapien sit amet, dignissim ex. Sed eget felis gravida, maximus risus a, sodales libero. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquam arcu et urna placerat dignissim. Nulla nec sollicitudin lorem, at maximus lorem. Cras porta quis sapien ut ornare. Nullam nec sem molestie, scelerisque sapien sit amet, dignissim ex. Sed eget felis gravida, maximus risus a, sodales libero. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
        </div>


        <footer class="bg-dark text-center text-white footer fixed-bottom">
          <div class="container p-4 pb-0">
            <section class="mb-4">
              <!-- Linkedin -->
              <a class="btn btn-outline-light btn-floating m-1" href="#" target="_blank" role="button"
                ><i class="fab fa-linkedin-in"></i
              ></a>
        
              <!-- Github -->
              <a class="btn btn-outline-light btn-floating m-1" href="#" target="_blank" role="button"
                ><i class="fab fa-github"></i
              ></a>

             <!-- CV -->
             <a class="btn btn-outline-light btn-floating m-1" href="#" target="_blank" role="button"
             ><i class="fa-regular fa-address-card"></i
           ></a>
         </section>
          </div>
        
          <!-- 版权 -->
          <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
            © 
            <span id="current-year"></span>
            版权所有：
            <a class="text-white">测试</a>
          </div>
        </footer>

      </main>

      <script src="/Files/Js/function.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
    </body>
</html>

P粉803444331P粉803444331441 hari yang lalu492

membalas semua(2)saya akan balas

  • P粉208469050

    P粉2084690502023-09-10 09:04:18

    Daripada meletakkan secara mutlak kandungan utama anda, anda boleh menggunakan paparan: lentur pada elemen badan dan tetapkannya kepada 100vj supaya ia meliputi port pandangan. Kemudian latar belakang akan muncul semula.

    Untuk elemen p anda, begitu juga, bungkusnya dalam div dengan paparan: lentur dan letakkannya sebelah menyebelah seperti contoh di bawah. 

    body {
  background: linear-gradient(110deg, #fdcd3b 60%, #ffed4b 60%);
  background-size: cover;
  height: 100vh;
  display: flex;
  /*display flex allows you the center the main element in the middle of your page */
  align-items: center;
  justify-content: center;
}

.main {
  /* not needed */
}

.inline-container {
  display: flex;
  gap: 1rem;
}

.inline {
  display: block;
}
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/c934cb6477.js" crossorigin="anonymous"></script>

<main class="container">

  <!-- <header>
          <div class="header">
          </div>
        </header> -->

  <div class="main">
    <h1>嘿，我是测试</h1>
    <h2>学生软件开发人员。</h2>
    <div class="inline-container">
      <p class="inline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquam arcu et urna placerat dignissim. Nulla nec sollicitudin lorem, at maximus lorem. Cras porta quis sapien ut ornare. Nullam nec sem molestie, scelerisque sapien sit amet, dignissim
        ex. Sed eget felis gravida, maximus risus a, sodales libero. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
      <p class="inline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquam arcu et urna placerat dignissim. Nulla nec sollicitudin lorem, at maximus lorem. Cras porta quis sapien ut ornare. Nullam nec sem molestie, scelerisque sapien sit amet, dignissim
        ex. Sed eget felis gravida, maximus risus a, sodales libero. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    </div>
  </div>


  <footer class="bg-dark text-center text-white footer fixed-bottom">
    <div class="container p-4 pb-0">
      <section class="mb-4">
        <!-- Linkedin -->
        <a class="btn btn-outline-light btn-floating m-1" href="#" target="_blank" role="button"><i
              class="fab fa-linkedin-in"></i></a>

        <!-- Github -->
        <a class="btn btn-outline-light btn-floating m-1" href="#" target="_blank" role="button"><i
              class="fab fa-github"></i></a>

        <!-- CV -->
        <a class="btn btn-outline-light btn-floating m-1" href="#" target="_blank" role="button"><i
              class="fa-regular fa-address-card"></i></a>
      </section>
    </div>

    <!-- 版权 -->
    <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
      ©
      <span id="current-year"></span> 版权所有：
      <a class="text-white">测试</a>
    </div>
  </footer>

</main>

<script src="/Files/Js/function.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>

    balas
    0
  • P粉555696738

    P粉5556967382023-09-10 00:25:46

    Saya faham cara pemikiran anda, tetapi malangnya, ia tidak sepenuhnya betul. Anda lihat, reka bentuk halaman awal adalah berbeza sama sekali dari awal:

    Pencipta tidak memusatkan div utama, tetapi menambahkan padding pada badan 64px，然后将wrapper div的宽度设为100%，高度设为100% - 64px * 2. Jadi, untuk melakukan ini: 

    body{
  padding:64px;
}
.wrapper{
  height:calc(100vh - 64px * 2);
  width:100%;
  border: 1px solid black;
}
    <div class="wrapper"></div>

    balas
    0
  • Batalbalas