Difference between revisions of "Test page"

From wikibase-docker
 
(5 intermediate revisions by one other user not shown)
Line 1: Line 1:
 +
{{Kasinet_header}}
 +
 
<span style="display: inline-block; padding: 10px 20px; background-color: #4CAF50; color: white; text-align: center; text-decoration: none; font-size: 16px; border-radius: 5px; border: none; cursor: pointer;">Click me</span>
 
<span style="display: inline-block; padding: 10px 20px; background-color: #4CAF50; color: white; text-align: center; text-decoration: none; font-size: 16px; border-radius: 5px; border: none; cursor: pointer;">Click me</span>
  
 
<span style="display: inline-block; padding: 10px 20px; background-color: #4CAF50; color: white; text-align: center; text-decoration: none; font-size: 16px; border-radius: 5px; border: none; cursor: pointer;" onclick="window.open('https://example.com', '_blank');">Click me</span>
 
<span style="display: inline-block; padding: 10px 20px; background-color: #4CAF50; color: white; text-align: center; text-decoration: none; font-size: 16px; border-radius: 5px; border: none; cursor: pointer;" onclick="window.open('https://example.com', '_blank');">Click me</span>
−
<div class="limit-line-length">
 
−
'''Diese Seite zeigt einige Formatierungen, die dank der [https://www.mediawiki.org/wiki/Extension:TemplateStyles TemplateStyles-Erweiterung] möglich werden.''' Das zugehörige Stylesheet findet sich unter [[Vorlage:TemplateStyles/styles.css]]. Es wird wie folgt eingebunden:
 
−
 
−
<syntaxhighlight lang="html">
 
−
<templatestyles src="TemplateStyles/styles.css" />
 
−
</syntaxhighlight>
 
−
<templatestyles src="TemplateStyles/styles.css" />
 
−
 
−
<hr>
 
−
 
−
 
−
==Indirekte Anordnung von Unterelementen==
 
−
<div class="box">
 
−
Dies ist ein Beispieltext.
 
−
</div>
 
−
 
−
<div class="box">
 
−
Dies ist ein Beispieltext.
 
−
</div>
 
−
 
−
<div class="in-row">
 
−
<div class="box">
 
−
Dies ist ein Beispieltext.
 
−
</div>
 
−
 
−
<div class="box">
 
−
Dies ist ein Beispieltext.
 
−
</div>
 
−
 
−
<div class="box">
 
−
Dies ist ein Beispieltext.
 
−
</div>
 
−
</div>
 
−
 
−
<syntaxhighlight lang="html">
 
−
<div class="box">
 
−
Dies ist ein Beispieltext.
 
−
</div>
 
−
 
−
<div class="box">
 
−
Dies ist ein Beispieltext.
 
−
</div>
 
−
 
−
<div class="in-row">
 
−
<div class="box">
 
−
Dies ist ein Beispieltext.
 
−
</div>
 
−
 
−
<div class="box">
 
−
Dies ist ein Beispieltext.
 
−
</div>
 
−
 
−
<div class="box">
 
−
Dies ist ein Beispieltext.
 
−
</div>
 
−
</div>
 
−
</syntaxhighlight>
 
−
 
−
==Indirekte Formatierung von Links==
 
−
<div class="in-row">
 
−
<div class="box">
 
−
Dies ist ein Beispieltext mit einem [[Wikilink]].
 
−
</div>
 
−
 
−
<div class="box negativ">
 
−
Dies ist ein Beispieltext mit einem [[Wikilink]].
 
−
</div>
 
−
</div>
 
−
 
−
<syntaxhighlight lang="html">
 
−
<div class="in-row">
 
−
<div class="box">
 
−
Dies ist ein Beispieltext mit einem [[Wikilink]].
 
−
</div>
 
−
 
−
<div class="box negativ">
 
−
Dies ist ein Beispieltext mit einem [[Wikilink]].
 
−
</div>
 
−
</div>
 
−
</syntaxhighlight>
 
−
 
−
==Fluide Bildgrößen==
 
−
Zum Testen Broswerfenster skalieren. Bild wird immer auf die zur Verfügung stehende Breite skaliert.
 
−
<div class="in-row">
 
