Heim >Web-Frontend >CSS-Tutorial >Erstellen Sie eine FAQ-Akkordeon-Website
Hallo Entwickler! Ich freue mich, mein neuestes Projekt vorzustellen: eine FAQ Accordion-Webanwendung. Dieses Projekt ist perfekt für diejenigen, die einen interaktiven und benutzerfreundlichen FAQ-Bereich für ihre Websites erstellen möchten. Dies ist eine großartige Möglichkeit, Ihre Frontend-Entwicklungsfähigkeiten mithilfe von HTML, CSS und JavaScript zu verbessern und gleichzeitig eine praktische Komponente zu erstellen, die in verschiedenen Anwendungen verwendet werden kann.
Das FAQ-Akkordeon ist eine Webanwendung, die dazu dient, häufig gestellte Fragen in einem erweiterbaren und reduzierbaren Format anzuzeigen. Mit einem klaren und modernen Design ermöglicht es Benutzern, auf eine Frage zu klicken, um die entsprechende Antwort anzuzeigen. Dieses Projekt zeigt, wie man einen interaktiven FAQ-Bereich erstellt, der die Benutzererfahrung verbessert, indem Inhalte leicht zugänglich gemacht werden.
Hier ein Überblick über die Projektstruktur:
FAQ-Accordion/ ├── index.html ├── style.css └── script.js
Um mit dem Projekt zu beginnen, befolgen Sie diese Schritte:
Klonen Sie das Repository:
git clone https://github.com/abhishekgurjar-in/FAQ-Accordion.git
Öffnen Sie das Projektverzeichnis:
cd FAQ-Accordion
Führen Sie das Projekt aus:
Die Datei index.html definiert die Struktur der FAQ Accordion-Anwendung, einschließlich Fragen und Antworten. Hier ist ein Ausschnitt:
8b05045a5be5764f313ed5b9168a17e6 49099650ebdc5f3125501fa170048923 93f0f5c25f18dab9d176bd4f6de5d30e 7c8d9f814bcad6a1d7abe4eda5f773e5 26faf3d1af674280d03ba217d87e9421 b2386ffb911b14667cb8f0f91ea547a7FAQ accordion6e916e0f7d1e588d4f442bf645aedb2f d8b7823904473d155afe66ded7e78f93 5de102113aede4703971b3b780c58efb2cacc6d41bbb37262a98f745aa00fbf0 9c3bca370b5104690d9ef395f2c5f8d1 6c04bd5ca3fcae76e30b72ad730ca86d 7f673eaf394f0b5c3dca2aceb68a12d5 ca5768eb787de1bcd21f5c4158b542b2 8f9e4409b06fde1ff1d3a80f075ca0ed 4a249f0d628e2318394fd9b75b4636b1 FAQs a6d6d8732e7aab09e58fc20552ce9c66 473be947d5c9cf409521472bde60f1a854bdf357c58b8a65c66d7c19c8e4d114 473f0a7621bec819994bb5020d29372a d13b48bd4967f80660c6a04fe1b8824c 17414f1b537c801ab0729a61553cc1ca 684271ed9684bde649abda8831d4d355Is Frontend Mentor free?39528cedfa926ea0c01e69ef5b2ea9b0 07e90b323838b387931d6dbf6680ca9e e5f2a86ab908242660e95bdf084ea432 16b28748ea4df4d9c2150843fecfba68 16b28748ea4df4d9c2150843fecfba68 56c581cafed1e2f84ea91e1c5413333f e388a4556c0f65e1904146cc1a846bee 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. 94b3e26ee717c64999d7867364b1b4a3 16b28748ea4df4d9c2150843fecfba68 231a563c997aa9e3e0ae614bd16728b0 4d7ab0de9a42de71c682b0860bad1410 d13b48bd4967f80660c6a04fe1b8824c 17414f1b537c801ab0729a61553cc1ca 684271ed9684bde649abda8831d4d355Can I use Frontend Mentor projects in my portfolio?39528cedfa926ea0c01e69ef5b2ea9b0 07e90b323838b387931d6dbf6680ca9e e5f2a86ab908242660e95bdf084ea432 16b28748ea4df4d9c2150843fecfba68 16b28748ea4df4d9c2150843fecfba68 56c581cafed1e2f84ea91e1c5413333f e388a4556c0f65e1904146cc1a846bee 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. 94b3e26ee717c64999d7867364b1b4a3 16b28748ea4df4d9c2150843fecfba68 231a563c997aa9e3e0ae614bd16728b0 4d7ab0de9a42de71c682b0860bad1410 d13b48bd4967f80660c6a04fe1b8824c 17414f1b537c801ab0729a61553cc1ca 684271ed9684bde649abda8831d4d355Can I use Frontend Mentor projects in my portfolio?39528cedfa926ea0c01e69ef5b2ea9b0 07e90b323838b387931d6dbf6680ca9e e5f2a86ab908242660e95bdf084ea432 16b28748ea4df4d9c2150843fecfba68 16b28748ea4df4d9c2150843fecfba68 56c581cafed1e2f84ea91e1c5413333f e388a4556c0f65e1904146cc1a846bee Yes, you can use projects completed on Frontend Mentor in your portfolio. It's an excellent way to showcase your skills to potential employers! 94b3e26ee717c64999d7867364b1b4a3 16b28748ea4df4d9c2150843fecfba68 231a563c997aa9e3e0ae614bd16728b0 4d7ab0de9a42de71c682b0860bad1410 d13b48bd4967f80660c6a04fe1b8824c 17414f1b537c801ab0729a61553cc1ca 684271ed9684bde649abda8831d4d355 How can I get help if I'm stuck on a Frontend Mentor challenge? 39528cedfa926ea0c01e69ef5b2ea9b0 07e90b323838b387931d6dbf6680ca9e e5f2a86ab908242660e95bdf084ea432 16b28748ea4df4d9c2150843fecfba68 16b28748ea4df4d9c2150843fecfba68 56c581cafed1e2f84ea91e1c5413333f e388a4556c0f65e1904146cc1a846bee 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. 94b3e26ee717c64999d7867364b1b4a3 16b28748ea4df4d9c2150843fecfba68 231a563c997aa9e3e0ae614bd16728b0 4d7ab0de9a42de71c682b0860bad1410 16b28748ea4df4d9c2150843fecfba68 16b28748ea4df4d9c2150843fecfba68 36cc49f0c466276486e50c850b7e4956 73a6ac4ed44ffec12cee46588e518a5e
Die style.css-Datei gestaltet die FAQ-Accordion-Anwendung und stellt so sicher, dass sie optisch ansprechend und reaktionsfähig ist. Nachfolgend sind einige wichtige Stile aufgeführt:
* { 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; } }
Die Datei script.js enthält die Funktionalität zum Erweitern und Reduzieren von Antworten. Hier ist ein Ausschnitt zur Demonstration:
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"; } }); });
Sie können sich hier die Live-Demo des FAQ-Akkordeon-Projekts ansehen.
Der Aufbau der FAQ Accordion-Anwendung war eine lohnende Erfahrung bei der Erstellung eines interaktiven und benutzerfreundlichen FAQ-Bereichs. Dieses Projekt unterstreicht die Bedeutung der Benutzereinbindung und der Zugänglichkeit von Inhalten. Durch die Anwendung von HTML, CSS und JavaScript haben wir eine Komponente entwickelt, die das Benutzererlebnis verbessert, indem sie häufig gestellte Fragen leicht zugänglich macht. Ich hoffe, dass dieses Projekt Sie dazu inspiriert, Ihre eigenen interaktiven Komponenten zu erstellen. Viel Spaß beim Codieren!
Dieses Projekt wurde als Teil meiner kontinuierlichen Lernreise in der Webentwicklung entwickelt.
Das obige ist der detaillierte Inhalt vonErstellen Sie eine FAQ-Akkordeon-Website. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!