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
einführen Überwacht die Integrität von HTTP-Serve...
In diesem Artikelbeispiel wird der spezifische Co...
1. Nach der Installation der Windows-Version von ...
Vorne geschrieben Ich weiß nicht, wer als Erster ...
Der Standard-SSH-Remote-Port in Linux ist 22. Man...
Beim Erstellen von Formularen kommt es häufig vor...
Inhaltsverzeichnis Vorwort 1.v-show 2.v-wenn 3. D...
Inhaltsverzeichnis 1. Inhaltsübersicht 2. Konzept...
Verfahren: Nehmen wir „less“ im tatsächlichen Pro...
Der Code sieht folgendermaßen aus: <!DOCTYPE h...
Beim Konfigurieren unterschiedlicher Servlet-Pfad...
Blockelement p - Absatz Text vorformatieren Tisch ...
Inhaltsverzeichnis Problembeschreibung Historisch...
Aus Sicherheitsgründen verfügt Alibaba Cloud Serv...
Inhaltsverzeichnis 1. Kernbefehle 2. Allgemeine B...