−
<div class="full-box fluid-image">[[File:MK17998 Lincoln Cathedral.jpg|800px]]</div>
 
−
<div class="full-box fluid-image">[[File:MK 0461-0481 Kurhaus Wiesbaden.jpg|800px]]</div>
 
−
<div class="full-box fluid-image">[[File:MK53831-32_Palais_des_Papes_d'Avignon.jpg|800px]]</div>
 
−
</div>
 
−
 
−
<syntaxhighlight lang="html">
 
−
<div class="in-row">
 
−
<div class="full-box fluid-image">[[File:MK17998 Lincoln Cathedral.jpg|800px]]</div>
 
−
<div class="full-box fluid-image">[[File:MK 0461-0481 Kurhaus Wiesbaden.jpg|800px]]</div>
 
−
<div class="full-box fluid-image">[[File:MK53831-32_Palais_des_Papes_d'Avignon.jpg|800px]]</div>
 
−
</div>
 
−
</syntaxhighlight>
 
−
 
−
<div class="in-row">
 
−
<div class="full-box fluid-image" style="width:30%">[[File:MK17998 Lincoln Cathedral.jpg|800px]]</div>
 
−
<div class="full-box fluid-image" style="width:20%">[[File:MK17998 Lincoln Cathedral.jpg|800px]]</div>
 
−
<div class="full-box fluid-image" style="width:13.3%">[[File:MK17998 Lincoln Cathedral.jpg|800px]]</div>
 
−
<div class="full-box fluid-image" style="width:8.8%">[[File:MK17998 Lincoln Cathedral.jpg|800px]]</div>
 
−
</div>
 
−
 
−
<syntaxhighlight lang="html">
 
−
<div class="in-row">
 
−
<div class="full-box fluid-image" style="width:30%">[[File:MK17998 Lincoln Cathedral.jpg|800px]]</div>
 
−
<div class="full-box fluid-image" style="width:20%">[[File:MK17998 Lincoln Cathedral.jpg|800px]]</div>
 
−
<div class="full-box fluid-image" style="width:13.3%">[[File:MK17998 Lincoln Cathedral.jpg|800px]]</div>
 
−
<div class="full-box fluid-image" style="width:8.8%">[[File:MK17998 Lincoln Cathedral.jpg|800px]]</div>
 
−
</div>
 
−
</syntaxhighlight>
 
−
 
−
==Breakpoints==
 
−
Aussehen ändert sich abhängig von der Viewport-Größe. Zum Testen Broswerfenster skalieren.
 
−
 
−
<div class="box full-width-small-down float-right-medium-up">
 
−
Dies ist ein Beispieltext mit einem [[Wikilink]].
 
−
</div>
 
−
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
 
  
−
<syntaxhighlight lang="html">
 
−
<div class="box full-width-small-down float-right-medium-up">
 
−
Dies ist ein Beispieltext mit einem [[Wikilink]].
 
−
</div>
 
−
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
 
−
</syntaxhighlight>
 
  
 +
<div style="position: relative; display: inline-block;">
 +
  <span style="background-color: #4CAF50; color: white; padding: 10px; font-size: 16px; border: none; cursor: pointer;">Dropdown</span>
 +
  <div style="display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); z-index: 1;">
 +
    <a href="#" style="color: black; padding: 10px; text-decoration: none; display: block;">Link 1</a>
 +
    <a href="#" style="color: black; padding: 10px; text-decoration: none; display: block;">Link 2</a>
 +
    <a href="#" style="color: black; padding: 10px; text-decoration: none; display: block;">Link 3</a>
 +
  </div>
 
</div>
 
</div>

Latest revision as of 14:35, 20 February 2024

Ez a KASInet oldalak header-je. Nupedia

Click me

Click me 


 Dropdown

   <a href="#" style="color: black; padding: 10px; text-decoration: none; display: block;">Link 1</a>
   <a href="#" style="color: black; padding: 10px; text-decoration: none; display: block;">Link 2</a>
   <a href="#" style="color: black; padding: 10px; text-decoration: none; display: block;">Link 3</a>
Retrieved from "https://itidata.abtk.hu/w/index.php?title=Test_page&oldid=774648"