Listen

Listen können auch zur Navigation und zur Darstellung weiterer Information verwendet werden. Die folgende Liste beinhaltet drei Elemente, je mit Bild, Titel und Beschreibung. Zudem sind die Elemente anklickbar.

Listenbeispiel mit Bilder
<!-- html-code -->
<div>
  <ul>
    <li><a href="">
      <img src="https://picsum.photos/100/?image=1035">
      <h3>The Waterfall</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet.</p>
    </a></li>

    <li><a href="">
      <img src="https://picsum.photos/100/100/?image=1016">
      <h3>The Mountains</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet.</p>
    </a></li>

    <li><a href="">
      <img src="https://picsum.photos/100/100/?image=1015">
      <h3>The Sea</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet.</p>
    </a></li>
  </ul>
</div>
/* css-code */
div {
  margin: 20px;
}

ul {
  list-style-type: none;
  width: 500px;
}

li a {
  text-decoration: none;
  color: black;
}

li img {
  float: left;
  margin: 3px 15px 0 0;
  width: 100px;
}

li:first-child {
  border-top: 1px solid lightgrey;
}

li {
  padding: 10px;
  overflow: auto;
  border-bottom: 1px solid lightgrey;
}

li:hover {
  background: #eee;
  cursor: pointer;
}