简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Tajuk yang ditulis semula ialah: Kaedah pelaksanaan memusatkan elemen div dan kedudukan
P粉803444331
P粉803444331 2023-09-09 10:29:04
0
2
476

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粉803444331
P粉803444331

membalas semua(2)
P粉208469050
P粉2084690502023-09-10 09:04:18 Tingkat 2

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>
Suka +0
Tambah Balasan
P粉555696738
P粉5556967382023-09-10 00:25:46 Tingkat 1

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>
Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！