communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel HTML > HTML、CSS中的网页页面布局问题_html/css_WEB-ITnose

HTML、CSS中的网页页面布局问题_html/css_WEB-ITnose

WBOY
Libérer： 2016-06-24 11:50:00
original
1061 Les gens l'ont consulté

要写一个HTML页面，其中有6个

，用CSS实现其中
元素布局，格式如下所示：



那么在CSS中应该怎么写了？？求高手指教


回复讨论(解决方案)

<div class="d1"></div><div class="dc"><div class="d2"></div><div class="d3"></div></div><div class="dc"><div class="d4"></div><div class="d5"></div></div><div class="d6"></div><style>  *{margin:0px;padding:0px;}  div{border:5px solid #000;margin-top:10px;}  .dc{border:none;}  .d1,.d6{width:500px;height:80px;}  .dc div{float:left;width:200px;height:100px;}  .d3,.d5{margin-left:90px;}  .dc:after{display: block;content: '';clear: both;visibility: hidden; }</style>
Copier après la connexion

经过测试，在IE7下，楼上的代码显示如图

修改如下： 

<html><head>	<style>	  *{margin:0px;padding:0px;}	  div{border:5px solid #000;margin-top:10px;}	  .dc{border:none;width:600px;}	  .d1,.d6{width:500px;height:50px;}	  .dc div{float:left;width:200px;height:100px;}	  .d3{margin-left:90px;}	  .dc .d4,.dc .d5{width:220px;}	  .d5{margin-left:50px;}	  .dc:after{display: block;content: '';clear: both;visibility: hidden; }	</style></head><body><div class="d1">div_01</div><div class="dc">	<div class="d2">div_02</div>	<div class="d3">div_03</div></div><div class="dc">	<div class="d4">div_04</div>	<div class="d5">div_05</div></div><div class="d6">div_06</div></body></html>
Copier après la connexion

这个很简单吧

Étiquettes associées：
HTML、CSS中的网页页面布局问题
source：php.cn
Article précédent：一段代码弄清楚CSS属性display和visibility的差别_html/css_WEB-ITnose Article suivant：如何根据不同的屏幕分辨率来显示不同的图片？_html/css_WEB-ITnose
Déclaration de ce site Web
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
Derniers articles par auteur
Derniers numéros
La page ne peut soudainement plus extraire le CSS ou le bootstrap Je suis donc en train de développer une page, j'en ai fait une partie hier et ça a très bi...
Depuis 2024-04-06 21:58:04
0
1
800
Paramètres de configuration OAuth 2.0 J'utilise phpmailer pour envoyer du courrier via le serveur smtp.google.com mais maintenan...
Depuis 2024-04-06 11:12:57
0
1
408
L'actualisation forcée est une conséquence de l'accès à des chemins non définis ou à des pages d'erreur dans Next.js L'accès à un chemin non défini ou à une page d'erreur entraîne une actualisation matériell...
Depuis 2024-04-05 08:32:46
0
1
400
Les symboles d'élément de liste (<ul> et <ol>) dans le nœud racine ne peuvent pas être affichés et supprimés en CSS, et le problème overflow-x: caché ne peut pas être supprimé. Je travaille actuellement sur une page Web et j'ai des problèmes avec les éléments de ma l...
Depuis 2024-04-04 16:38:22
0
1
3617
3. Le modèle JS 3D a été ajouté mais n'est pas visible J'essaie d'ajouter un modèle 3D à mon site Web. J'utilise trois .js. J'ai tout essayé mais...
Depuis 2024-04-03 19:06:13
0
1
264
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal