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