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}
style
, initialisez le style de body
, ajoutez et définissez la marge extérieure margin
à 0, et la marge intérieure < code >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>
style
, ajoutez des styles à div
, définissez la hauteur de tous les div
sur 200px et la couleur du contenu sur rouge. rrreee 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.
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
.
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!