Bina Laman Web Akordion Soalan Lazim-tutorial css-php.cn

Build a FAQ Accordion Website

pengenalan

Helo, pembangun! Saya teruja untuk berkongsi projek terbaharu saya: aplikasi webSoalan Lazim Accordion. Projek ini sesuai untuk mereka yang ingin mencipta bahagian Soalan Lazim yang interaktif dan mesra pengguna untuk tapak web mereka. Ini cara yang bagus untuk meningkatkan kemahiran pembangunan bahagian hadapan anda menggunakan HTML, CSS dan JavaScript sambil membina komponen praktikal yang boleh digunakan dalam pelbagai aplikasi.

Gambaran Keseluruhan Projek

Soalan Lazim Akordionialah aplikasi web yang direka untuk memaparkan soalan lazim dalam format yang boleh dikembangkan dan boleh dilipat. Dengan reka bentuk yang bersih dan moden, ia membolehkan pengguna mengklik pada soalan untuk mendedahkan jawapan yang sepadan. Projek ini mempamerkan cara membuat bahagian Soalan Lazim interaktif yang meningkatkan pengalaman pengguna dengan menjadikan kandungan mudah diakses.

Ciri-ciri

Akordeon Interaktif: Pengguna boleh mengklik pada soalan untuk menogol keterlihatan jawapan, meningkatkan kebolehbacaan kandungan.
Reka Bentuk Responsif: Aplikasi ini responsif sepenuhnya, memastikan pengalaman tontonan yang optimum pada kedua-dua peranti desktop dan mudah alih.
Ikon Dinamik: Ikon berubah untuk menunjukkan sama ada jawapan dikembangkan atau diruntuhkan.

Teknologi yang Digunakan

HTML: Menyediakan struktur untuk aplikasi Akordion Soalan Lazim.
CSS: Menggayakan aplikasi untuk mencipta reka bentuk yang bersih dan responsif.
JavaScript: Mengurus elemen interaktif, termasuk mengembangkan dan meruntuhkan jawapan dan menogol ikon.

Struktur Projek

Berikut ialah gambaran keseluruhan struktur projek:

FAQ-Accordion/ ├── index.html ├── style.css └── script.js

Salin selepas log masuk

index.html: Mengandungi struktur HTML untuk aplikasi Akordion Soalan Lazim.
style.css: Termasuk gaya CSS untuk mencipta reka bentuk yang menarik dan responsif.
script.js: Mengurus elemen interaktif, seperti mengembangkan dan meruntuhkan jawapan dan mengemas kini ikon.

Pemasangan

Untuk memulakan projek, ikut langkah berikut:

Klon repositori:

git clone https://github.com/abhishekgurjar-in/FAQ-Accordion.git

Salin selepas log masuk

Buka direktori projek:
```
cd FAQ-Accordion
```
Salin selepas log masuk
Jalankan projek:
- Buka fail index.html dalam pelayar web untuk melihat aplikasi Akordion Soalan Lazim.

Penggunaan

Buka aplikasidalam penyemak imbas web.
Klik pada soalanuntuk menogol keterlihatan jawapan.
Kembangkan dan runtuhkansoalan yang berbeza untuk melihat jawapannya.
Kemas kini atau tambah soalan baharumengikut keperluan.

Penerangan Kod

HTML

Fail index.html mentakrifkan struktur aplikasi Akordion Soalan Lazim, termasuk soalan dan jawapan. Berikut adalah coretan:

     FAQ accordion   
      FAQs   
   Is Frontend Mentor free?
   
 
   Frontend Mentor offers realistic coding challenges to help developers improve their frontend coding skills with projects in HTML, CSS, and JavaScript. It's suitable for all levels and ideal for portfolio building. 
 
 
 
   Can I use Frontend Mentor projects in my portfolio?
   
 
   Yes, Frontend Mentor offers both free and premium coding challenges, with the free option providing access to a range of projects suitable for all skill levels. 
 
 
 
   Can I use Frontend Mentor projects in my portfolio?
   
 
   Yes, you can use projects completed on Frontend Mentor in your portfolio. It's an excellent way to showcase your skills to potential employers! 
 
 
 
    How can I get help if I'm stuck on a Frontend Mentor challenge? 
   
 
   The best place to get help is inside Frontend Mentor's Discord community. There's a help channel where you can ask questions and seek support from other community members.

Salin selepas log masuk

CSS

Fail style.css menggayakan aplikasi Akordion Soalan Lazim, memastikan ia menarik dan responsif secara visual. Di bawah ialah beberapa gaya utama:

* { box-sizing: border-box; margin: 0; } body { background-color: hsl(275, 100%, 97%); } img { width: 100%; position: fixed; } .container { position: absolute; } .box { top: 100px; margin: 0 auto; background-color: hsl(0, 0%, 100%); max-width: 555px; position: relative; border-radius: 13px; padding: 20px; } .imageStar img { width: 36px; margin-left: 10px; } .section { padding: 5px; } .question { padding: 10px; display: flex; align-items: center; justify-content: space-between; } .answer { display: none; overflow: hidden; padding: 10px; } .answer.active { display: block; } .icon-img { display: flex; align-items: center; justify-content: center; } .icon-img img { position: fixed; width: 19px; } @media (max-width: 700px) { .box { max-width: 500px; } } @media (max-width: 500px) { .box { max-width: 400px; } }

Salin selepas log masuk

JavaScript

Fail script.js mengandungi fungsi untuk mengembangkan dan meruntuhkan jawapan. Berikut ialah coretan untuk demonstrasi:

const questions = document.querySelectorAll(".question"); questions.forEach(question => { question.addEventListener("click", () => { const answer = question.nextElementSibling; const icon = question.querySelector(".icon-img img"); // Toggle answer visibility answer.classList.toggle("active"); // Change icon if (answer.classList.contains("active")) { icon.src = "./assets/images/icon-minus.svg"; } else { icon.src = "./assets/images/icon-plus.svg"; } }); });

Salin selepas log masuk

Demo Langsung

Anda boleh melihat demo langsung projek Akordion Soalan Lazim di sini.

Kesimpulan

Membina aplikasi Akordion Soalan Lazim merupakan pengalaman yang menggembirakan dalam mencipta bahagian Soalan Lazim yang interaktif dan mesra pengguna. Projek ini menyerlahkan kepentingan penglibatan pengguna dan kebolehcapaian kandungan. Dengan menggunakan HTML, CSS dan JavaScript, kami telah membangunkan komponen yang meningkatkan pengalaman pengguna dengan membuat soalan lazim boleh diakses dengan mudah. Saya harap projek ini memberi inspirasi kepada anda untuk membina komponen interaktif anda sendiri. Selamat mengekod!