Entwerfen Sie responsive Seiten mit Bildern und Inhalten

Ich bin neu im Frontend und habe einige Probleme mit dem Layout und der Reaktionsfähigkeit. Das ist mein bisheriger Code: body{margin:0;background-color:#353535;}.header{color:white;text-align:center;font-size:20px;margin:auto;font-family :'Inter ',serif;font-weight:bold;width:700px;

P粉676588738 2023-09-07 15:55:30 0  1  525

So implementieren Sie dieses responsive Layout mit Flexbox

Ich erstelle eine React-App, die eine xy-Anzahl von Karten und ein einzelnes Widget in einem Flex-Container rendert. Alle Karten haben die gleiche Breite und Höhe, aber die Höhe des Widgets entspricht der Kartenhöhe * 2 + Zeilenabstand. Die Breite des Containers ändert sich je nach Breite des Ansich...

P粉733166744 2024-02-26 19:29:01 0  2  412

css – So schreiben Sie ein responsives Layout mit Hintergrundbildern

Ähnlich wie hier möchte ich jetzt eine Komponente mit einem Hintergrundbild erstellen, aber das Hintergrundbild kann nicht 100 % groß sein, und dann muss sich in der Mitte ein Inhalt befinden, links ein Bild und rechts ein Text es reagiert?

怪我咯 2017-07-06 10:37:20 0  3  2112

css3 – Grafik- und Text-Responsive-Stil

Machen Sie diese Seite auf dem PC-Desktop responsiv: Eine Möglichkeit besteht darin, das Bild direkt responsiv zu machen. Der einzige Nachteil besteht darin, dass der Text unscharf ist und die andere Möglichkeit darin besteht, das Bild + den Text zu verwenden Auf diese Weise muss die Textgröße anpas...

習慣沉默 2017-05-16 13:20:57 0  3  723

Javascript – CSS-Karusselldiagramm passt sich dem Layoutproblem an

Ähnlich wie beim Karussell-Layout ist für den äußeren blauen Container keine Breite festgelegt und er ist zu 100 % adaptiv. Die Breite jedes Untercontainers entspricht der Breite des übergeordneten Containers und wird in einer Reihe angezeigt Element sind ausgeblendet, ohne js zu verwenden. Kann die...

给我你的怀抱 2017-06-13 09:23:41 0  3  1087

Formatierung der Chat-GPT-Antwort

Ich verwende Chat-Gptapi in meiner React-Anwendung. Das Problem, mit dem ich konfrontiert bin, besteht darin, wie ich die Antwort von Chat GPT formatieren soll. Wenn ich darum bitte, mir eine Antwort in einem Tabellenformat zu geben, gibt es eine seltsame Antwort. Ich verwende die Vormarkierung, um ...

P粉563446579 2023-10-25 14:53:41 0  1  755

Javascript - Laui-Tabellenlayout: Wenn der Inhalt in td zu groß und zu lang ist, wird die Tabellenseite gestaucht und verformt. Auf der Suche nach einer besseren Layoutmethode

Wie der Titel schon sagt, dient die Seite hauptsächlich der Anzeige relevanter Informationen. Wenn td zu viel Inhalt enthält, wird die nächste Zeile herausgedrückt. Wenn Sie eine bessere Layoutmethode finden möchten, benötigen Sie nicht unbedingt ein Tabellenlayout]

迷茫 2017-07-06 10:35:25 0  2  1961

css - Wie kann ich mit Flex ein dreispaltiges Layout implementieren, aber die Höhe der untergeordneten Elemente muss anpassbar sein?

Ich möchte Flex verwenden, um das dreispaltige Layout im Bild zu implementieren. Derzeit stoße ich auf das folgende Problem: Wenn das übergeordnete Element display: flex einstellt, ist die Höhe der drei Spalten gleich, und ich möchte die Höhe der drei Ich versuche, die Spalten anzupassen. Weder flex...

滿天的星座 2017-05-16 13:45:22 0  1  1628

Ändern Sie die HTTP-Antwort in der Chrome-Erweiterung

Ist es möglich, eine Chrome-Erweiterung zu erstellen, die den HTTP-Antworttext ändern kann? Ich habe mir die Chrome-Erweiterungs-API angesehen, aber nichts gefunden, das diese Funktionalität implementiert.

P粉038161873 2023-08-21 23:44:53 0  2  680

Responsives YouTube, eingebettet in Flex

Ich habe versucht, responsive YouTube- und einige andere Inhalte in einen Flex-Container einzubetten, aber der Container, in dem sich die YouTube-Einbettung befindet, wächst nicht und überschneidet sich daher entweder mit anderen Elementen oder wird von diesen überlappt. Ich bin mir nicht sicher, ob...

P粉111641966 2024-03-21 23:20:29 0  1  339

Problem mit dem Layout der Bootstrap-Landingpage – Container passt nicht richtig an die Bildschirmgröße

