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.

<!-- 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;
}