Heim > Web-Frontend > HTML-Tutorial > Wie entferne ich den Punkt aus dem ul-Tag in HTML? Stilbeispielanalyse einer ungeordneten HTML-Liste

Wie entferne ich den Punkt aus dem ul-Tag in HTML? Stilbeispielanalyse einer ungeordneten HTML-Liste

寻∝梦
Freigeben: 2018-08-31 13:35:08
Original
40419 Leute haben es durchsucht

In diesem Artikel geht es hauptsächlich um das Aufheben der Standardpunkte des ul-Tags in HTML sowie um die Stilerklärung des ul-Tags für ungeordnete Listen in HTML und um eine Einführung in die drei Werte des ul-Tags ​des Typattributs. Schauen wir uns nun gemeinsam diesen Artikel an

Zu Beginn dieses Artikels stellen wir zunächst vor, wie man die Punkte des ul-Tags in HTML entfernt:

Jeder hätte das ul-Unordered-List-Tag verwenden sollen. Es gibt viele Verwendungsmöglichkeiten für das ul-Tag. Oft können wir stattdessen Punkte verwenden, was sich gut anfühlt. Aber manchmal fühlt es sich nicht sehr sinnvoll an, ihn durch einen Punkt zu ersetzen. Zu diesem Zeitpunkt denken wir normalerweise darüber nach, wie wir den Punkt entfernen oder ihn in einen anderen Stil ändern können. Im heutigen Artikel geht es hauptsächlich darum, wie man diesen Punkt entfernt. Später werden wir auch darüber sprechen, wie man ihn zur Anzeige in andere Stile umwandelt. (Wenn Sie mehr sehen möchten, besuchen Sie die chinesische PHP-Website. Hier gibt es Kurse zum Erlernen von HTML)

Lassen Sie uns nun darüber sprechen, wie Sie Punkte entfernen. Lassen Sie uns a verwenden Vollständiges Codebeispiel zur Demonstration von ul-Tags:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
</head>
<body>
<ul>
  <li>php中文网</li>
  <li>百度百科</li>
  <li>腾讯课堂</li>
</ul>
</body>
</html>
Nach dem Login kopieren

Dies ist eine grundlegende UL-Anwendung für ungeordnete Listen. Der Anzeigeeffekt ist wie in der folgenden Abbildung dargestellt:

Wie entferne ich den Punkt aus dem ul-Tag in HTML? Stilbeispielanalyse einer ungeordneten HTML-Liste

In diesem Bild ist alles enthalten. Es ist ein benutzerdefinierter kleiner Punkt. In vielen Fällen ist es in Ordnung, kleine Punkte zu verwenden, aber was ist, wenn wir die kleinen Punkte entfernen möchten? Mal sehen, wie ich es geschafft habe.

Geben Sie mir noch eine Demonstration des gesamten UL-Tag-Codes:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style type=""text/css>
ul{
list-style: none;
}
</style>
</head>
<body>
<ul>
  <li>php中文网</li>
  <li>百度百科</li>
  <li>腾讯课堂</li>
</ul>
</body>
</html>
Nach dem Login kopieren

Im Vergleich zum vorherigen Code fügt dieser Code nur eine CSS-Stildatei hinzu und verwendet einen kleinen CSS-Stil können Sie den Stil der ungeordneten UL-Liste ändern. Obwohl einige Leute keine CSS-Stile kennen, müssen sie sich nur an einen so einfachen Stil erinnern, wenn sie wissen, wie man ihn schreibt, um den Standardpunkt des ul-Tags zu beseitigen.

Die Darstellung lautet wie folgt:

Wie entferne ich den Punkt aus dem ul-Tag in HTML? Stilbeispielanalyse einer ungeordneten HTML-Liste

Stimmt es, dass es keine kleinen Punkte mehr gibt? Solche Tags können in vielen Situationen verwendet werden, z als Navigation Bei Anwendungen wie Streifen müssen die kleinen Punkte entfernt werden.

2. Lassen Sie uns nun darüber sprechen, wie Sie das ul-Tag in andere Stile umwandeln, zum Beispiel kleine Punkte in quadratische Formen. Schauen wir uns weiter

Hier geht es um das Typattribut des ul-Tags. Dieses Attribut kann auch im OL-Tag der geordneten Liste verwendet werden, der Wert des Attributs ist jedoch unterschiedlich. Werfen wir nun einen Blick auf die Anwendung von Typ-Tags in ul-Tags:

Hier ist ein weiteres Beispiel für ul-Tags:

<ul type="square">
  <li>php中文网</li>
  <li>百度百科</li>
  <li>腾讯课堂</li>
</ul>
Nach dem Login kopieren

type="square" oben Bild Was bedeutet das? Werfen wir einen Blick auf die Darstellungen:

Wie entferne ich den Punkt aus dem ul-Tag in HTML? Stilbeispielanalyse einer ungeordneten HTML-Liste

Sehen Sie sich das Bild oben an, es ist etwas klein, aber es ist offensichtlich, dass es sich von den ursprünglichen kleinen Punkten zum aktuellen Quadrat geändert hat Schwarzes bestellt. Dies ist einer der Stile. Es gibt einen weiteren Attributwert:

type="circle". Die Bedeutung ist auch leicht zu verstehen:

Wie entferne ich den Punkt aus dem ul-Tag in HTML? Stilbeispielanalyse einer ungeordneten HTML-Liste

Wie im Bild oben gezeigt, ist es jetzt ein hohler Kreis. Dies sind drei Stile, die aus HTML-ul-Tags und -Attributen bestehen (es gibt auch einen Stil, der die kleinen Punkte mit It's zurückverwandelt type="

disc") Viele Leute haben begonnen, CSS-Stylesheets zum Festlegen von Stilen für Tags zu verwenden, aber es gibt immer noch viele Leute, die gerne reine HTML-Tags verwenden, um Stile zu implementieren Ich verwende HTML-Tag-Stile und verwende selten CSS-Stile. Manchmal verwende ich stattdessen CSS-Stile, wenn die Tag-Stile nicht einfach zu verwenden sind.

Okay, das ist der gesamte Inhalt dieses Artikels über UL-Tags (wenn Sie mehr erfahren möchten, besuchen Sie die PHP-Chinese-Website, eine Website zum Erlernen des Programmierens). , Sie können unten eine Nachricht hinterlassen.

[Empfehlung des Herausgebers]

Was sind die drei Elemente des Meta-Tags in HTML5? Zusammenfassung der Verwendung von Meta-Tags

Wie erstelle ich den HTML-Auswahl-Dropdown-Box-Stil? Ausführliche Erklärung des HTML-Auswahlstils

Das obige ist der detaillierte Inhalt vonWie entferne ich den Punkt aus dem ul-Tag in HTML? Stilbeispielanalyse einer ungeordneten HTML-Liste. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage