关于一道div+css 网站首页布局的课后作业_html/css_WEB-ITnose
<html><head > <style> .headbox{ width:25%; height:15%; margin:0.5%; border:solid 1px; float:left; } .headbox2{ width:46.5%; height:15%; margin:0.5%; border:solid 1px; float:left; } .daohang{ clear:both; //width:inherit; width:98.5%; height:5%; margin:0.5%;; border:solid 1px; } .bodybox{ width:73%; //height:73%; height:55%; margin:0.5%; border:solid 0px; float:left; } .neikuang1{ width:49%; height:49%; margin-right:1.5%; border:solid 1px; float:left; } .neikuang2{ width:49%; height:49%; margin:0%; border:solid 1px; float:left; } .neikuang3{ width:23%; height:49%; margin-right:1.5% 1.5% 0 0; border:solid 1px; float:left; } .neikuang4{ width:23%; height:49%; margin:1.5% 0 0 0; border:solid 1px; float:left; } .fukuang{ width:24.5%; height:55%; margin:0.5%; border:solid 0px; float:left; } .fu1{ width:99%; height:31%; margin:0px; border:solid 1px; float:top; } .fu2{ width:99%; height:31%; margin:3.5% 0 0 0; border:solid 1px; float:top; } .foot{ width:99%; height:10%; margin:0.5px; border:solid 1px; float:left; } </style></head> <body> <div class="headbox">框（一）</div> <div class="headbox2">框（二）</div> <div class="headbox">框（三）</div> <div class="daohang">框（导航）</div> <div class="bodybox"> <div class="neikuang1">栏目一</div> <div class="neikuang2">栏目二</div> <div class="neikuang3">栏目三</div> <div class="neukuang3">栏目四</div> <div class="neikuang3">栏目五</div> <div class="neikuang4">栏目六</div> </div> <div class="fukuang"> <div class="fu1">栏目七</div> <div class="fu2">栏目八</div> <div class="fu2">栏目九</div> </div> <div class="foot"></div> </body></html>这个地方老是布局不好，求指导。
回复讨论(解决方案)
图片为要求完成的样子。
你的position 呢。float呢。
你的position 呢。float呢。
float 有的啊，position没教吧。好像不需要的样子
过前端板块问吧，毕竟那边的人专业一些。
.neikuang1, .neikuang2 {
float:left;
}
.neikuang1 {
width:49%;
height:49%;
margin-right:1.5%;
border:solid 1px;
}
.neikuang2 {
width:23%;
height:49%;
margin-right:1.5% 1.5% 0 0;
border:solid 1px;
}
<div class="bodybox"> <div class="neikuang1">栏目一</div> <div class="neikuang1">栏目二</div> <div class="neikuang2">栏目三</div> <div class="neukuang2">栏目四</div> <div class="neikuang2">栏目五</div> <div class="neikuang2">栏目六</div></div>.neikuang1, .neikuang2 { float:left;}.neikuang1 { width:49%; height:49%; margin-right:1.5%; border:solid 1px;}.neikuang2 { width:23%; height:49%; margin-right:1.5% 1.5% 0 0; border:solid 1px;}相同的div 就用一个class 你这个css代码太冗余了
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)
Existe-t-il un site Web pour apprendre le langage C ?
Jan 30, 2024 pm 02:38 PM
Sites Web pour apprendre le langage C : 1. Site Web du langage C ; 2. Tutoriel pour les débutants ; 3. Forum du langage C ; 5. Script House 6. Tianji.com ; 51 Réseau d'auto-apprentissage ; 9. Likou ; 10. Programmation C. Introduction détaillée : 1. Site Web chinois en langue C, qui est un site Web dédié à la fourniture de matériel d'apprentissage du langage C pour les débutants. Il a un contenu riche, comprenant une grammaire de base, des pointeurs, des tableaux, des fonctions, des structures et d'autres modules. est un site Web complet d'apprentissage de la programmation et bien plus encore.
Comment configurer la page d'accueil de Google Chrome
Mar 02, 2024 pm 04:04 PM
Comment configurer la page d'accueil de Google Chrome ? Google Chrome est le logiciel de navigation Web le plus populaire aujourd'hui. Ce navigateur possède des fonctionnalités simples et efficaces que les utilisateurs apprécient. Lors de l'utilisation de navigateurs, différentes personnes ont des préférences de paramètres différentes. Certaines personnes aiment utiliser Google Chrome comme page d'accueil par défaut. et certaines personnes aiment définir la page d'accueil comme les autres moteurs de recherche, alors où doit-elle être définie ? Ensuite, l'éditeur vous proposera une méthode rapide pour configurer la page d'accueil de Google Chrome. J'espère que cela pourra vous être utile. Comment définir rapidement la page d'accueil de Google Chrome 1. Ouvrez Google Chrome (comme indiqué sur l'image). 2. Cliquez sur le bouton de menu dans le coin supérieur droit de l'interface (comme indiqué sur l'image). 3. Sélectionnez l'option "Paramètres" (comme indiqué sur l'image). 4. Dans le menu des paramètres, recherchez « Moteur de recherche » (tel que
Comment convertir votre site Web en une application Mac autonome
Oct 12, 2023 pm 11:17 PM
Dans macOS Sonoma et Safari 17, vous pouvez transformer des sites Web en « applications Web », qui peuvent être placées dans le dock de votre Mac et accessibles comme n'importe quelle autre application sans ouvrir de navigateur. Lisez la suite pour savoir comment cela fonctionne. Grâce à une nouvelle option du navigateur Safari d'Apple, il est désormais possible de transformer n'importe quel site Web sur Internet que vous visitez fréquemment en une « application Web » autonome qui se trouve dans le dock de votre Mac et est accessible à tout moment. L'application Web fonctionne avec Mission Control et Stage Manager comme n'importe quelle application et peut également être ouverte via Launchpad ou SpotlightSearch. Comment transformer n'importe quel site Web en
Guide pour résoudre le désalignement des pages Web WordPress
Mar 05, 2024 pm 01:12 PM
Guide pour résoudre les pages Web WordPress mal alignées Dans le développement de sites Web WordPress, nous rencontrons parfois des éléments de page Web mal alignés. Cela peut être dû à des tailles d'écran sur différents appareils, à la compatibilité du navigateur ou à des paramètres de style CSS inappropriés. Pour résoudre ce désalignement, nous devons analyser soigneusement le problème, trouver les causes possibles, puis le déboguer et le réparer étape par étape. Cet article partagera certains problèmes courants de désalignement des pages Web WordPress et les solutions correspondantes, et fournira des exemples de code spécifiques pour aider à développer
Comment créer une mise en page carrousel réactive en utilisant HTML et CSS
Oct 20, 2023 pm 04:24 PM
Comment créer une mise en page de carrousel réactif à l'aide de HTML et CSS Les carrousels sont un élément courant dans la conception Web moderne. Il peut attirer l'attention de l'utilisateur, afficher plusieurs contenus ou images et basculer automatiquement. Dans cet article, nous expliquerons comment créer une mise en page carrousel réactive en utilisant HTML et CSS. Tout d’abord, nous devons créer une structure HTML de base et ajouter les styles CSS requis. Ce qui suit est une structure HTML simple : <!DOCTYPEhtml&g
Compétences d'application flexibles de l'attribut de poste en H5
Dec 27, 2023 pm 01:05 PM
Comment utiliser de manière flexible l'attribut position dans H5. Dans le développement H5, le positionnement et la disposition des éléments sont souvent impliqués. A ce moment, la propriété CSS position entrera en jeu. L'attribut position peut contrôler le positionnement des éléments sur la page, y compris le positionnement relatif (relatif), le positionnement absolu (absolu), le positionnement fixe (fixe) et le positionnement collant (collant). Cet article présentera en détail comment utiliser de manière flexible l'attribut position dans le développement H5.
Windows 11 continue d'ajouter des dispositions de clavier : 4 solutions testées
Dec 14, 2023 pm 05:49 PM
Pour certains utilisateurs, Windows 11 continue d'ajouter de nouvelles dispositions de clavier même s'ils n'acceptent pas ou ne confirment pas les modifications. L'équipe du logiciel WindowsReport a reproduit ce problème et sait comment empêcher Windows 11 d'ajouter une nouvelle disposition de clavier à votre PC. Pourquoi Windows 11 ajoute-t-il sa propre disposition de clavier ? Cela se produit généralement lors de l’utilisation d’une combinaison de langue et de clavier non native. Par exemple, si vous utilisez une langue d'affichage américaine et une disposition de clavier française, Windows 11 peut également ajouter un clavier anglais. Que faire si Windows 11 ajoute une nouvelle disposition de clavier dont vous ne voulez pas. Comment empêcher Windows 11 d’ajouter une disposition de clavier ? 1. Supprimez les dispositions de clavier inutiles et cliquez sur "Ouvrir"
Présentation de la méthode de disposition des fenêtres dans Win7
Dec 26, 2023 pm 04:37 PM
Lorsque nous ouvrons plusieurs fenêtres en même temps, win7 a pour fonction d'organiser plusieurs fenêtres de différentes manières puis de les afficher en même temps, ce qui nous permet de visualiser plus clairement le contenu de chaque fenêtre. Alors, combien de dispositions de fenêtres y a-t-il dans Win7 ? À quoi ressemblent-elles ? Il existe plusieurs façons d'organiser les fenêtres de Windows 7 : trois, à savoir les fenêtres en cascade, les fenêtres d'affichage empilées et les fenêtres d'affichage côte à côte. Lorsque nous ouvrons plusieurs fenêtres, nous pouvons cliquer avec le bouton droit sur un espace vide de la barre des tâches. Vous pouvez voir trois dispositions de fenêtres. 1. Fenêtres empilées : 2. Fenêtres d’affichage empilées : 3. Fenêtres d’affichage côte à côte :
