Heim >Web-Frontend >HTML-Tutorial >So fügen Sie Inhalte in CSS3 in die Seite ein

So fügen Sie Inhalte in CSS3 in die Seite ein

PHP中文网
PHP中文网Original
2017-06-22 11:38:132126Durchsuche

A. Verwenden Sie Selektoren, um Inhalte einzufügen

h2:before{
  content:"前缀";
}
h2:after{
  content:"后缀";
}

B Einzelne Elemente angeben, die nicht eingefügt werden sollen

h2.sample:before{
  content:none;
}

2. Bilder einfügen

A. Bilddatei vor dem Titel einfügen

h2:before{
  content:url(anwy.jpg);
}

B. Zeigt den Wert des Attributs alt als Titel des Bildes an (kann nicht verwendet werden)

img:after{
  content:attr(alt);
  display:block;
  text-align:center;
  margin-top:5px;
  font-size:11px;
  font-weight:bold;
  color:black;
}

3. Nummer einfügen

A. Fügen Sie fortlaufende Nummern vor mehreren Titeln hinzu

p:before{
  content:counter(pCounter);
}
p{
  counter-increment:pCounter;
}

B. Text in Aufzählungspunkten anhängen

p:before{
  content:"第"counter(pCounter)"段";
}

C. Nummerierungsstil und -typ angeben

p:before{
  content:counter(pCounter,upper-alpha)'.';
  color:blue;
  font-size:16px;
}

D. Zahlenverschachtelung

p:before{
  content:counter(pCounter,upper-alpha)'.';
  color:blue;
  font-size:16px;
}
p{
  counter-increment:pCounter;
  counter-reset:subDivCounter;
}
p:before{
  content:counter(subDivCounter)'.';
  margin-left:15px;
 
  font-size:12px;
}
p{
  counter-increment:subDivCounter;
}

E. Fügen Sie verschachtelte Textsymbole auf beiden Seiten der Zeichenfolge hinzu

h3:before{
  content: open-quote;
}
h3:after{
  content: close-quote;
}
h3{
  quotes:"【""】";
}

Scheibe Punkt| > |. QuadratQuadrat |. Dezimalzahl Dezimalzahl| 🎜 >Großbuchstaben Latein|. Kleinbuchstaben Latein|. Großbuchstaben Latein|. ArmenischArmenische Ziffern |. georgischeGeorgische Ziffern |. KleinbuchstabenEnglische Buchstaben |. GroßbuchstabenEnglische Buchstaben |. keinekeine |

Das obige ist der detaillierte Inhalt vonSo fügen Sie Inhalte in CSS3 in die Seite ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
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