2.9.7 Beispiele von Rahmen Block

• 1 Anzeigen mit pre
• 2 Blaue Boxen
• 3 Grüne Boxen
• 4 Schwarze Boxen
• 5 Graue Boxen
• 6 Rote Boxen
• 7 Gelbe Boxen

-

1 Anzeigen mit pre

Anzeige wie Quelltext geschrieben wird

1) Quelltext:

<pre class="quell">
Darstellung von Text wie er im Quelltext steht
</pre>

2) Anzeige als Anleiung, wie Quelltext geschrieben wird:

Darstellung von Text wie er im Quelltext steht

Stylesheet

1) Quelltext:

<pre class="style">
Darstellung von Text wie er im Stylesheet steht
</pre>

2) Anzeige:

Darstellung von Text wie er im Stylesheet steht

Code

1) Quelltext:

<pre class="code">
Darstellung von Codes.
</pre>

2) Anzeige:

Darstellung von Codes.

php

1) Quelltext:

<pre class="php">
Darstellung der PHP-Angaben
</pre>

2) Anzeige:

Darstellung der PHP-Angaben

JavaScript

1) Quelltext:

<pre class="js">
Darstellung der JavaScript-Angaben
</pre>

2) Anzeige:

Darstellung der JavaScript-Angaben

Text mit pre in einem schwarzen Rahmen

1) Quelltext:

<pre class="text-box">
Darstellung von Text mit <code>pre</code> in einem schwarzen Rahmen
</pre>

2) Anzeige:

Darstellung von Text mit pre in einem schwarzen Rahmen

-

2 Blaue Boxen

Blaue Box

<div class="box-blau">
<span style="font-size:1.2em; font-weight: bold; 
color:red">Titel</span><br>
Mitteilung
</div>

Blau-grüne Box

1) Quelltext:

<div class="box-blau-gruen">
<p class="titel-blau">Titel</p>
<p class="untertitel-blau">Untertitel</p>
<p>Absatz:</p>
<ul>
<li>Aufzählung</li>
</ul>
</div>

2) Anzeige:

-

3 Grüne Boxen

<div class="box-gruen">
<span style="font-size:1.2em; font-weight: bold; 
color:red">Titel</span><br>
Mitteilung
</div>

-

4 Schwarze Boxen

Schwarze Box mit normaler schwarzer Schrift

<div class="box-schwarz">
<p>Schwarze Box mit normaler Schrift</p>  
</div>

Titel mit span formatiert:

<div class="box-schwarz">
<span style="font-size:1.2em; font-weight: 
bold; color:red">Titel</span><br>
<p>Mitteilung</p>
</div>

Titel als Absatz formatiert:

<div class="box-schwarz">
<p style="font-size:1.2em; font-weight: 
bold; color:red">Titel</p>
<p>Mitteilung</p>
</div>

-

5 Graue Boxen

<p>Dies ist ein <code class="box-grau">
Text mit einem eingefügten Rahmen</code>
mitten im Satz.</p>

Dies ist ein Text mit einem eingefügten Rahmen mitten im Satz.

-

6 Rote Boxen

Normale Schrift, automatisch zentriert:

<div class="box-rot">
<p>Rote Box mit normaler Schrift automatisch zentriert</p>  
</div>

Roter Titel und normale Schrift automatisch zentriert:

<div class="box-rot">
<span style="font-size:1.2em; font-weight:bold; 
color:red">Titel</span><br>
Mitteilung
</div>

Normale Schrift links ausgerichtet:

<div class="box-rot" style="text-align:left">
<p>Rote Box mit Text links ausgerichtet</p>  
</div>

Dünner Rahmen: Normale Schrift links ausgerichtet:

<div class="box-rotduenn">
<p>Dünner Rahmen: Rote Box mit Text links ausgerichtet</p>  
</div>

-

7 Gelbe Boxen

<div class="box-gelb">
<span style="font-size:1.2em; 
font-weight:bold; color:red">
Posteingang</span><br>
Name: Der Benutzer<br>
Betrifft: Testeingabe<br>
Mitteilung: Bla bla
</div>

↑