Ich übe derzeit die Verwendung von Bootstrap zum Erstellen einer Landingpage. Allerdings habe ich Probleme mit dem Layout, da der Container nicht auf die entsprechende Bildschirmgröße passt. Die linke und rechte Seite sind unausgeglichen, wodurch der Bildschirm nach links neigt. Hier ist ein Screens...

P粉214089349 2023-09-10 21:04:02 0  2  752

Responsives Bild und Text Div nebeneinander

Ich versuche also, eine Vorlage zu erstellen, bei der ein Div ein Bild und das andere Text mit Hintergrund ist. Jetzt möchte ich diese Vorlage responsive machen, sodass der Text mit einer bestimmten Pixelbreite unter dem Bild liegt. Als ich Stackoverflow durchgesehen habe, habe ich unzählige Beiträg...

P粉005134685 2024-04-02 08:59:38 0  1  482

Wie lege ich nicht reagierende Daten für Komponenteninstanzen in Vue 3 fest?

Es gab eine ähnliche Frage für Vue2 und es wurde empfohlen, $options zu verwenden. Aber es scheint nicht für Vue3 zu funktionieren. Zunächst einmal heißt es in der Vue3-Dokumentation, dass $options schreibgeschützt sind. Wenn ich also versuche, den Tooltip in der Instanz zu initialisieren, wenn die ...

P粉973899567 2023-08-25 23:08:24 0  1  606

Wie erstelle ich ein reaktionsfähiges Raster in ionic Angular und ngfor?

Wie erstelle ich ein reaktionsfähiges Raster in ionicAngular und ngfor? Geben Sie hier eine Bildbeschreibung wie hier ein, um meine Rastervorlage zu beschreiben: <ion-grid><ion-row><ion-col><ion-item*ngFor="letprodofdisplayedList" class="item-entry"detailrout...

P粉106715703 2023-09-14 22:57:49 0  1  618

Auf Mobilgeräten werden responsive Layoutkarten nicht korrekt angezeigt

Beschreibung Beim Erstellen von Webseiten funktionierte auf ChromeDevTools alles wie erwartet, bis ich die mobile Version ausprobierte. Warum passiert das? Ich bin noch nie auf ein solches Problem gestoßen. Schritte zum Reproduzieren Dies geschieht mit der Desktop-Version. Nach der Reduzierung der B...

P粉878510551 2024-03-19 22:21:02 0  1  423

Platzieren Sie reaktionsfähige Blöcke in flexiblen Spalten

Ich habe eine Gaming-Website mit einer Kopfzeile, einem Board und einer Fußzeile. Ich brauche alle drei, damit sie in das Ansichtsfenster passen. Um dies zu erreichen, sollte die Platine kleiner sein. Die Minimierung ist das Problem, das ich habe. Es ist mir gelungen, die Breite anzupassen, aber nic...

P粉545682500 2023-09-03 19:51:51 0  2  596

Mit dem SVG-Bild kann kein reaktionsfähiger Rasterbereich erstellt werden

Wenn ich versuche, einen responsiven Rasterbereich zu erstellen, der ein SVG-Bild enthält, stoße ich auf seltsames Verhalten, z. B. willkürliche Breiten des Rasterbereichs und es gelingt mir nicht, das Bild ohne Unterbrechung bis zu einem bestimmten Punkt zu vergrößern oder zu verkleinern. Das nächs...

P粉022140576 2023-08-30 19:15:16 0  1  572

Erstellen Sie vielfältige Kartenlayouts mit einem einzigen Raster oder Flex: eine praktische Anleitung

Ich versuche, ein responsives Kartenlayout wie das abgebildete zu erstellen. Derzeit erstelle ich separate Layouts für Computer, Tablets und Mobilgeräte. Dann habe ich mit Hilfe der Medienabfrage die Anzeigeeigenschaft der anderen beiden Ansichten auf display:none gesetzt. Beispiel: Wenn ich mich in...

P粉808697471 2024-04-02 21:07:36 0  2  538

Parallelität, Nachrichtenwarteschlange, Lastausgleich, Caching, Verteilung, Sicherheit – sind das die Highlights Ihres Lebenslaufs? Java-Absolvent, mehr als ein halbes Jahr Praktikum

Parallelität, Nachrichtenwarteschlange, Lastausgleich, Caching, Verteilung, Sicherheit – sind das die Highlights Ihres Lebenslaufs? Java-Absolvent, mehr als ein halbes Jahr Praktikum

漂亮男人 2017-06-12 09:27:05 0  13  2050

Es ist nicht erforderlich, Observable zu abonnieren, eine zwingende Möglichkeit, reaktive Formulardaten in Angular zu bearbeiten

Hier ist der Prozess, den ich verwendet habe, um ein reaktives Formular basierend auf beobachtbaren Daten zu abonnieren und zu aktualisieren. Vielleicht gibt es eine Möglichkeit, das Problem zu lösen, ohne das Observable zu abonnieren und den Wert zu ändern. @Component({selector:'app-my-component',t...

P粉587970021 2024-03-29 18:37:15 0  1  379