Wie können wir Split-Tags verwenden, um HTML-Elemente zu formatieren?

WBOY
Freigeben: 2023-09-06 13:45:05
nach vorne
1357 Leute haben es durchsucht

Das

-Tag dient als Container für HTML-Elemente. Mit Hilfe dieses Tags können wir ganz einfach einen Teil des HTML-Dokuments definieren. Es wird auch verwendet, um die meisten HTML-Elemente zu gruppieren und einfach zu formatieren. Tags werden mit Elementen auf Blockebene verwendet.

Das

-Tag akzeptiert alle CSS-Eigenschaften und verwendet Eigenschaften wie class und id, um die darin enthaltenen Elemente zu formatieren.

Wie können wir Split-Tags verwenden, um HTML-Elemente zu formatieren?

Grammatik

Das Folgende ist die Syntax des Tags.

<div class='division'>Content…</div>
Nach dem Login kopieren

Beispiel 1

Im Folgenden finden Sie ein Beispiel für das Hinzufügen von Stilen zu einem div-Tag in HTML.

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      .parent {
         border: 1rem solid green;
         margin: 1rem;
         padding: 1rem 1rem;
         text-align: center;
         box-shadow: 2px 2px 20px 23px aquamarine;
      }
      .division {
         display: inline-block;
         border: 1px solid aquamarine;
         padding: 1rem 1rem;
         background-color: #2ecc71;
         color: white;
      }
   </style>
</head>
<body>
   <div class='parent'>
      <div class='division'>div tag 1</div>
      <div class='division'>div tag 2</div>
      <div class='division'>div tag 3</div>
   </div>
</body>
</html>
Nach dem Login kopieren

Das Folgende ist die Ausgabe des obigen Beispielprogramms.

Wir können den Etiketten weitere Stile hinzufügen.

Beispiel 2

Im Folgenden finden Sie ein weiteres Beispiel für das Hinzufügen von Stilen zu div-Tags in HTML.

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      .parent {
         border: 1rem solid green;
         margin: 1rem;
         padding: 1rem 1rem;
         text-align: center;
         box-shadow: 2px 2px 20px 23px aquamarine;
      }
      .division {
         display: inline-block;
         border: 1px solid aquamarine;
         padding: 1rem 1rem;
         background-color: #2ecc71;
         color: white;
         text-transform: uppercase;
         text-decoration: underline;
         font-family: cursive;
         font-size: 1.2rem;
         font-weight: bolder;
         font-style: italic;
      }
   </style>
</head>
<body>
   <div class='parent'>
      <div class='division'>div tag 1</div>
      <div class='division'>div tag 2</div>
      <div class='division'>div tag 3</div>
   </div>
</body>
</html>
Nach dem Login kopieren

Das Folgende ist die Ausgabe des obigen Beispielprogramms.

Beispiel 3

Sie können versuchen, den folgenden Code auszuführen, um ein HTML-Element mithilfe des Tags zu formatieren. Die hinzugefügte Stilregel wird auf Elemente mit id="content" angewendet. Die ID hier ist der CSS-Selektor.

<!DOCTYPE html>
<html>
<head>
   <style>
      #container p {
         line-height: 15px;
         margin: 20px;
         padding-bottom: 15px;
         text-align: justify;
         width: 130px;
         color: blue;
      }
   </style>
   <title>HTML div Tag</title>
   <link rel = "stylesheet" href = "style.css">
</head>
<body>
   <div id = "container">
      <p>Welcome to our website. We provide tutorials on various subjects.</p>
   </div>
</body>
</html>
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie können wir Split-Tags verwenden, um HTML-Elemente zu formatieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:tutorialspoint.com
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