Beispiel:CSS-grid-layout-4-benannte-Linien-2.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!DOCTYPE html>
<html lang="de">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid mit benannten Linien-2</title>
	<style>
:root {
	--accent1: #70369b;
	--accentmedium1: #7f4ba5;
	--accentlighter1: #df84de;	
	--accent2: #ea740b;
	--accentlighter2: orange;
	--accent3: lime;
	--backgroundColor: linen;
	--textColor: #333;
	--navColor: #fff;
	
	--navWidth: 12em;
	--mainWidth: min(48em, calc(100% - var(--navWidth)));
	--headerLineHeight: 3em;
}

body {
	width: 100%;
	min-height: 100vh;
	margin: 0;
	padding: 0;
	background: var(--backgroundColor);
	font-size: 1em;
	font-family: Avenir, Arial, sans-serif; 
}
header {
	grid-area: head;	
	padding: 2em;
}

nav {
    grid-area: nav;		    
    background: linear-gradient(90deg, var(--accentlighter1), var(--accentmedium1)) ;
    color: var(--navColor);
    padding: 1em;
}

@media (min-width: 30em) {
  body { 
    display: grid;  
    grid-template:	". nav head ." min-content
			". nav rule ." var(--headerLineHeight)
                    ". nav main ." auto
                    ". nav foot ." min-content /
			1fr var(--navWidth) var(--mainWidth) 1fr;
    } 
    body::before {
        content: '';
        grid-row: rule;
	grid-column: 1 / 1;
        background: linear-gradient(to right, var(--accent1), var(--accentlighter1));
    }
    body::after {
        content: '';
        grid-row: rule;
	grid-column: rule-start / -1;
        background-image: linear-gradient(to right, var(--accentmedium1), var(--accent1));
    }
}

header, nav, main, article, section, aside, footer {
	border-radius: 0px 0.5em 0.5em;
	border: thin solid;
	padding: 10px;
}

header {
	background: #F1F3F4;
	border-color: #d5d5d5;
}

@media (min-width: 30em) {
	nav {
		padding-top: 10em;
	}
}

nav ul {
    list-style: none;
    margin: 0.5em;
    padding: 0;
}

nav li a {
    display: inline-block;
    text-decoration:none;
    color: inherit;
    font-size: 1.5em;  /* mobil größer */
	font-weight: bold;
    padding: 0.2em 1em;
}
@media (min-width: 30em) {
    nav li a {
        font-size: 1rem;  /* jetzt wieder auf Standardschriftgröße */
    }
}
nav li a:hover,
nav li a:focus{
    color:gold;
	background: var(--accent1) /* mediumvioletred */;
}

main {
	grid-area: main;		
	background: linen;
	border-color: #df6c20;
}

footer {
	grid-area: foot;		
	background: #e4ebf2;
	border-color: #8a9da8;
}
	</style>
</head>

<body>
	<header>
		<img src="/images/a/ad/Selfhtml-beispiel_150.svg" alt="logo">
		<h1>CSS - vom Entwurf zum Layout</h1>
	</header>

	<nav>
    	<h2>Navigation</h2>
		<ul>
			<li><a href="#link_1.html">Startseite</a></li>
			<li><a href="#link_2.html">Unterseite 1</a></li>
			<li><a href="#link_3.html">Unterseite 2</a></li>    
			<li><a href="#link_4.html">Kontakt</a></li>
		</ul>
	</nav>

	<main>
		<h2>Inhalt</h2>
		<p>Der Seiteninhalt besteht aus Header, Navigation dem Inhaltsbereich (<code>main</code>) und dem Footer.</p>
		<p>Diese werden …<br>auf schmalen Bildschirmen <b>unter-</b>, <br>auf größeren Bildschirmen <b>nebeneinander</b> dargestellt.</p>
		<p>Dieses Grid Layout wird mit wenigen Zeilen CSS erreicht.</p>

  </main>
    
	<footer>
  	<h2>Footer</h2>
		<a href="#kontakt.html">Kontakt</a>
		<p>© 2022 SELFHTML</p>
	</footer>

</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS-grid-layout-4-benannte-Linien-2.html&oldid=90982“