Zusammenfassung der Tipps zum Erstellen von Webseiten

Zusammenfassung der Tipps zum Erstellen von Webseiten

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

Artikel empfehlen

Detaillierte Erklärung des Hash-Jump-Prinzips von Vue

Inhaltsverzeichnis Der Unterschied zwischen Hash ...

Installationsprozess des 64-Bit-Quellcodes von CentOs7 MySQL 5.6.40

1. Installieren Sie zuerst die Abhängigkeitspaket...

Grafisches Tutorial zur Installation von JDK1.8 unter CentOS7.4

Schritte zur Linux-Installation von JDK1.8 1. Übe...

So paginieren Sie schnell MySQL-Datenmengen im zweistelligen Millionenbereich

Vorwort Um bei der Backend-Entwicklung zu verhind...

MySQL 8.0.12 Installationskonfigurationsmethode und Kennwortänderung

In diesem Artikel werden die Installations- und K...

Über IE8-Kompatibilität: Erklärung des X-UA-Compatible-Attributs

Problembeschreibung: Code kopieren Der Code laute...

Mac VMware Fusion CentOS7 Konfiguration statisches IP-Tutorial-Diagramm

Inhaltsverzeichnis Installieren Sie CentOS7 Konfi...

Zusammenfassung häufiger Probleme mit MySQL-Indizes

F1: Welche Indizes hat die Datenbank? Was sind di...

Detaillierte Erläuterung des Watch-Listener-Beispiels in vue3.0

Inhaltsverzeichnis Vorwort Der Unterschied zwisch...

Webdesign: Implementierungstechniken für Webmusik

<br />Wenn Sie Musik in eine Webseite einfüg...

Einführung in den Prozess zum Erstellen eigener FTP- und SFTP-Server

FTP und SFTP werden häufig als Dateiübertragungsp...

Die große Rolle von HTML-Meta

Es gibt zwei Metaattribute: Name und http-equiv. D...