Transcription
Welches Medium Platz lassen Sie nicht so, machen Sie das Telefon nicht. Im heutigen Thema werden wir einen Gassektor innerhalb von Unternehmen erstellen und versuchen, einen sehr ähnlichen zu erstellen, den Sie hier sehen. Sehen Sie, wenn ich eine Frage öffne, schließt sich die andere offene Frage, und zu einem Zeitpunkt können Sie nur eine Frage öffnen. Wie können wir das erstellen? Okay, also habe ich hier auch ein Experiment gemacht. Wenn ich es hier abspiele, können Sie sehen, dass Sie die flüssigen Animationen nicht sehen, aber der Mechanismus ist sehr ähnlich. Wie können wir das erstellen? Ich lösche diesen Abschnitt hier und erstelle ihn erneut.
Ich platziere hier einen Abschnitt. Alles und alle Abschnitte gehen hinein. Wir platzieren einen Container darin. Und die anderen Abschnitte haben fast 198, 4G und ihre Polsterung auf den Schaltflächen. Also werden wir auch diesem Abschnitt oben und unten Polsterung zuweisen. Okay, denken Sie, und was brauchen wir in diesem Container? Wir wollen eine Überschrift, wir wollen eine Überschrift, in der steht "Häufig gestellte Fragen". Also überprüfen wir die Eigenschaften dieser Überschrift. Also ist ihre Schriftgröße 139. Ich denke, das ist sehr ähnlich zu dem, was wir gleich sehen werden.
Okay, also kopiere ich das von hier. Ich füge es hier in diesen Container ein. Und ich dupliziere diese Blocküberschrift von hier und ändere sie in eine FAQ-Überschrift.
Okay, und wir sagen diesem Container, dass er alles darin zentrieren und vertikal platzieren soll. Und wir sagen einer Überschrift, dass sie die Ausrichtung ändern soll. Also kopieren wir den Text, der hier steht. Also kopieren wir "Häufig gestellte Fragen" und fügen ihn ein.
Als Nächstes müssen wir diese Fragen und ihre Antworten platzieren, und hier sehen Sie ein Symbol und einige Linien. Wie können wir das erstellen? Hier werden wir etwas verwenden. Wenn ich zu den Elementen gehe, werden wir ein Element verwenden, und das ist das Dropdown. Also klicke ich einfach auf dieses Dropdown und platziere es hier unten. Okay, und wir sagen diesem Dropdown, dass es die Breite des Containers überprüfen soll. Die Breite beträgt ungefähr diese Breite, aber die Breite der Texte beträgt 11, aber ihre Breite ist konstant. Also gehe ich von hier und ändere ihre Breite, zum Beispiel diese Spalte, ich ändere sie von hier in eine FAQ.
Häufig gestellte Fragen, Nummer eins, das ist es. Und seine Breite. Und wir sagen ihm, dass er auf den Faktor skalieren soll. Und die Größe dieser Überschrift hier, wir sehen sie, sie ist 80 Pixel, und die Antwort ist auch gleich. Okay, also wähle ich von hier die Schriftart aus, mache sie von hier aus 80 Pixel, ändere sie von normal auf fett. Und auch hier sagen wir ihm, dass er das tun soll.
Das ist die Frageüberschrift, und das ist die Antwort. Die Antwort. Also sagen wir ihm auch, dass er 100% abdecken soll. 100% wovon? 100% davon. Das sind 80%, also wird es 80% davon abdecken. Maximal. Also sehen wir uns hier die Fragen an. Also die Frage, wie man ein Konto erstellt, wählt die Website aus. Wie man ein Konto erstellt.
Okay, jetzt ist diese Linie, die Sie hier sehen, weil ich Ihnen am Anfang des Videos hier ein Beispiel gezeigt habe, das ich in einigen Klassen erstellt habe. Ich habe dieselbe Klasse verwendet und ihre Eigenschaften übernommen. Also, wenn ich hier scrolle, werden Sie sehen, dass dies eine FAQ ist. Wie zeichnet man diese Linie? Sehen Sie, ich gehe zu den Rändern, klicke darauf. Ich möchte nur eine Linie oben. Ich zeige es Ihnen hier. Sehen Sie, unter der untersten Frage gibt es keine Linie, und über jeder Frage gibt es eine Linie. Darüber gibt es eine Linie, und über der obersten gibt es auch eine Linie. Das bedeutet, dass wir über jeder Frage eine Linie hinzufügen. Also können wir dieser Reihenfolge folgen. Ebenso füge ich den Rand hinzu, ich möchte nur den oberen Rand, ich weise ihn hier mit dazwischen zu. Sie können hier jede Farbe wählen, die zu ihm passt. Ich stelle ihn ein. Das ist also eine Frage. Wir sehen uns auch die Abstände an.
Also, wir haben ungefähr 20 Pixel Polsterung. Darunter brauchen wir einen Abstand von etwa 500 Pixeln. Und jetzt öffnen wir diese FAQ. Weil wir hier, wenn ich eine Frage öffne, auch ihre Eigenschaften einstellen müssen. Also klicke ich darauf. Sehen Sie, ich klicke darauf, hier einmal. Wenn ich hier zu den Einstellungen gehe und es hier sage, zeige es an. Und es hat es mir gezeigt. Wir brauchen hier keine Links im Entwurf, wir müssen hier unsere Antwort platzieren. Also nehme ich hier einen Block, platziere ihn darin und nehme hier einen Textblock und platziere ihn darin. Und wir sagen ihm, dass er ihn weiterhin anzeigen soll, damit wir ihn anpassen können. Von hier kopieren wir die Antwort und fügen sie hier ein. Zeigen Sie es noch einmal an.
Wir müssen das ein wenig anpassen. Ja. Ich sehe hier keinen Platz. Also muss es auf die nächste Zeile gehen, und es hat es nicht auf die nächste Zeile verschoben. Also klicke ich darauf, zeige es an, ändern Sie die Textgröße auf 18 Pixel und testen Sie hier die Zeilenhöhe. Lassen Sie uns das schätzen. Öffnen wir es noch einmal, weil wir den Hintergrund nicht brauchen. Also ist dieser Hintergrund darauf gesetzt. Wir klicken auf diese Antwort und sehen uns ihre Eigenschaften an. Also haben wir hier einen Hintergrund. Wir klicken darauf und machen ihn transparent. Und es gibt viel Abstand zwischen dieser Frage und der Antwort. Also sehen wir uns das im Inspektor an, um eine Vorstellung vom Abstand zu bekommen.
Also haben wir hier eine Innenpolsterung zugewiesen, sowohl für die Antwort als auch für die Frage. Also sehen wir hier die Innenpolsterung. Okay. Also sehen Sie, 28, 28 sind oben und unten zugewiesen. Und wir sehen uns das auch an. Und er hat die Einheit geändert, was seltsam ist. Also hängt dieser Abstand von der Schriftgröße ab. Die Schriftgröße wird angepasst. Wenn Sie zu den Browsereinstellungen gehen, können Sie hier die Schriftart Ihres Browsers einstellen. Also wird dieser Abstand variieren in Bezug auf die Schriftgröße. Sehen Sie, er hat auch hier etwas zugewiesen.
Er hat ihm Pixel zugewiesen. Ich werde die verschiedenen Einheiten später besprechen, wie sie eingestellt werden können und welche Vorteile Sie mit diesen verschiedenen Einheiten auf Ihrer Website haben und wie Sie sie verwenden können. Also, okay, lassen Sie uns eine Polsterung von 20 Pixeln nehmen. Ich klicke darauf, klicke auf diese Antwort und sage ihm, dass er 80 und 226 zuweisen soll. Seine Breite. Und auch diese Antwort 20.
Ich denke, wir sollten das tun. Also, was wir jetzt einfach tun werden, ist, ich werde einfach die FAQ kopieren, und während ich auf diesen Container klicke, werde ich einfügen. Einfügen. Und wir ändern die Frage. Also, wie man eine Belohnung erstellt. Wie man eine Belohnung erstellt.
Okay, und wir kopieren die Antwort und öffnen diese Frage. Drücken Sie alles, fügen Sie ein. Okay, und auf die gleiche Weise öffnen wir auch diese. Und die dritte ist, wie man mit Kreditkarte bezahlt. Wie man mit Kreditkarte bezahlt.
Okay, und wir kopieren die Antwort von hier. Fügen Sie sie hier ein. Das ist also, was wir haben werden. Ich spiele es von hier ab. Mal sehen, was wir bekommen haben. Das Ergebnis, das wir wollen. Okay.
Okay, was ist hier falsch? Okay, also das ist die Lösung. Was war hier falsch? Die Position dieser Antwort war absolut gesetzt. Deshalb hat sie den unteren Inhalt nicht beeinflusst. Sie hat ihn über dem Inhalt geöffnet, weil, wie wir ein Dropdown öffnen, zum Beispiel, wenn ich eine obere Leiste platziere und darin ein Dropdown habe, möchte ich, dass es sich über dem anderen Inhalt öffnet, wenn ich darauf klicke. Die Position der Antwort war absolut gesetzt. Also zeige ich es Ihnen hier noch einmal. Ich mache es absolut. Ich öffne es. Und sehen Sie, es öffnet sich über diesem Inhalt.
Das wollen wir nicht. Wir wollen, dass es den anderen Inhalt verschiebt und auch die Breite, die Polsterung und alles, was wir zugewiesen haben, befolgt. Also habe ich nur die Position dieser Antwort geändert. Und lassen Sie uns auf diese Schaltfläche klicken. Okay. Also, wenn ich jetzt noch einmal darauf klicke, schließt es sich und öffnet sich. Und es öffnet sich und schließt sich. Also haben wir die grundlegenden Dinge erreicht. Diese Flüssigkeit, die Sie hier sehen, für diese, diese und diese sind alles Interaktionen, und wir werden diese im Interaktionsabschnitt abdecken. Aber das bedeutet, dass das Symbol, das Sie hier sehen, wir es einfach damit ersetzen werden. Und später werden wir die Interaktion beim Klicken hinzufügen. Wir werden sie später in ein Dropdown umwandeln. Also erstelle ich hier ein sehr einfaches Symbol. Also, hier erstelle ich ein Symbol. Ich drehe es. Okay. Und ich denke, wir sollten es ein wenig dünner machen.
Okay, lassen Sie uns beide auswählen und hier platzieren.
Was ist passiert? Ich mache einfach seine Höhe, seine Breite ist 5, und seine Breite ist 5. Ich mache es zu 5. Und diese FAQ und diese auch zu 2. Okay. Jetzt sind die beiden Symbole. Ich kopiere das einfach und wir müssen die Symbole hier haben. Ich werde es von hier löschen und es gruppieren. Okay. Also haben wir zwei Symbole. Vorerst platziere ich es. Ich exportiere es. Desktop. Und UI-Symbol. Wir exportieren es.
Wir kommen zurück und ersetzen einfach das Symbol. Also das Symbol hier. Anstelle dessen werden wir ein Bild einfügen. Ich lösche das. Und seine Eigenschaften sehen wir uns von hier an. Es ist absolut. Und wir gehen zu einem anderen Symbol. Wir erstellen eine Klasse dafür und löschen es dann und weisen ihm dieselbe Klasse zu, damit es an seiner Position ist. Absolut.
Okay, lassen Sie mich die Einstellungen für die Frage ändern. Relativ. Und dieses Symbol ist absolut für den Körper.
Ich ändere das Symbol erneut. Ich lade es von hier hoch. Ich wähle dieses Symbol aus.
Okay, wir haben ein Symbol. Okay. Und von hier müssen wir Pixel einstellen. Das ist 2. Also ist seine Dicke ziemlich groß.
Okay, lassen Sie uns die Breite des Symbols auf 3 Pixel setzen. Und diese.
Okay, und wir speichern es erneut. Ausgewählte exportieren. Wir ersetzen es. Wir kommen zurück und ersetzen dieses Symbol jetzt durch ein neues Symbol. Das ist unser UI-Symbol. Okay. Die Größe ist etwas klein. Also können wir das beheben. Also kopieren wir einfach dieses Symbol und fügen es hier ein. Ich lösche das. Außerdem müssen wir hier etwas einfügen. Also löschen wir dieses Symbol und fügen hier noch etwas ein. Okay. Damit können wir es anpassen.
So können wir diesen Abschnitt erstellen. Wir werden die Größe dieses Symbols in den nächsten Abschnitten auf unterschiedliche Weise ändern und die Interaktionen später im Interaktionsabschnitt hinzufügen. So können wir eine FAQ erstellen, deren Mechanismus derselbe ist, deren Struktur sehr ähnlich ist, deren Styling sehr ähnlich ist, aber deren Interaktionen wir später hinzufügen werden. Also teilen Sie bitte jede Übung, die Sie machen, mit mir. Sie können unten kommentieren oder mir eine E-Mail senden. Ich werde meine Details in die Beschreibung einfügen. Sie können mir auf verschiedenen Social-Media-Plattformen eine Nachricht senden und den Fortschritt teilen, damit wir ihn besprechen können. Ich werde auch in zukünftigen Videos sein und ich werde versuchen, persönlich zu sein. Also sehen wir uns im nächsten Video. Bis dahin, tschüss und gute Sammlung. Vielen Dank.