Beispiele für Web-Responsive-Design (ohne Medienabfragen)
(0)Vorn geschrieben
In einem Artikel, den ich auf Zhihu gesehen habe, von einem Fall zu erzählen, öffnete meinen Geist und bewunderte mich extrem, fand ich Der Originaltext wurde am nächsten Tag gelesen und gelobt
5 Yuan Die ursprüngliche Textadresse verwendet viele CSS3-Attribute.
(1) Wirkungsdemonstration
(2) Wissenspunkte und Effekte
<div class="trunc-list-wrapper" id="mylist">
<ul class="trunc-list">
<li>
<a href="#">Home</a>
</li>
...
<li aria-hidden="true" class="control control--open">
<a href="#mylist"><span>more</span></a>
</li>
<li aria-hidden="true" class="control control--close">
<a href=""><span>less</span></a>
</li>
</ul>
</div>
.trunc-list-wrapper {height: 2.25em;overflow: hidden;padding-right: 3.5em;
}.trunc-list {
display: flex;flex-wrap: wrap;position: relative;
}.trunc-list li {
flex: 1 0 auto;
}.control {position: absolute;top: 0;right: -3.5em;width: 3.5em;height: calc((2.25em - 100%) * -1000);max-height: 2.25em;overflow: hidden;
}.control--close {display: none;
}
Das Obige ist ein einfacher Code
display: flex; Machen Sie die internen Elemente von .trunc-list zu Flex-Elementen
flex-wrap: wrap; Wenn die Breite nicht ausreicht, werden die internen Elemente umbrochen. Wenn das Browserfenster also auf eine bestimmte Breite skaliert wird, ändert sich die Höhe von .trunc-list
.
Das gezoomte Element ist nicht sichtbar, da die Höhe: 2,25em;overflow: versteckt; von .trunc-list-wrapper dazu führt, dass das Element
ausgeblendet wird.
Die Änderung der Höhe von trunc-list bewirkt, dass height: calc((2.25em - 100%) * -1000); wirksam wird, Sie können mehr sehen,
max-height: 2.25em; begrenzt das Maximum Höhe.
Klicken Sie auf mehr, da
#myList ein gültiger Strichpunkt ist, wird das folgende CSS wirksam
.trunc-list-wrapper:target .control--open { display: none;
}.trunc-list-wrapper:target .control--close { display: block;
}
Gleichzeitig Zeit tritt das folgende CSS in Kraft
.trunc-list-wrapper:target { height: auto;
}Versteckte Elemente sind sichtbar
Wenn weniger angeklickt wird, handelt es sich um einen ungültigen Ankerpunkt im Verhältnis zum Löschen die oben genannten Effekte.
4. Vollständiger Code
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>响应式的另一种思考</title><style>/* Basic common settings: */* { box-sizing: border-box;}html { line-height: 1.25; font-family: 'Lato', sans-serif;}.trunc-list-wrapper { height: 2.25em; overflow: hidden; padding-right: 3.5em;}.trunc-list { list-style: none; display: flex; flex-wrap: wrap; margin: 0; padding: 0; position: relative;}.trunc-list li { margin: 0; padding: 0; flex: 1 0 auto;}.trunc-list a { display: block; padding: 0.5em; text-align: center; white-space: nowrap;
color: #fff; background:red;}.trunc-list a:hover,
.trunc-list a:active,
.trunc-list a:focus { background: red; }.control { position: absolute; top: 0; right: -3.5em; width: 3.5em;
height: calc((2.25em - 100%) * -1000); max-height: 2.25em;
overflow: hidden;}.control a { text-decoration: none;}.control span { font-size: 0.75em; font-style: italic;}.control--close { display: none;}.trunc-list-wrapper:target { height: auto;}.trunc-list-wrapper:target .control--open { display: none;}.trunc-list-wrapper:target .control--close { display: block;}</style></head><body><div class="trunc-list-wrapper" id="mylist"> <ul class="trunc-list"><li> <a href="#">Home</a></li><li> <a href="#">Blog</a></li><li> <a href="#">About Us</a></li><li> <a href="#">Contact Us</a></li><li> <a href="#">Help</a></li><li> <a href="#">Login</a></li><li> <a href="#">Sign In</a></li><li aria-hidden="true" class="control control--open"> <a href="#mylist"><span>more</span></a></li><li aria-hidden="true" class="control control--close"> <a href=""><span>less</span></a></li> </ul></div><p>改变视口宽度大小来观察效果</p></body></html>
Das obige ist der detaillierte Inhalt vonBeispiele für Web-Responsive-Design (ohne Medienabfragen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1376
52
12306 So überprüfen Sie historische Ticketkaufdatensätze. So überprüfen Sie historische Ticketkaufdatensätze
Mar 28, 2024 pm 03:11 PM
Laden Sie die neueste Version der Ticketbuchungs-App 12306 herunter, mit der jeder sehr zufrieden ist. Es gibt viele Ticketquellen, die in der Software bereitgestellt werden -Namenauthentifizierung zum Online-Kauf von Tickets. Alle Benutzer können ganz einfach Reisetickets und Flugtickets kaufen und verschiedene Ermäßigungen genießen. Sie können auch im Voraus mit der Buchung beginnen, um Tickets zu erhalten. Damit können Sie mit einem Klick dorthin fahren, wo Sie möchten, und so das Reisen einfacher und bequemer gestalten Noch komfortabler: Der Herausgeber stellt die Details jetzt online dar. Bietet 12306 Benutzern die Möglichkeit, historische Ticketkaufaufzeichnungen einzusehen. 1. Öffnen Sie Railway 12306, klicken Sie unten rechts auf „Mein“ und dann auf „Meine Bestellung“. 2. Klicken Sie auf der Bestellseite auf „Bezahlt“. 3. Auf der kostenpflichtigen Seite
So überprüfen Sie Ihre akademischen Qualifikationen auf Xuexin.com
Mar 28, 2024 pm 04:31 PM
Wie kann ich meine akademischen Qualifikationen auf Xuexin.com überprüfen? Sie können Ihre akademischen Qualifikationen auf Xuexin.com überprüfen. Viele Benutzer wissen nicht, wie sie ihre akademischen Qualifikationen auf Xuexin.com überprüfen können Benutzer kommen vorbei und schauen sich um! Tutorial zur Nutzung von Xuexin.com: So überprüfen Sie Ihre akademischen Qualifikationen auf Xuexin.com 1. Zugang zu Xuexin.com: https://www.chsi.com.cn/ 2. Website-Abfrage: Schritt 1: Klicken Sie auf die Adresse von Xuexin.com Um die Startseite aufzurufen, klicken Sie oben auf [Bildungsabfrage]; Schritt 2: Klicken Sie auf der neuesten Webseite auf [Abfrage], wie durch den Pfeil in der Abbildung unten dargestellt. Schritt 3: Klicken Sie dann auf der neuen Seite auf [Anmelden bei akademischer Kreditdatei]. Schritt 4: Geben Sie auf der Anmeldeseite die Informationen ein und klicken Sie auf [Anmelden].
Retro-Trend! HMD und Heineken bringen gemeinsam ein Klapptelefon auf den Markt: transparentes Gehäusedesign
Apr 17, 2024 pm 06:50 PM
Laut Nachrichten vom 17. April hat sich HMD mit der bekannten Biermarke Heineken und dem Kreativunternehmen Bodega zusammengetan, um ein einzigartiges Klapptelefon auf den Markt zu bringen – The Boring Phone. Dieses Telefon steckt nicht nur voller Innovationen im Design, sondern kehrt auch in puncto Funktionalität zur Natur zurück und zielt darauf ab, Menschen zu echten zwischenmenschlichen Interaktionen zurückzubringen und die reine Zeit des Trinkens mit Freunden zu genießen. Das langweilige Mobiltelefon verfügt über ein einzigartiges transparentes Flip-Design, das eine schlichte, aber elegante Ästhetik zeigt. Es ist innen mit einem 2,8-Zoll-QVGA-Display und außen mit einem 1,77-Zoll-Display ausgestattet und bietet Benutzern ein grundlegendes visuelles Interaktionserlebnis. Fotografisch ist es zwar nur mit einer 30-Megapixel-Kamera ausgestattet, reicht aber für einfache Alltagsaufgaben aus.
Das tragbare 5G-WLAN U50S von ZTE wird für 899 NT$ zum Einstiegspreis zum Verkauf angeboten: maximale Netzwerkgeschwindigkeit 500 Mbit/s
Apr 26, 2024 pm 03:46 PM
Laut Nachrichten vom 26. April ist das tragbare 5G-WLAN U50S von ZTE jetzt offiziell zum Preis ab 899 Yuan erhältlich. Was das Erscheinungsbild angeht, ist das ZTE U50S Portable Wi-Fi einfach und stilvoll, leicht zu halten und zu verpacken. Seine Größe beträgt 159/73/18 mm und ist leicht zu transportieren, sodass Sie jederzeit und überall das 5G-Hochgeschwindigkeitsnetzwerk nutzen und ein ungehindertes mobiles Büro- und Unterhaltungserlebnis erzielen können. Das tragbare Wi-Fi U50S von ZTE unterstützt das fortschrittliche Wi-Fi 6-Protokoll mit einer Spitzenrate von bis zu 1800 Mbit/s. Es basiert auf der leistungsstarken 5G-Plattform Snapdragon X55, um Benutzern ein extrem schnelles Netzwerkerlebnis zu bieten. Es unterstützt nicht nur die 5G-Dual-Mode-SA+NSA-Netzwerkumgebung und das Sub-6-GHz-Frequenzband, die gemessene Netzwerkgeschwindigkeit kann sogar erstaunliche 500 Mbit/s erreichen, was durchaus zufriedenstellend ist.
Das Teclast M50 Mini-Tablet ist da: 8,7-Zoll-IPS-Bildschirm, 5000-mAh-Akku
Apr 04, 2024 am 08:31 AM
Laut Nachrichten vom 3. April ist der kommende Tablet-Computer M50 Mini von Taipower ein Gerät mit umfangreichen Funktionen und leistungsstarker Leistung. Dieses neue kleine 8-Zoll-Tablet ist mit einem 8,7-Zoll-IPS-Bildschirm ausgestattet und bietet Benutzern ein hervorragendes visuelles Erlebnis. Das Design des Metallgehäuses ist nicht nur schön, sondern erhöht auch die Haltbarkeit des Geräts. Leistungsmäßig ist der M50Mini mit dem Unisoc T606 Achtkernprozessor ausgestattet, der über zwei A75-Kerne und sechs A55-Kerne verfügt und für ein reibungsloses und effizientes Lauferlebnis sorgt. Gleichzeitig ist das Tablet auch mit einer Speicherlösung von 6 GB + 128 GB ausgestattet und unterstützt die Speichererweiterung um 8 GB, was den Anforderungen der Benutzer an Speicher und Multitasking gerecht wird. Was die Akkulaufzeit betrifft, ist der M50Mini mit einem 5000-mAh-Akku ausgestattet und unterstützt Ty
Honor Magic V3 stellt erstmals die KI-Defokussierungs-Augenschutztechnologie vor: Lindert effektiv die Entwicklung von Kurzsichtigkeit
Jul 18, 2024 am 09:27 AM
Laut Nachrichten vom 12. Juli wurde die Honor Magic V3-Serie heute offiziell veröffentlicht und ist mit dem neuen Honor Vision Soothing Oasis-Augenschutzbildschirm ausgestattet. Der Bildschirm selbst verfügt zwar über hohe Spezifikationen und eine hohe Qualität, war aber auch Vorreiter bei der Einführung des aktiven KI-Augenschutzes Technologie. Es wird berichtet, dass die traditionelle Methode zur Linderung von Myopie „Myopie-Brillen“ ist. Die Stärke von Myopie-Brillen ist gleichmäßig verteilt, um sicherzustellen, dass der zentrale Sehbereich auf der Netzhaut abgebildet wird, der periphere Bereich jedoch dahinter Die Netzhaut erkennt, dass das Bild zurückliegt, wodurch die Richtung der Augenachse später wächst und sich dadurch vertieft. Eine der wichtigsten Möglichkeiten, die Entwicklung von Myopie zu lindern, ist derzeit die „Defokussierungslinse“. Der zentrale Bereich hat eine normale Stärke, und der periphere Bereich wird durch optische Designtrennwände so angepasst, dass das Bild im peripheren Bereich fällt vor der Netzhaut.
So gestalten Sie die Endseite einer ppt-Datei attraktiv genug
Mar 20, 2024 pm 12:30 PM
Bei der Arbeit ist ppt eine Bürosoftware, die häufig von Fachleuten verwendet wird. Ein vollständiges PPT muss eine gute Schlussseite haben. Unterschiedliche berufliche Anforderungen führen zu unterschiedlichen PPT-Produktionseigenschaften. Wie können wir die Produktion der Endseite ansprechender gestalten? Werfen wir einen Blick darauf, wie man die Endseite einer PPT gestaltet! Das Design der PPT-Endseite kann in Bezug auf Text und Animation angepasst werden und Sie können je nach Bedarf einen einfachen oder schillernden Stil wählen. Als Nächstes konzentrieren wir uns darauf, wie Sie mithilfe innovativer Ausdrucksmethoden eine PPT-Endseite erstellen können, die den Anforderungen entspricht. Beginnen wir also mit dem heutigen Tutorial. 1. Für die Erstellung der Schlussseite kann jeder Text im Bild verwendet werden. Wichtig an der Schlussseite ist, dass sie bedeutet, dass meine Präsentation zu Ende ist. 2. Zusätzlich zu diesen Worten:
Das Mobiltelefon Honor X60i ist ab 1.399 Yuan im Angebot: visueller viereckiger OLED-Direktbildschirm
Jul 29, 2024 pm 08:25 PM
Laut Nachrichten vom 29. Juli ist das Mobiltelefon Honor X60i heute offiziell zum Preis ab 1.399 Yuan erhältlich. Was das Design angeht, verfügt das Honor X60i-Mobiltelefon über ein gerades Bildschirmdesign mit einem Loch in der Mitte und nahezu unbegrenzten, ultraschmalen Rändern an allen vier Seiten, was das Sichtfeld erheblich erweitert. Parameter des Honor , Smart-Kapsel, Fingerabdruck unter dem Bildschirm, Dual-MIC, Rauschunterdrückung, Fragen und Antworten zu Wissen, Fotofunktionen: hinteres Dual-Kamerasystem: 50 Millionen Pixel Hauptkamera, 2 Millionen Pixel Hilfsobjektiv, vorderes Selfie-Objektiv: 8 Millionen Pixel, Preis: 8 GB
