grid
Andy
parent
b449bc746b
commit
9158814bde
327
README.html
327
README.html
File diff suppressed because one or more lines are too long
|
|
@ -52,10 +52,17 @@
|
|||
* [CSS float – Positionieren und Umfließen](https://www.mediaevent.de/css/position-float.html)
|
||||
* [CSS position](https://www.mediaevent.de/css/position.html)
|
||||
* [Flexbox](https://blog.kulturbanause.de/2013/07/einfuhrung-in-das-flexbox-modell-von-css/)
|
||||
* [Grid Guide](https://css-tricks.com/snippets/css/complete-guide-grid/)
|
||||
* [Learn Grid](https://learncssgrid.com/)
|
||||
|
||||
### Responsive Design
|
||||
* [Irrwege im Webdesign](https://wiki.selfhtml.org/wiki/HTML/Tutorials/responsive_Webdesign/Layoutkonzepte#Die_Irrwege)
|
||||
* [Die Basics](https://t3n.de/news/basics-responsive-webdesign-9-578560/)
|
||||
* [Adaptive Responsive Liquide](http://blog.kulturbanause.de/2012/11/adaptive-website-vs-responsive-website/)
|
||||
|
||||
### Interne Links
|
||||
* [float](html/float.html)
|
||||
* [position](html/position)
|
||||
* [position](html/position.html)
|
||||
* [flexbox](html/flex.html)
|
||||
* [grid](html/grid.html)
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,13 @@
|
|||
.bigbox{
|
||||
display: grid;
|
||||
grid-template-columns: 25% 25% auto;
|
||||
grid-template-rows: auto auto auto;
|
||||
grid-gap: 1em;
|
||||
padding: 1em;
|
||||
border: 2px solid yellowgreen;
|
||||
}
|
||||
.box{
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
background-color: yellowgreen;
|
||||
}
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Die HTML Struktur in Webseiten">
|
||||
<title>HTML Struktur</title>
|
||||
<link rel="stylesheet" href="../css/reset.css">
|
||||
<link rel="stylesheet" href="../css/code.css">
|
||||
<link rel="stylesheet" href="../css/style.css">
|
||||
<link rel="stylesheet" href="../css/grid.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="wrapper">
|
||||
<a href="../index.html"><img src="../img/logo.svg" alt="Mein logo" title="Der Titel meines Bildes"></a>
|
||||
<nav role="navigation">
|
||||
<ul>
|
||||
<li><a href="float.html">Float</a></li>
|
||||
<li><a href="position.html">Position</a></li>
|
||||
<li><a href="flexbox.html">Flexbox</a></li>
|
||||
<li><a href="grid.html">Grid</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main role="main" class="wrapper">
|
||||
<h1>Inhalt strukturieren mit Grid</h1>
|
||||
<article>
|
||||
<h2>Zweidimensionales Grid</h2>
|
||||
<div class="bigbox">
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="">
|
||||
<h2>Die Boxen</h2>
|
||||
<pre class="line-numbers language-html">
|
||||
<code class="language-html"><div class="bigbox">
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
</code>
|
||||
</pre>
|
||||
<h2>& Grid 3 Zeilen, 3 Spalten</h2>
|
||||
<pre class="line-numbers language-html">
|
||||
<code class="language-css">.bigbox{
|
||||
display: grid;
|
||||
grid-template-columns: 25% 25% auto;
|
||||
grid-template-rows: auto auto auto;
|
||||
grid-gap: 1em;
|
||||
border: 2px solid yellowgreen;
|
||||
}
|
||||
.box{
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
background-color: yellowgreen;
|
||||
}
|
||||
</code>
|
||||
</pre>
|
||||
|
||||
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="wrapper">
|
||||
<p><a title="Link zu Download" href="https://git.perin.work/andy/webdev">Download</a></p>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="../js/code.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
13
index.html
13
index.html
|
|
@ -90,15 +90,22 @@
|
|||
<li><a href="https://hankchizljaw.com/wrote/a-modern-css-reset/">A Modern CSS Reset</a> (Nur Reset-Funktion)
|
||||
</li>
|
||||
</ul>
|
||||
<h3 class="mume-header" id="css-inhalte-positionieren">CSS Inhalte positionieren</h3>
|
||||
<h3>CSS Inhalte positionieren</h3>
|
||||
<ul>
|
||||
<li><a href="https://www.mediaevent.de/css/position-float.html">CSS float – Positionieren und
|
||||
Umfließen</a></li>
|
||||
<li><a href="https://www.mediaevent.de/css/position.html">CSS position</a></li>
|
||||
<li><a href="https://blog.kulturbanause.de/2013/07/einfuhrung-in-das-flexbox-modell-von-css/">Flexbox</a></li>
|
||||
<li><a href="https://css-tricks.com/snippets/css/complete-guide-grid/">Grid Guide</a></li>
|
||||
<li><a href="https://learncssgrid.com/">Learn Grid</a></li>
|
||||
</ul>
|
||||
<h3 class="mume-header" id="interne-links-1">Interne Links</h3>
|
||||
|
||||
<h3>Responsive Design</h3>
|
||||
<ul>
|
||||
<li><a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/responsive_Webdesign/Layoutkonzepte#Die_Irrwege">Irrwege im Webdesign</a></li>
|
||||
<li><a href="https://t3n.de/news/basics-responsive-webdesign-9-578560/">Die Basics</a></li>
|
||||
<li><a href="http://blog.kulturbanause.de/2012/11/adaptive-website-vs-responsive-website/">Adaptive Responsive Liquide</a></li>
|
||||
</ul>
|
||||
<h3></h3>Interne Links</h3>
|
||||
<ul>
|
||||
<li><a href="html/float.html">float</a></li>
|
||||
<li><a href="html/position.html">position</a></li>
|
||||
|
|
|
|||
Loading…
Reference in New Issue