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

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

WBOY

Freigeben： 2023-09-06 13:45:05

nach vorne

1343 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!