简单的CSS网页布局一二列布局_html/css_WEB-ITnose
1.一列布局
(一)一列自适应
自适应浏览器，随着浏览器的拉伸而变化，一般宽度采用百分比的写法，很简
<html><head lang="en"> <meta charset="UTF-8"> <title>一列布局自适应</title> <style type="text/css"> body{ margin: 0; /*清除浏览器默认样式*/ padding: 0; } div{ text-align: center; /*字体居中*/ font-size: 30px; font-weight: bold; } .head,.middle,.foot{ width: 50%; /*百分比宽度*/ margin: 0 auto; /* 典型的设置居中*/ } .head{ height: 200px; background: #F0B6CF; } .middle{ height: 500px; background: tan; } .foot{ height: 200px; background-color: #57A9D1; } </style></head><body> <div class="head">head</div> <div class="middle">middle</div> <div class="foot">foot</div></body></html>(二)一列固定
顾名思义，固定布局的宽度，设置固定的PX值。
只需要在上面一列自适应的HTML代码中，把width:50% 修改成 width:960px即可，当然，各部分如果要求设置的宽度不同，在每个部分的类选择器上进行适当修改即可。
2.二列布局
(一)二列自适应
二列的自适应，这时候要用到float属性。
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>二列自适应</title> <style type="text/css"> body{ margin: 0; /*清除浏览器默认样式*/ padding: 0; } div{ text-align: center; /*字体居中*/ font-size: 30px; font-weight: bold; } .left{ width: 30%; background-color: #CCFF00; height: 500px; float: left; /*先左浮动，使之靠浏览器左侧*/ } .right{ width: 70%; height: 500px; background-color: bisque; float: right; /*先右浮动，使之靠浏览器右侧*/ } </style></head><body> <div class="left">left</div> <div class="right">right</div></body></html>注意：以上百分比30%和70%加起来刚好是100%，宽度会充满整个浏览器页面，如果加起来没有100%，则他们中间会空出一栏的空间出来。
(二)二列居中自适应
在左右部分包裹成一个div,在该div类选择器中选择 margrin:0,auto;设置宽度为：80%；则子代标签的宽度会基于80%的浏览器宽度来定。
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>二列居中自适应</title> 6 <style type="text/css"> 7 body{ 8 margin: 0; /*清除浏览器默认样式*/ 9 padding: 0;10 }11 div{12 text-align: center; /*字体居中*/13 font-size: 30px;14 font-weight: bold;15 }16 .main{17 width:80%;18 height: 500px;19 margin: 0 auto; /*居中*/20 }21 .left{22 width: 30%;23 background-color: #CCFF00;24 height: 500px;25 float: left; /*先左浮动，使之靠浏览器左侧*/26 }27 .right{28 width: 70%;29 height: 500px;30 background-color: bisque;31 float: right; /*先右浮动，使之靠浏览器右侧*/32 }33 </style>34 </head>35 <body>36 <div class="main">37 <div class="left">left</div>38 <div class="right">right</div>39 </div>40 </body>41 </html>(三)二列居中固定
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>二列居中固定宽度</title> 6 <style type="text/css"> 7 body{ 8 margin: 0; /*清除浏览器默认样式*/ 9 padding: 0;10 }11 div{12 text-align: center; /*字体居中*/13 font-size: 30px;14 font-weight: bold;15 }16 .main{17 width:960px;18 height: 500px;19 margin: 0 auto;20 }21 .left{22 width: 360px;23 background-color: #CCFF00;24 height: 500px;25 float: left; /*先左浮动，使之靠浏览器左侧*/26 }27 .right{28 width: 600px;29 height: 500px;30 background-color: bisque;31 float: right; /*先右浮动，使之靠浏览器右侧*/32 }33 </style>34 </head>35 <body>36 <div class="main">37 <div class="left">left</div>38 <div class="right">right</div>39 </div>40 </body>41 </html>
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Quel est le but du & lt; Progress & gt; élément?
Mar 21, 2025 pm 12:34 PM
L'article traite du HTML & lt; Progress & GT; élément, son but, son style et ses différences par rapport au & lt; mètre & gt; élément. L'objectif principal est de l'utiliser & lt; Progress & gt; pour l'achèvement des tâches et & lt; mètre & gt; pour stati
Quel est le but du & lt; datalist & gt; élément?
Mar 21, 2025 pm 12:33 PM
L'article traite du HTML & lt; Datalist & GT; élément, qui améliore les formulaires en fournissant des suggestions de saisie semi-automatique, en améliorant l'expérience utilisateur et en réduisant les erreurs. COMMANDE COMPRES: 159
Quel est le but du & lt; mètre & gt; élément?
Mar 21, 2025 pm 12:35 PM
L'article traite du HTML & lt; mètre & gt; élément, utilisé pour afficher des valeurs scalaires ou fractionnaires dans une plage, et ses applications courantes dans le développement Web. Il différencie & lt; mètre & gt; De & lt; Progress & gt; et ex
Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5?
Mar 17, 2025 pm 12:20 PM
L'article examine les meilleures pratiques pour assurer la compatibilité des navigateurs de HTML5, en se concentrant sur la détection des fonctionnalités, l'amélioration progressive et les méthodes de test.
Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur?
Mar 17, 2025 pm 12:27 PM
L'article discute de l'utilisation des attributs de validation de formulaire HTML5 comme les limites requises, motifs, min, max et longueurs pour valider la saisie de l'utilisateur directement dans le navigateur.
Quelle est la balise Meta de la fenêtre? Pourquoi est-ce important pour une conception réactive?
Mar 20, 2025 pm 05:56 PM
L'article traite de la balise Meta de la fenêtre, essentielle pour la conception Web réactive sur les appareils mobiles. Il explique comment une utilisation appropriée garantit une mise à l'échelle optimale du contenu et une interaction utilisateur, tandis que la mauvaise utilisation peut entraîner des problèmes de conception et d'accessibilité.
Comment utiliser le html5 & lt; time & gt; élément pour représenter les dates et les temps sémantiquement?
Mar 12, 2025 pm 04:05 PM
Cet article explique le html5 & lt; time & gt; élément de représentation sémantique de date / heure. Il souligne l'importance de l'attribut DateTime pour la lisibilité à la machine (format ISO 8601) à côté du texte lisible par l'homme, stimulant AccessIbilit
Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez?
Mar 20, 2025 pm 06:05 PM
L'article traite du & lt; iframe & gt; L'objectif de Tag dans l'intégration du contenu externe dans les pages Web, ses utilisations courantes, ses risques de sécurité et ses alternatives telles que les balises d'objet et les API.
