Maison > Article > interface Web > Article du débutant : Comment utiliser ccs pour créer une mise en page simple (avec code)

Article du débutant : Comment utiliser ccs pour créer une mise en page simple (avec code)

奋力向前original: 2021-09-03 17:29:132538parcourir

Dans l'article précédent "Vous apprendre étape par étape comment utiliser CSS3 pour créer des effets de barre de navigation sympas (explication détaillée du code)", je vous ai présenté comment utiliser CSS3 pour créer des effets de barre de navigation sympas. L'article suivant vous présentera comment utiliser HTML pour créer une mise en page simple. Voyons comment le faire ensemble.

Avec le développement d'Internet dans la vie, les pages Web ont souvent une telle mise en page. Laissez-moi partager avec vous les rendus. Après avoir examiné l'effet, étudions comment y parvenir et expliquons la mise en page div+css. à tout le monde.

1. Créez un exemple de code d'édition HTML

Html

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

</body>
</html>

2. Définissez un titre div contenant du texte et utilisez l'attribut class pour le styliser. div大标题同时使用class属性向样式。

<div class="title">顶部</div>
<div class="footer">底部</div>

3、在style之间，对body进行样式初始化，添加设置外边距margin为0，内边距padding为0，然后使用设置文字居中text-align。

<style type="text/css">
 body{text-align: center;margin: 0;padding: 0}
</style>

4、在style之间，对div进行样式添加设置所有的div高度为200px，内容的颜色为红色。

div{height: 200px;color: red;}

5、在style之间，对title进行样式使用div创建网页的头部，使用margin:0 auto设置div居中，同时设置其宽度为800px，背景颜色为灰色。

 .title{margin: 0 auto; width: 800px; background-color: #ccc}

6、在style之间，使用div创建网页的底部，使用clear:both清除上面div的浮动，避免影响底部的布局。接着使用margin:0 auto设置div居中，又使用设置其宽度为800px，最后背景颜色为#000fff

.footer{clear: both;margin: 0 auto;width: 800px;clear: both;background-color:#000fff}

3. Entre style, initialisez le style de body, ajoutez et définissez la marge extérieure margin à 0, et la marge intérieure padding est 0, puis utilisez text-align pour centrer le texte.

<!DOCTYPE html>
<html>
<head>
	<title>布局</title>
</head>
<body>
<style type="text/css">
 body{text-align: center;margin: 0;padding: 0}
 div{height: 200px;color: red;}
 .title{margin: 0 auto; width: 800px; background-color: #ccc}
 
 .footer{clear: both;margin: 0 auto;width: 800px;clear: both;background-color:#000fff}
</style>
<div class="title">顶部</div>

<div class="footer">底部</div>
</body>
</html>

4. Entre style, ajoutez des styles à div, définissez la hauteur de tous les div sur 200px et la couleur du contenu sur rouge.

rrreee Article du débutant : Comment utiliser ccs pour créer une mise en page simple (avec code) 5. Entre style, style title Utilisez div pour créer l'en-tête de la page Web et utilisez margin:0 auto pour. set div est centré, sa largeur est définie sur 800 px et sa couleur d'arrière-plan est grise.

rrreee

6. Entre style, utilisez div pour créer le bas de la page Web et utilisez clear:both pour effacer ce qui précède divcode> flotte pour éviter d'affecter la mise en page en bas. Utilisez ensuite margin:0 auto pour définir le div pour qu'il soit centré, puis utilisez pour définir sa largeur sur 800px, et enfin la couleur d'arrière-plan est #000fff.

rrreee

7. Ouvrez le fichier dans le navigateur pour voir l'effet.

🎜🎜Code complet🎜rrreee🎜Apprentissage recommandé : 🎜Tutoriel vidéo CSS🎜🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

css css3 html auto class 外边距内边距 margin padding

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Vous apprendre étape par étape à utiliser CSS pour créer du texte afin de réaliser une animation image par image (avec code)Article suivant：Vous apprendre étape par étape à utiliser CSS pour créer du texte afin de réaliser une animation image par image (avec code)

Articles Liés

Voir plus