Tutoriel CSS de base

Modèle de boîte CSS

CSS3Tutoriel de base

Manuel de référence CSS

Règles CSS @

大全 des exemples CSS Compteurs CSS (Compteurs)

Conception de page CSS (Conception de page)

Mise en page CSSFacile à concevoir. Nous pouvons utiliser la mise en page CSS pour concevoir notre page web, par exemple la page d'accueil, nous contacter, à propos de nous, etc.

Il existe trois méthodes pour concevoir la mise en page des pages web :

Div HTML+Mise en page CSS：现在已广泛使用。
Tableau HTML：Plus lent, moins apprécié.
Cadre HTML：Désormais obsolète.

La mise en page CSS peut inclure l'en-tête, le pied de page, la fenêtre latérale gauche, la fenêtre latérale droite et la partie texte principal. Voyons un exemple simple de mise en page CSS.

Exemple de mise en page CSS

Exemple

<!DOCTYPE html>　　
<html>　　
<head>　　
<style>　　
.header{margin:-8px　-8px 0px;background-image:linear-gradient(145deg,#7379ff,#b524ef);color:white;text-align:center;padding:10px;}　　
.container{width:100%}　　
.left{width:15%;float:left;}　　
.body{width:65%;float:left;background-color:pink;padding:5px;}　　
.right{width:15%;float:left;}　　
.footer{margin:-8px;clear:both;background-image:linear-gradient(145deg,#7379ff,#b524ef);color:white;text-align:center;padding:10px;}　　
</style>　　
</head>　　
<body>　　
<div class="header"><h2>Tutoriel de base oldtoolbag.com</h2></div>　　
　　
<div class="container">　　
<div class="left">　　
<p>Barre latérale gauche</p>　　
</div>　　
<div class="body">　　
<h1>Texte principal</h1>　　
<p>Le contenu de la page ici</p><p>Le contenu de la page ici</p><p>Le contenu de la page ici</p>　　
<p>Le contenu de la page ici</p><p>Le contenu de la page ici</p><p>Le contenu de la page ici</p>　　
<p>Le contenu de la page ici</p><p>Le contenu de la page ici</p><p>Le contenu de la page ici</p>　　
<p>Le contenu de la page ici</p><p>Le contenu de la page ici</p><p>Le contenu de la page ici</p>　　
<p>Le contenu de la page ici</p>　　
</div>　　
<div class="right">　　
<p>Barre latérale droite</p>　　
</div>　　
</div>　　
　　
<div class="footer">　　
<p>Footer</p>　　
</div>　
</body>　　
</html>

Voyons voir‹/›

Effet de sortie:

Tutoriel de base oldtoolbag.com

Barre latérale gauche

Texte principal

Le contenu de la page ici

Barre latérale droite

Bas de page

大全 des exemples CSS Compteurs CSS (Compteurs)