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

jQuery implementiert verschachtelte Tab-Funktion

In diesem Artikelbeispiel wird der spezifische Co...

So versuchen Sie, Ihrem CSS einen Sticky-Effekt hinzuzufügen

Vorne geschrieben Ich weiß nicht, wer als Erster ...

Linux 6 Schritte zum Ändern der Standard-Remote-Portnummer von SSH

Der Standard-SSH-Remote-Port in Linux ist 22. Man...

CSS-Implementierungscode für die Textausrichtung

Beim Erstellen von Formularen kommt es häufig vor...

Lernen Sie die MySQL-Zeichensatzeinstellungen in 5 Minuten kennen

Inhaltsverzeichnis 1. Inhaltsübersicht 2. Konzept...

So wählen Sie alle untergeordneten Elemente aus und fügen ihnen in CSS Stile hinzu

Verfahren: Nehmen wir „less“ im tatsächlichen Pro...

Detaillierte Erklärung der Anzeigeeigenschaft im CSS-Beschriftungsmodus

Der Code sieht folgendermaßen aus: <!DOCTYPE h...

Lösen Sie das Problem des IDEA-Konfigurations-Tomcat-Startfehlers

Beim Konfigurieren unterschiedlicher Servlet-Pfad...

Zusammenfassung der Blockelemente, Inline-Elemente und variablen Elemente

Blockelement p - Absatz Text vorformatieren Tisch ...

Zusammenfassung der schnellen Spaltenaddition bei MySQL 8.0 Online DDL

Inhaltsverzeichnis Problembeschreibung Historisch...

So öffnen Sie Port 8080 auf dem Alibaba Cloud ECS-Server

Aus Sicherheitsgründen verfügt Alibaba Cloud Serv...