andy
/
webdev
0
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

navigation

master
Andy 2020-02-25 20:29:27 +01:00
parent 2fea793568
commit 9c71230f7f
2 changed files with 97 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
css/style.css
View File

@ -7,7 +7,7 @@ body {
margin: 0 auto;
}
header, footer{
height: 160px;
height: 200px;
background: #ddd
}
header{
@ -18,9 +18,24 @@ footer{
}
header img{
padding-top: 62px;
float: left;
}
nav li{
display: inline;
line-height: 160px;
margin-left: 20px;
}
nav a:link, nav a:visited{
color: #fff;
text-decoration: underline;
}
nav a:hover{
color: #e01a4b;
text-decoration: none;
}
footer p{
line-height: 160px;
line-height: 200px;
}
h1, h2{
font-weight: 100;

80
html/navigation.html 100644
View File

@ -0,0 +1,80 @@
<!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">
</head>
<body>
<header>
<div class="wrapper">
<img src="../img/logo_w.svg" alt="Mein logo" title="Der Titel meines Bildes">
<nav role="navigation">
<ul>
<li><a href="../index.html">Home</a></li>
<li><a href="semantik.html">Semantik</a></li>
<li><a href="formulare.html">Formulare</a></li>
</ul>
</nav>
</div>
</header>
<main role="main" class="wrapper">
<h1>HTML5 Navigation einer Webseite</h1>
<article>
<h2>Die Navigation als ungeordnete Liste</h2>
<p>Die Navigation ist mit Vorteil als ungeordnete Liste zu konzipieren. Also ul > li a, somit ist eine vernünftige Struktur auch ohne CSS gewährleitet.
</p>
</article>
<article>
<h2>Das Grundgerüst</h2>
<pre class="line-numbers language-html">
<code class="language-html">&lt;nav role=&quot;navigation&quot;&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;../index.html&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;semantik.html&quot;&gt;Semantik&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;formulare.html&quot;&gt;Formulare&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/nav&gt;
</code>
</pre>
</article>
<h2>Einfaches CSS der Navigation</h2>
<p>Das Beispiel hier in der Navigation dieses Beispiels.</p>
<p>Navigationen mit Unternavigations-Punkte finden Sie als weiteres Beispiel auf meinem <a href="https://git.perin.work/andy/CSS_NAV"> Git Server</a></p>
<article>
<pre class="line-numbers language-css">
<code class="language-css">nav li{
display: inline;
line-height: 160px;
margin-left: 20px;
}
nav a:link, nav a:visited{
color: #fff;
text-decoration: underline;
}
nav a:hover{
color: #e01a4b;
text-decoration: none;
}
</code>
</pre>
</article>
</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>