Rumah > Soal Jawab > teks badan
Saya mengikuti tutorial YouTube tentang cara membuat bar navigasi responsif pada HTML menggunakan CSS dan semuanya berjalan lancar sehingga saya cuba menambah teks di tengah skrin dan ia muncul di sebelah kiri skrin (hanya jika resolusi tetingkap lebih tinggi daripada 952px jam lebar). Saya sangat baru dengan CSS dan semua yang saya cuba perbaiki nampaknya tidak berkesan. Kodnya adalah seperti berikut
* { padding: 0; margin: 0; text-decoration: none; list-style: none; box-sizing: border-box; } body { font-family: montserrat; } nav { background: #0082e6; height: 80px; width: 100%; } label.logo { color: white; font-size: 35px; line-height: 80px; padding: 100px; font-weight: bold; } nav ul { float: right; margin-right: 20px; } nav ul li { display: inline-block; line-height: 80px; margin: 0 5px; } nav ul li a { color: white; font-size: 17px; padding: 7px 13px; border-radius: 3px; text-transform: uppercase; } a.active, a:hover { background: #1b9bff; transition: .5s; } .checkbtn { font-size: 30px; color: white; float: right; line-height: 80px; margin-right: 40px; cursor: pointer; display: none; } #check { display: none; } @media (max-width: 952px) { label.logo { font-size: 30px; padding-left: 50px; } nav ul li a { font-size: 16px; } } @media (max-width: 858px) { .checkbtn { display: block; } ul { position: fixed; width: 100%; height: 100vh; background: #2c3e50; top: 80px; left: -100%; text-align: center; transition: all .5s; } nav ul li { display: block; } nav ul li a { font-size: 20px; } a:hover, a.active { background: none; color: #0082e6; } #check:checked~ul { left: 0; } } section { background: url(bg1.jpeg) no-repeat; background-size: cover; height: calc(100vh - 80px); opacity: 20%; }
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat"> <meta charset="utf-8"> <meta name="viewport" content="width=device-widht,initial-sclae=1.0"> <link rel="stylesheet" href="style.css"> <script src="https://kit.fontawesome.com/.js" crossorigin="anonymous"></script> <nav> <input type="checkbox" id="check"> <label for="check" class="checkbtn"> <i class="fas fa-bars"></i> </label> <label class="logo">Air</label> <ul> <li><a href='home.html'>Home</a></li> <li><a href='About.html'>About</a></li> <li><a href='Flights.html'>Flights</a></li> <li><a href='Contact.html'>Contact</a></li> </ul> </nav> <section> <h1 style="text-align:center;">test</h1> </section>
P粉9669797652024-04-02 10:24:29
Ini menyelesaikan masalah: tetapkan lebar kepada hanya lebar teks, kemudian selaraskan bekas ke tengah melalui margin 0 auto
.
test
P粉2162035452024-04-02 09:19:08
Menambah section { 边框:1px 实心透明; }
juga menyelesaikan masalah ini.
Lihat coretan kod di bawah.
* { padding: 0; margin: 0; text-decoration: none; list-style: none; box-sizing: border-box; } body { font-family: montserrat; } nav { background: #0082e6; height: 80px; width: 100%; } label.logo { color: white; font-size: 35px; line-height: 80px; padding: 100px; font-weight: bold; } nav ul { float: right; margin-right: 20px; } nav ul li { display: inline-block; line-height: 80px; margin: 0 5px; } nav ul li a { color: white; font-size: 17px; padding: 7px 13px; border-radius: 3px; text-transform: uppercase; } a.active, a:hover { background: #1b9bff; transition: .5s; } .checkbtn { font-size: 30px; color: white; float: right; line-height: 80px; margin-right: 40px; cursor: pointer; display: none; } #check { display: none; } @media (max-width: 952px) { label.logo { font-size: 30px; padding-left: 50px; } nav ul li a { font-size: 16px; } } @media (max-width: 858px) { .checkbtn { display: block; } ul { position: fixed; width: 100%; height: 100vh; background: #2c3e50; top: 80px; left: -100%; text-align: center; transition: all .5s; } nav ul li { display: block; } nav ul li a { font-size: 20px; } a:hover, a.active { background: none; color: #0082e6; } #check:checked~ul { left: 0; } } section { background: url(bg1.jpeg) no-repeat; background-size: cover; height: calc(100vh - 80px); opacity: 20%; border: 1px solid transparent; }
Air sssccctest