juplo.de Git - website/blob - dist/thymeleaf/projects/html-experimente.html

   1 <!DOCTYPE html>
   2 <html
   3     xmlns="http://www.w3.org/1999/xhtml"
   4     xmlns:layout="http://www.thymeleaf.org"
   5     xmlns:th="http://www.thymeleaf.org"
   6     layout:decorator="templates/layout"
   7     >
   8   <head>
   9     <title>HTML-Experimente</title>
  10     <link rel="stylesheet" type="text/css" href="../../css/base.min.css"/>
  11     <style type="text/css">
  12       @import '../../css/screen.min.css' screen;
  13       @import '../../css/print.min.css' print;
  14     </style>
  15   </head>
  16   <body>
  17     <ol layout:fragment="breadcrumb">
  18       <li class="b"><a class="b" href="../index.html" th:href="@{/index.html}">Home</a></li>
  19       <li class="b"><a class="b" href="../projects.html" th:href="@{/projects.html}">Projects</a></li>
  20       <li class="b"><strong class="b">HTML-Experimente</strong></li>
  21     </ol>
  22     <nav layout:fragment="navigation" th:fragment="navigation (page)">
  23       <hr class="n"/>
  24       <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
  25       <h1 class="nav">Navigation</h1>
  26       <h2 class="nav menu">Section-Menu</h2>
  27       <ul id="menu" class="cf">
  28         <li class="m blog"><a href="../blog.html" th:href="@{/blog.html}" class="m">Blog</a></li>
  29         <li class="m projects"><a href="../projects.html" th:href="@{/projects.html}" class="m selected">Projects</a></li>
  30         <li class="m about"><a href="../about.html" th:href="@{/about.html}" class="m">About</a></li>
  31       </ul>
  32       <h2 class="nav submenu">
  33         <span class="s">Submenu for section</span>
  34         <a class="s selected" href="../projects.html" th:href="@{/projects.html}">Projects</a>
  35       </h2>
  36       <ul id="submenu" class="s active">
  37         <li class="s sub off"><a href="#" class="s">hibernate4-maven-plugin</a></li>
  38         <li class="s sub off"><a href="../projects/fix-swf.html" th:href="@{/projects/fix-swf.html}" class="s">fix-swf</a></li>
  39         <li class="s off"><a href="#" class="s">jquery.openx</a></li>
  40         <li class="s sub">
  41           <span th:switch="${page}" th:remove="tag">
  42             <a th:case="${page}" href="#" th:href="@{/projects/html-experimente.html}" class="s selected">HTML-Experimente</a>
  43             <strong th:case="*" class="s">HTML-Experimente</strong>
  44           </span>
  45           <ul class="s active">
  46             <li class="s" th:switch="${page}">
  47               <strong th:case="'formulare'" class="s">Formulare</strong>
  48               <a th:case="*" class="s" href="formulare.html" th:href="@{/projects/html-experimente/formulare.html}">Formulare</a>
  49             </li>
  50             <li class="s" th:switch="${page}">
  51               <strong th:case="'symbole'" class="s">Symbol-Font</strong>
  52               <a th:case="*" class="s" href="symbole.html" th:href="@{/projects/html-experimente/symbole.html}">Symbol-Font</a>
  53             </li>
  54             <li class="s">
  55               <a class="s" href="../../404.html" th:href="@{/404.html}">404-Template</a>
  56             </li>
  57             <li class="s">
  58               <a class="s" href="gibts-ja-gar-nicht.html" th:href="@{/projects/html-experimente/gibts-ja-gar-nicht.html}">404-Fehlerseite</a>
  59             </li>
  60             <li class="s">
  61               <a class="s" href="../../error.html" th:href="@{/error.html}">5xx-Template</a>
  62             </li>
  63             <li class="s">
  64               <a class="s" href="error.html" th:href="@{/projects/html-experimente/error.html}">5xx-Fehlerseite</a>
  65             </li>
  66             <li class="s" th:switch="${page}">
  67               <strong th:case="'fast-leer-mit-menü'" class="s">Leer, mit Menü</strong>
  68               <a th:case="*" class="s" href="fast-leer-mit-menü.html" th:href="@{/projects/html-experimente/fast-leer-mit-menü.html}">Leer, mit Menü</a>
  69             </li>
  70             <li class="s" th:switch="${page}">
  71               <strong th:case="'fast-leer-mit-menü-und-marginalinhalt'" class="s">Leer, mit Menü, mit Marginal</strong>
  72               <a th:case="*" class="s" href="fast-leer-mit-menü-und-marginalinhalt.html" th:href="@{/projects/html-experimente/fast-leer-mit-menü-und-marginalinhalt.html}">Leer, mit Menü, mit Marginal</a>
  73             </li>
  74             <li class="s" th:switch="${page}">
  75               <strong th:case="'fast-leer-kein-menü'" class="s">Leer ohne Menü</strong>
  76               <a th:case="*" class="s" href="fast-leer-kein-menü.html" th:href="@{/projects/html-experimente/fast-leer-kein-menü.html}">Leer ohne Menü</a>
  77             </li>
  78             <li class="s" th:switch="${page}">
  79               <strong th:case="'fast-leer-kein-menü-aber-marginalinhalt'" class="s">Leer, ohne Menü, mit Marginal</strong>
  80               <a th:case="*" class="s" href="fast-leer-kein-menü-aber-marginalinhalt.html" th:href="@{/projects/html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html}">Leer, ohne Menü, mit Marginal</a>
  81             </li>
  82             <li class="s" th:switch="${page}">
  83               <strong th:case="'fast-leer-einspaltig'" class="s">Leer, einspaltig</strong>
  84               <a th:case="*" class="s" href="fast-leer-einspaltig.html" th:href="@{/projects/html-experimente/fast-leer-einspaltig.html}">Leer, einspaltig</a>
  85             </li>
  86             <li class="s" th:switch="${page}">
  87               <strong th:case="'fast-leer-einspaltig-mit-marginalinhalt'" class="s">Leer, einspaltig, mit Marginal</strong>
  88               <a th:case="*" class="s" href="fast-leer-einspaltig-mit-marginalinhalt.html" th:href="@{/projects/html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html}">Leer, einspaltig, mit Marginal</a>
  89             </li>
  90             <li class="s" th:switch="${page}">
  91               <strong th:case="'breadcrumb'" class="s">Langer Breadcrumb</strong>
  92               <a th:case="*" class="s" href="breadcrumb.html" th:href="@{/projects/html-experimente/breadcrumb.html}">Langer Breadcrumb</a>
  93             </li>
  94             <li class="s" th:switch="${page}">
  95               <strong th:case="'kein-layout'" class="s">Alle Stylings deaktiviert</strong>
  96               <a th:case="*" class="s" href="kein-layout.html" th:href="@{/projects/html-experimente/kein-layout.html}">Alle Stylings deaktiviert</a>
  97             </li>
  98             <li class="s" th:switch="${page}">
  99               <strong th:case="'basis-layout'" class="s">Nur das Basis-Layout</strong>
 100               <a th:case="*" class="s" href="basis-layout.html" th:href="@{/projects/html-experimente/basis-layout.html}">Nur das Basis-Layout</a>
 101             </li>
 102             <li class="s" th:switch="${page}">
 103               <strong th:case="'druck-layout'" class="s">Druck-Layout</strong>
 104               <a th:case="*" class="s" href="druck-layout.html" th:href="@{/projects/html-experimente/druck-layout.html}">Druck-Layout</a>
 105             </li>
 106             <li class="s" th:switch="${page}">
 107               <strong th:case="'tiny'" class="s">Layout TINY</strong>
 108               <a th:case="*" class="s" href="tiny.html" th:href="@{/projects/html-experimente/tiny.html}">Layout TINY</a>
 109             </li>
 110             <li class="s" th:switch="${page}">
 111               <strong th:case="'phone'" class="s">Layout PHONE</strong>
 112               <a th:case="*" class="s" href="phone.html" th:href="@{/projects/html-experimente/phone.html}">Layout PHONE</a>
 113             </li>
 114             <li class="s" th:switch="${page}">
 115               <strong th:case="'tablet'" class="s">Layout Tablet</strong>
 116               <a th:case="*" class="s" href="tablet.html" th:href="@{/projects/html-experimente/tablet.html}">Layout TABLET</a>
 117             </li>
 118             <li class="s" th:switch="${page}">
 119               <strong th:case="'seitenaufteilung'" class="s">Basis-Layout &amp; Seitenaufteilung</strong>
 120               <a th:case="*" class="s" href="seitenaufteilung.html" th:href="@{/projects/html-experimente/seitenaufteilung.html}">Basis-Layout &amp; Seitenaufteilung</a>
 121             </li>
 122             <li class="s" th:switch="${page}">
 123               <strong th:case="'seitenkopf'" class="s">Basis-Layout &amp; Seitenkopf</strong>
 124               <a th:case="*" class="s" href="seitenkopf.html" th:href="@{/projects/html-experimente/seitenkopf.html}">Basis-Layout &amp; Seitenkopf</a>
 125             </li>
 126             <li class="s" th:switch="${page}">
 127               <strong th:case="'media-query'" class="s">Media-Query-Test (Beispiel)</strong>
 128               <a th:case="*" class="s" href="testlab.html" th:href="@{/projects/html-experimente/testlab.html}">Media-Query-Test (Beispiel)</a>
 129             </li>
 130           </ul>
 131         </li>
 132         <li class="s sub off"><a href="#" class="s">accelerator</a></li>
 133         <li class="s off"><a href="../projects/typo.html" th:href="@{/projects/typo.html}" class="s">Typography</a></li>
 134       </ul>
 135     </nav>
 136     <article class="main" layout:fragment="maincontent">
 137       <header><h1>HTML-Elemente / spezielle Seiten</h1></header>
 138       <ul>
 139         <li><a href="html-experimente/formulare.html" th:href="@{/projects/html-experimente/formulare.html}">Formulare</a></li>
 140         <li><a href="html-experimente/symbole.html" th:href="@{/projects/html-experimente/symbole.html}">Symbol-Font</a></li>
 141         <li><a href="../404.html" th:href="@{/404.html}">404-Template</a></li>
 142         <li><a href="html-experimente/gibts-ja-gar-nicht.html" th:href="@{/projects/html-experimente/gibts-ja-gar-nicht.html}">404-Fehlerseite</a></li>
 143         <li><a href="../error.html" th:href="@{/error.html}">Template für andere Fehler</a></li>
 144         <li><a href="html-experimente/error.html" th:href="@{/projects/html-experimente/error.html}">Fehlerseite für andere Fehler</a></li>
 145       </ul>
 146       <h2>Layout-Grenzfälle</h2>
 147       <ul>
 148         <li><a href="html-experimente/fast-leer-mit-menü.html" th:href="@{/projects/html-experimente/fast-leer-mit-menü.html}">Fast leere Seite mit Menü</a></li>
 149         <li><a href="html-experimente/fast-leer-mit-menü-und-marginalinhalt.html" th:href="@{/projects/html-experimente/fast-leer-mit-menü-und-marginalinhalt.html}">Fast leere Seite mit Menü und Marginal-Inhalt</a></li>
 150         <li><a href="html-experimente/fast-leer-kein-menü.html" th:href="@{/projects/html-experimente/fast-leer-kein-menü.html}">Fast leere Seite ohne Menü</a></li>
 151         <li><a href="html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html" th:href="@{/projects/html-experimente/fast-leer-kein-menü-aber-marginalinhalt.html}">Fast leere Seite ohne Menü aber mit Marginal-Inhalt</a></li>
 152         <li><a href="html-experimente/fast-leer-einspaltig.html" th:href="@{/projects/html-experimente/fast-leer-einspaltig.html}">Fast leere einspaltige Seite</a></li>
 153         <li><a href="html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html" th:href="@{/projects/html-experimente/fast-leer-einspaltig-mit-marginalinhalt.html}">Fast leere einspaltige Seite mit Marginal-Inhalt</a></li>
 154         <li><a href="html-experimente/breadcrumb.html" th:href="@{/projects/html-experimente/breadcrumb.html}">Seite mit sehr langem Breadcrumb</a></li>
 155       </ul>
 156       <h2>Layout-Variationen</h2>
 157       <ul>
 158         <li><a href="html-experimente/kein-layout.html" th:href="@{/projects/html-experimente/kein-layout.html}">Alle Stylings deaktiviert</a></li>
 159         <li><a href="html-experimente/basis-layout.html" th:href="@{/projects/html-experimente/basis-layout.html}">Nur das Basis-Layout</a></li>
 160         <li><a href="html-experimente/druck-layout.html" th:href="@{/projects/html-experimente/druck-layout.html}">Die für den Ausdruck angepasste Ansicht</a></li>
 161         <li><a href="html-experimente/tiny.html" th:href="@{/projects/html-experimente/tiny.html}">Layout für sehr kleine Bildschirmgrößen</a></li>
 162         <li><a href="html-experimente/phone.html" th:href="@{/projects/html-experimente/phone.html}">Layout für Smartphones</a></li>
 163         <li><a href="html-experimente/tablet.html" th:href="@{/projects/html-experimente/tablet.html}">Layout für Tablets</a></li>
 164       </ul>
 165       <h2>Testseiten für einzelne Seiten-Bestandteile</h2>
 166       <ul>
 167         <li><a href="html-experimente/seitenaufteilung.html" th:href="@{/projects/html-experimente/seitenaufteilung.html}">Nur das Basis-Layout und die Seitenaufteilung</a></li>
 168         <li><a href="html-experimente/seitenkopf.html" th:href="@{/projects/html-experimente/seitenkopf.html}">Nur das Basis-Layout und der Seitenkopf</a></li>
 169       </ul>
 170       <h2>Anderer Krams...</h2>
 171       <ul>
 172         <li><a href="html-experimente/testlab.html" th:href="@{/projects/html-experimente/testlab.html}">Seite mit Breiten-Markierungen für den Tests von Media-Queries (Beispiel)</a></li>
 173       </ul>
 174     </article>
 175   </body>
 176 </html>