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

Zusammenfassung der Linux-Befehle zur Dateiverzeichnisverwaltung

Befehl „touch“ Es hat zwei Funktionen: Eine beste...

CSS, um den kleinen scharfen Eckeneffekt von Blasen zu erzielen

Effektbild (die Rahmenfarbe ist zu hell, setzen S...

So implementieren Sie eine geplante Sicherung einer MySQL-Datenbank

1. Erstellen Sie ein Shell-Skript vim backupdb.sh...

HTML-Tabellen-Markup-Tutorial (18): Tabellenkopf

<br />Die Kopfzeile bezieht sich auf die ers...

Beispielcode für CSS-Flex-Layout mit automatischem Zeilenumbruch

Um einen Flex-Container zu erstellen, fügen Sie e...

Analyse des Idea-Compiler-Vue-Einrückungsfehlerproblemszenarios

Projektszenario: Beim Ausführen des Vue-Projekts ...

js realisiert das Verpacken mehrerer Bilder in Zip

Inhaltsverzeichnis 1. Dateien importieren 2. HTML...

Einfache Kapselung von Axios und Beispielcode zur Verwendung

Vorwort Als ich kürzlich ein Projekt erstellte, d...

Fallstudie zum Unterschied zwischen JavaScript parseInt() und Number()

Lernziele: Die beiden Funktionen parseInt() und N...

Detaillierte Erläuterung der Verwaltung und Verwendung von Docker Secrets

1. Was ist Docker Secret 1. Szenariodarstellung W...

Mit CSS3 können Sie eine schwebende Wolkenanimation erzielen

Wirkung der Operation html <Kopf> <meta ...

So verwenden Sie Mixins in Vue

Inhaltsverzeichnis Vorwort Anwendung Zusammenfass...