1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
| <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>pseudo-classe target</title>
<style>
body {
margin: 4em auto 0 auto;
max-width: 60em;
min-height: 100em;
}
nav {
position: fixed;
top: 0;
right: 0;
left: 0;
padding: 1em;
border: 2px solid #444;
background: rgba(200, 200, 200, 0.9);
}
h2:target {
padding-top: 2.5em;
color: #069;
background: #CDE;
}
</style>
</head>
<body>
<nav>
<a href="#titre1">Titre 1</a>
<a href="#titre2">Titre 2</a>
<a href="#titre3">Titre 3</a>
<a href="#titre4">Titre 4</a>
</nav>
<div>
<h2 id="titre1">Titre 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id posuere ligula. Suspendisse ut ipsum ac enim vehicula lacinia ultricies scelerisque arcu. Curabitur ac ante vel odio tempor ornare. Nullam ut metus luctus, aliquet mi et, tristique quam. Suspendisse a ornare velit. Vivamus id quam dignissim, commodo felis vitae, ultrices purus. In posuere luctus dui id aliquam.</p>
<h2 id="titre2">Titre 2</h2>
<p>Morbi sodales interdum magna luctus maximus. Nunc tempus, risus at elementum finibus, dolor justo tincidunt augue, et semper quam purus nec nulla. Nulla metus elit, varius sed venenatis sed, pretium a lorem. Nulla facilisi. Etiam egestas neque at elit egestas congue. Morbi id eros lectus. Maecenas laoreet ultricies pulvinar. Donec elementum non sapien nec fermentum. Ut malesuada risus ac orci eleifend, eget blandit ante scelerisque. Phasellus laoreet ex non luctus ornare.</p>
<h2 id="titre3">Titre 3</h2>
<p>Integer eu leo faucibus, elementum odio ut, pharetra est. Praesent nec eros sed est tempor fermentum. Aenean quis nunc eu magna vulputate sagittis vitae id felis. Curabitur gravida commodo pellentesque. Ut vestibulum sollicitudin enim, at maximus lacus fermentum quis. Duis molestie ante in justo tempor, in malesuada odio placerat. Suspendisse nisl quam, porta vel lectus a, placerat cursus augue. Donec dignissim sodales bibendum. Nunc fermentum justo at nunc facilisis, ac convallis leo ultrices. Duis fermentum augue orci, in accumsan diam aliquet eu.</p>
<h2 id="titre4">Titre 4</h2>
<p>Sed eget dictum magna, ut ornare velit. Phasellus interdum dui magna, porttitor dictum nunc accumsan ac. Proin vel facilisis mauris. Nulla arcu ante, convallis id dolor at, congue mattis nulla. Donec nec tristique urna. Sed varius felis ut nibh molestie, ac consequat ex auctor. Nulla varius mattis magna. Nulla eros mauris, venenatis pharetra nibh sed, maximus scelerisque orci. Ut vitae pharetra ligula.</p>
</div>
</body>
</html> |
Menu collé en haut et affichage des ancres
Répondre avec citation
Partager