Beispiel:HTML a-Element7.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">
  <link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
  <style>
    p, ul { 
      margin-bottom: 500px;
    }
    ul {
      margin-left: 0;
      padding-left: 0;
    }
    li {
      list-style: none;
     }  
    a {
      padding-left: 1.5em;
      position: relative;
    }
    a::before {
      position: absolute;
      left: 0;
      bottom: 0;
    }
    a[href^="#"]::before {
      content:'➡ ';
    }
    a[href="#top"]::before {
      content: '⬆ ';	
      color: #e04c32;
    }  
  </style>
    <title>Sprungmarken zum Seitenanfang</title>
  </head>
  <body>
  <h1>Sprungmarken zum Seitenanfang</h1>
  
  <main>
    <h2>Eine erste Überschrift</h2>
    <p>
      <a href="#drittens">Dritttens</a> - ein Verweis zur dritten Überschrift innerhalb dieser Seite<br>
      Dort finden Sie die Links, die wieder zu den Sprungmarken zum Seitenanfang führen.
    </p>
    <h2 id="zweitens">Eine zweite Überschrift</h2>
    <p>etwas Raum</p>
    <h2 id="drittens">Eine dritte Überschrift</h2>
    <ul>
      <li><a href="">neu laden</a></li>
      <li><a href="#">nach oben</a></li>
      <li><a href="#top">auch nach oben</a></li>
      <li><a href="#gibts-nicht">Sprungmarke nicht vorhanden</a></li>
    </ul>  
  </main>
</body>
</html>