Buat Footer dengan Bantuan HTML dan CSS-tutorial js-php.cn

Buat Footer dengan Bantuan HTML dan CSS

Susan Sarandon

Lepaskan： 2025-01-04 20:58:40

asal

314 orang telah melayarinya

Create a Footer with the Help of HTML and CSS

Pengaki yang direka bentuk dengan baik ialah komponen penting bagi mana-mana tapak web. Ia menyediakan maklumat pengaki penting seperti butiran hubungan, pautan navigasi dan ikon media sosial, dan menyumbang kepada keseluruhan pengalaman pengguna. Dalam artikel ini, kami akan membimbing anda membuat footer dengan bantuan HTML dan CSS menggunakan pangkalan kod contoh. Mari terokai cara anda boleh mereka bentuk pengaki yang menarik dan responsif yang meningkatkan daya tarikan tapak web anda.

Mengapa Footer Penting?

Bahagian Pengaki HTML sering diabaikan tetapi memainkan peranan penting dalam reka bentuk tapak web. Pengaki boleh termasuk:

Pautan ke halaman penting (Dasar Privasi, Syarat Perkhidmatan).
Kandungan pengaki seperti maklumat hubungan atau lokasi.
Pautan media sosial untuk kebolehcapaian mudah.
Pengukuhan jenama dengan logo dan slogan.

Mereka bentuk pengaki dalam HTML CSS memastikan tapak web anda kekal mesra pengguna dan profesional.

Panduan Langkah demi Langkah untuk Mencipta Pengaki

*1. Menyediakan Struktur HTML
*
Untuk bermula, kita perlu menstruktur footer menggunakan HTML dan CSS. Berikut ialah contoh:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Footer Design</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="style.css">

  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
</head>
<body>

  <footer>



<p>This footer HTML structure is clean and organized. It uses div elements to group content into columns, providing easy readability and a solid foundation for styling.</p>

<p><strong>2. Styling the Footer with CSS<br>
**<br>
To enhance the **footer content</strong> visually, we use CSS:<br>
</p>

<pre class="brush:php;toolbar:false">@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
body{
  line-height: 1.5;
  font-family: 'Poppins', sans-serif;
}
*{
  margin:0;
  padding:0;
  box-sizing: border-box;
}
.container{
  max-width: 1170px;
  margin:auto;
}
.row{
  display: flex;
  flex-wrap: wrap;
}
ul{
  list-style: none;
}
.footer{
  background-color: #24262b;
    padding: 70px 0;
}
.footer-col{
   width: 25%;
   padding: 0 15px;
}
.footer-col h4{
  font-size: 18px;
  color: #ffffff;
  text-transform: capitalize;
  margin-bottom: 35px;
  font-weight: 500;
  position: relative;
}
.footer-col h4::before{
  content: '';
  position: absolute;
  left:0;
  bottom: -10px;
  background-color: #e91e63;
  height: 2px;
  box-sizing: border-box;
  width: 50px;
}
.footer-col ul li:not(:last-child){
  margin-bottom: 10px;
}
.footer-col ul li a{
  font-size: 16px;
  text-transform: capitalize;
  color: #ffffff;
  text-decoration: none;
  font-weight: 300;
  color: #bbbbbb;
  display: block;
  transition: all 0.3s ease;
}
.footer-col ul li a:hover{
  color: #ffffff;
  padding-left: 8px;
}
.footer-col .social-links a{
  display: inline-block;
  height: 40px;
  width: 40px;
  background-color: rgba(255,255,255,0.2);
  margin:0 10px 10px 0;
  text-align: center;
  line-height: 40px;
  border-radius: 50%;
  color: #ffffff;
  transition: all 0.5s ease;
}
.footer-col .social-links a:hover{
  color: #24262b;
  background-color: #ffffff;
}

/*responsive*/
@media(max-width: 767px){
  .footer-col{
    width: 50%;
    margin-bottom: 30px;
}
}
@media(max-width: 574px){
  .footer-col{
    width: 100%;
}
}

Salin selepas log masuk

CSS ini menambah:

Susun letak responsif.

Peralihan lancar untuk kesan tuding.
Skema warna yang menarik secara visual.

Amalan Terbaik untuk Merekabentuk Pengaki

*1. Pastikan Ia Ringkas dan Bermaklumat
*
Pengaki yang menggunakan HTML dan CSS harus memfokuskan pada kejelasan. Elakkan daripada mengacaukannya dengan maklumat yang berlebihan.

2. Jadikan Ia Responsif

Pastikan pengaki anda dalam HTML CSS kelihatan hebat pada semua peranti. Gunakan pertanyaan media untuk melaraskan gaya bagi skrin yang lebih kecil.

3. Sertakan Pautan Media Sosial

Menambah ikon menggalakkan pelawat untuk melibatkan diri dengan jenama anda di platform sosial.

4. Uji Reka Bentuk Pengaki

Sebelum digunakan, uji pengaki HTML anda merentas berbilang penyemak imbas untuk memastikan konsistensi.

Kesimpulan

Mencipta pengaki dengan bantuan HTML dan CSS ialah proses yang mudah tetapi bermanfaat yang meningkatkan pengalaman pengguna tapak web anda. Dengan melaksanakan petua dan struktur yang dikongsi dalam artikel ini, anda boleh mereka bentuk pengaki yang menarik secara visual, berfungsi dan dioptimumkan SEO.

Sertakan kandungan pengaki seperti butiran syarikat, maklumat pengaki dan pautan navigasi dengan berkesan. Ikuti amalan terbaik untuk menjadikan pengaki anda dalam HTML CSS bukan sekadar elemen reka bentuk tetapi aset strategik untuk tapak web anda.

Dengan langkah ini, anda akan mahir mencipta pengaki yang menakjubkan dan responsif menggunakan HTML dan CSS dalam masa yang singkat!

Atas ialah kandungan terperinci Buat Footer dengan Bantuan HTML dan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!