Vorwort Dieser Artikel fasst hauptsächlich einige der Problemlösungsfähigkeiten zusammen, die bei der täglichen Erstellung von Webseiten auftreten, und gibt sie zu Ihrer Information und zum Lernen weiter. Ich werde unten nicht viel sagen. Interessierte Freunde können sich die ausführliche Einführung unten ansehen: Um es zusammenzufassen: 1. Box-Sizing: ermöglicht es Ihnen, bestimmte Elemente zu definieren, die einem bestimmten Bereich auf eine bestimmte Art und Weise entsprechen. Inhaltsbox: Fügen Sie einer Box zusätzlich zur angegebenen Breite und Höhe Polsterung und Ränder hinzu. Border-Box: (Standardwert für Textbereich und Auswahl) Fügen Sie der Box innerhalb der angegebenen Breite und Höhe Polsterung und Ränder hinzu. /*Das hängt von Ihren persönlichen Vorlieben ab, aber das Standardattribut allgemeiner Tags ist content-box, mit Ausnahme von textarea und select*/ Box-Größe: Inhaltsbox; -moz-box-sizing: Inhaltsbox; -webkit-box-sizing: Inhaltsbox; 2. Verschönern Sie das Eingabefeld /*Verwenden Sie in IE10+-Browsern CSS, um das Kreuz auf der rechten Seite des Eingabetext-Eingabefelds auszublenden*/ Eingabe [Typ = Text]::-ms-clear,::-ms-reveal {Anzeige: keine;} Eingabe::-ms-clear,::-ms-reveal{Anzeige: keine;} Eingang{ /*Entfernt die Umrissfarbe beim Klicken*/ Gliederung: keine; /*Die Polsterung wurde im Reset-Stil entfernt. Wenn sie nicht entfernt wird, denken Sie daran, Polsterung zu haben*/ } 3. Verschönern Sie das Textfeld Textarea Textbereich{ /*Vergessen Sie nicht, dass der Eigenschaftswert für die Boxgröße des Textbereichs border-box ist. Alle Ränder und Abstände werden basierend auf Ihrer festen Breite und Höhe gezeichnet.*/ /*Entfernt die Umrissfarbe beim Klicken*/ Gliederung: keine; /*Entfernen Sie bei Bedarf die größenveränderbaren Symbole und Funktionen in der unteren rechten Ecke*/ Größenänderung: keine; /*Die Polsterung wurde im Reset-Stil entfernt. Wenn sie nicht entfernt wird, denken Sie daran, Polsterung zu haben*/ } 4. Ändern Sie die Schriftfarbe und -größe des Platzhalters Eingabe::-WebKit-Eingabe-Platzhalter { /* WebKit-Browser */ Schriftgröße: 14px; Farbe: #333; } Eingabe: -moz-Platzhalter { /* Mozilla Firefox 4 bis 18 */ Schriftgröße: 14px; Farbe: #333; } Eingabe::-moz-Platzhalter { /* Mozilla Firefox 19+ */ Schriftgröße: 14px; Farbe: #333; } Eingabe: -ms-Eingabe-Platzhalter { /* Internet Explorer 10+ */ Schriftgröße: 14px; Farbe: #333; } 5. Auswahl verschönern /* Löscht den Standardstil des Auswahlfelds im Internet Explorer und verbirgt den Dropdown-Pfeil */ auswählen::-ms-expand { Anzeige: keine; } wählen { /*Die Ränder in Chrome und Firefox sind unterschiedlich, deshalb habe ich sie kopiert*/ Rand: durchgezogen 1px #333; /*Standard-Auswahlfeldstil löschen*/ Aussehen: keines; -moz-Auftritt:keines; -webkit-Erscheinungsbild: keines; /*Zeige ein kleines Pfeilbild in der Mitte des äußersten rechten Auswahlfelds*/ Hintergrund: URL(„kleiner Pfeil Bildpfad“) keine Wiederholung rechts mittig transparent; /*Lassen Sie etwas Platz, damit der Dropdown-Pfeil nicht durch Text verdeckt wird*/ Polsterung rechts: 14px; /*Entfernt die Umrissfarbe beim Klicken*/ Gliederung: keine; } 6. Schaltfläche „Verschönern“ Taste{ /*Es hat einen 2px-Rand, und normale Schaltflächen benötigen keinen Rand*/ Rand: keiner; /*Die ursprüngliche Hintergrundfarbe kann durch andere Farben ersetzt werden*/ Hintergrund: #333; /*Die Polsterung wurde im Reset-Stil entfernt. Wenn sie nicht entfernt wird, denken Sie daran, Polsterung zu haben*/ } 7. Verschönern Sie Optionsfelder, Mehrfachauswahlfelder oder Schaltflächen zum Hochladen von Dateien /*Da Sie den Stil von input[type="radio"] und input[type="cheakbox"] nicht direkt ändern können, müssen Sie die Label-Tag-Zuordnung verwenden, dann das Input-Tag ausblenden und den Label-Tag-Stil direkt angeben. Wenn Sie das Label auswählen, wird dieses Label ausgewählt*/ <label for="sex">Männlich</label> <input type="radio" id="sex" value="Männlich" /> 8. Verwenden Sie Auslassungspunkte, um zusätzlichen Text anzuzeigen white-space: nowrap; /* Kein Zeilenumbruch erzwingen */ overflow:hidden; /*Überschüssigen Inhalt ausblenden, wenn der Inhalt die Breite überschreitet*/ text-overflow:ellipsis;/* Zeigt ein Auslassungszeichen (...) an, wenn der Text im Objekt überläuft. Es muss zusammen mit overflow:hidden; verwendet werden. */ 9. So entfernen Sie den blauen Hintergrund beim Klicken auf Text auf einer CSS-Seite -moz-user-select: keine; /* Firefox*/ -webkit-user-select: none; /* Webkit-Browser */ -ms-user-select: keine; /* IE10 */ -khtml-user-select: none; /* Frühe Browser */ Benutzerauswahl: keine; 10. Verwenden Sie diese Eigenschaft, wenn die vertikale Position des Symbols schwer anzupassen ist vertikale Ausrichtung: 30 %; vertikale Ausrichtung: Mitte; 11. So zentrieren Sie ein Div auf der Seite div{ Breite: 400px; Höhe: 300px; Position: absolut; oben: 50 %; links: 50 %; Rand: -150px 0 0 -200px; } 12.js // Return-Taste in js geschrieben onclick = 'history.go(-1)'; // Seitenaktualisierung erzwingen window.location.reload(true); 13. Zeilenumbruch, kein Zeilenumbruch, Wortabstand Zusammenfassen Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels Ihnen bei Ihrem Studium oder Ihrer Arbeit helfen kann. Wenn Sie Fragen haben, können Sie eine Nachricht hinterlassen. Vielen Dank für Ihre Unterstützung für 123WORDPRESS.COM |
<<: So erstellen Sie eine Tabelle in MySQL und fügen Feldkommentare hinzu
>>: Docker ermöglicht den nahtlosen Aufruf von Shell-Befehlen zwischen Container und Host
Befehl „touch“ Es hat zwei Funktionen: Eine beste...
Effektbild (die Rahmenfarbe ist zu hell, setzen S...
1. Erstellen Sie ein Shell-Skript vim backupdb.sh...
<br />Die Kopfzeile bezieht sich auf die ers...
Um einen Flex-Container zu erstellen, fügen Sie e...
Angenommen, es gibt einen solchen Anfangscode: &l...
Projektszenario: Beim Ausführen des Vue-Projekts ...
Code kopieren Der Code lautet wie folgt: <!DOC...
Inhaltsverzeichnis 1. Dateien importieren 2. HTML...
Inhaltsverzeichnis 1. Einleitung 2. Verwendung 1....
Vorwort Als ich kürzlich ein Projekt erstellte, d...
Lernziele: Die beiden Funktionen parseInt() und N...
1. Was ist Docker Secret 1. Szenariodarstellung W...
Wirkung der Operation html <Kopf> <meta ...
Inhaltsverzeichnis Vorwort Anwendung Zusammenfass...