Sommaire
Mise en page:responsive

Un exemple de mise en page responsive

1. Le site initial

Voici le site que nous allons réaliser. Dans un premier temps, il ne sera pas en RWD.

Voici le code de la page HTML :

<!DOCTYPE HTML> 
<html lang="fr"> 
<head> 
<title>Ma page d’accueil</title> 
<meta charset="UTF-8" /> 
<link rel="stylesheet" href="styles.css" /> 
</head> 
<body> 
<div id="conteneur"> 
   <header id="haut"> 
       <h1>Mon site web</h1> 
       <h2>Le slogan de mon site Web</h2> 
   </header> 
   <nav id="navigation"> 
       <p><a href="#">Lien 1</a> | <a href="#">Lien 2</a> | 
<a href="#">Lien 3</a> | <a href="#">Lien 4</a> |  
<a href="#">Lien 5</a> | <a href="#">Lien 6</a></p> 
   </nav> 
   <section id="contenu"> 
       <article> 
           <h1>Mon premier article</h1> 
           <p>Donec ullamcorper...</p>  
           <p>Nullam quis risus...</p> 
    ...