网页排版求帮助_html/css_WEB-ITnose
我想做一个简单的小网站。想自己去写这个网站的模板，但是用css对网页元素进行布局的时候，发]现很难去控制。
图片是这个主页的样子。
导航条的位置怎么去控制。
。
这是我做出来的，差距很大。
怎么可以让导航的宽度和父类的一样。第二怎么让每一个平均去分配这个宽度。
这是我的代码。
nbsp;html>
@charset "utf-8";
body {
}
#wrapper {
background-color: #20455A;
width: 100%;
min-width: 740px;
max-width: 1306px;
margin-left: auto;
margin-right: auto;
left: 5%;
right: 5%;
}
header {
background-color: #6CEBE5;
margin-right: auto;
margin-left: auto;
width: 100%;
float: left;
}
#footer ul {
background-color: #6CEBE5;
text-decoration: none;
list-style-type: none;
margin-right: auto;
margin-left: auto;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
width: 1306px;
}
#footer li {
width: 33%;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
text-align: center;
text-decoration: none;
float: left;
background-color: #6CEBE5;
}
#mainnav li {
width: 20%;
float: left;
}
a {
font-weight: bold;
text-decoration: none;
}
a:link {
color: #FF6600;
}
#mainnav a:hover, #mainnav a:active, #mainnav a:focus, #mainnav a.thispage {
text-decoration: none;
background-color: #43A6CB;
}
A:visited {
color: #FF944C;
}
a:hover, a:active, a:focus {
background-color: #7F3300;
text-decoration: underline;
}
#mainnav a {
display: block;
float: left;
text-align: center;
background-color: #4d4d4d;
color: #F1EBEB;
text-transform: uppercase;
padding-top: 6px;
padding-bottom: 6px;
margin-right: auto;
margin-left: auto;
}
#mainnav ul {
list-style-type: none;
margin-top: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-bottom: 0px;
margin-right: auto;
margin-left: 0px;
}
#mainnav {
width: 1306px;
margin-right: auto;
margin-left: auto;
float: left;
background-position: left 0%;
}
回复讨论(解决方案)
导航用table不就行了
table宽度设100% 自动就平分了
具体点！新手
<!doctype html> <html> <head> <meta charset="utf-8"> <title>communityAdvance</title> <link href="styles/main.css" rel="stylesheet" type="text/css"> <style type="text/css"> body {}#wrapper {background-color: #20455A;width: 100%;min-width: 740px;max-width: 1306px;margin-left: auto;margin-right: auto;left: 5%;right: 5%;}header {background-color: #6CEBE5;margin-right: auto;margin-left: auto;width: 100%;float: left;}#footer ul {background-color: #6CEBE5;text-decoration: none;list-style-type: none;margin-right: auto;margin-left: auto;padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;width: 1306px;}#footer li {width: 33%;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;margin-left: 0px;padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;text-align: center;text-decoration: none;float: left;background-color: #6CEBE5;}#mainnav li {width: 20%;float: left;}a {font-weight: bold;text-decoration: none;}a:link {color: #FF6600;}#mainnav a:hover, #mainnav a:active, #mainnav a:focus, #mainnav a.thispage {text-decoration: none;background-color: #43A6CB;}A:visited {color: #FF944C;}a:hover, a:active, a:focus {background-color: #7F3300;text-decoration: underline;}#mainnav a {display: block;float: left;text-align: center;background-color: #4d4d4d;color: #F1EBEB;text-transform: uppercase;padding-top: 6px;padding-bottom: 6px;margin-right: auto;margin-left: auto;}#mainnav ul {list-style-type: none;margin-top: 0px;margin-bottom: 0px;padding-top: 0px;padding-bottom: 0px;margin-right: auto;margin-left: 0px;}#mainnav {width: 1306px;margin-right: auto;margin-left: auto;float: left;background-position: left 0%;} </style> </head> <body> <div id="wrapper"> <div id ="head"> <header id="top"> <img src="/static/imghw/default1.png" data-src="LogoUse.png" class="lazy" style="max-width:90%" style="max-width:90%" alt=""/> <nav id="mainnav"> <!-- <ul> <li><a href="CommunityAdvance.html">home</a></li> <li><a href="Untitled-4.html">about us</a></li> <li><a href="#">programs</a></li> <li><a href="#">volunteer/job</a></li> <li><a href="#">special events</a></li> <li><a href="#">give/donate</a></li> </ul>--> <table style="width:100%;text-align:center;"> <tr> <td style="border-right:1px solid red;">home</td> <!--线出来了 后面效果自己慢慢调吧--> <td>about us</td> <td>>programs</td> <td>volunteer/job</td> <td>special events</td> <td>give/donate</td> </tr> </table> </nav> </header> </div> <div id="main">Content for id "main" Goes Here</div> <div id="footer"> <ul> <li><a href="www.google.com">Office hours</a></li> <li><a href="www.google.com">Location</a></li> <li><a href="www.google.com">Contact us</a></li> </ul> </div> </div> </body> </html> CSS能控制网页上的任何HTML元素，你却说很难控制。。。。。。
那是因为你的表格td宽度还是用的别人的宽度，而你的td却增加了一个，所以掉下去了
太感谢了各位。
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)
Comment envoyer des pages Web sur le bureau comme raccourci dans le navigateur Edge ?
Mar 14, 2024 pm 05:22 PM
Comment envoyer des pages Web sur le bureau sous forme de raccourci dans le navigateur Edge ? Beaucoup de nos utilisateurs souhaitent afficher les pages Web fréquemment utilisées sur le bureau sous forme de raccourcis pour faciliter l'ouverture directe des pages d'accès, mais ils ne savent pas comment procéder. En réponse à ce problème, l'éditeur de ce numéro partagera le. solution avec la majorité des utilisateurs, jetons un coup d’œil au contenu partagé dans le didacticiel du logiciel d’aujourd’hui. La méthode de raccourci pour envoyer des pages Web au bureau dans le navigateur Edge : 1. Ouvrez le logiciel et cliquez sur le bouton "..." sur la page. 2. Sélectionnez « Installer ce site en tant qu'application » dans « Application » dans l'option du menu déroulant. 3. Enfin, cliquez dessus dans la fenêtre pop-up
Développer un système de vote Web en utilisant JavaScript
Aug 09, 2023 pm 01:30 PM
Utiliser JavaScript pour développer un système de vote en ligne Résumé : Avec le développement rapide d'Internet, le vote en ligne est devenu un moyen pratique et rapide de recueillir l'opinion publique et de prendre des décisions. Cet article présentera l'utilisation de JavaScript pour développer un système de vote Web simple, qui permet aux utilisateurs de sélectionner des options et de soumettre des votes. Introduction : Un système de vote Web est un programme qui affiche plusieurs options sur une page Web et permet aux utilisateurs de choisir. Il peut être utilisé dans de nombreux scénarios, tels que le vote électoral, les enquêtes sur les produits, la collecte d'opinions, etc. Cet article
Que faire si la page Web n'est pas accessible
Sep 06, 2023 am 09:36 AM
Les solutions aux pages Web inaccessibles incluent la vérification de la connexion réseau, la suppression du cache du navigateur, la vérification de l'adresse de la page Web, la tentative d'utilisation d'autres navigateurs, la vérification de l'état du serveur, la vérification de la résolution du nom de domaine, la vérification du pare-feu et des paramètres de sécurité et le contact avec l'administrateur du site Web. . Introduction détaillée : 1. Vérifiez la connexion réseau pour vous assurer que la connexion réseau est normale. Vous pouvez essayer d'ouvrir d'autres pages Web ou d'utiliser d'autres appareils pour y accéder afin de déterminer s'il s'agit d'un problème de connexion réseau si d'autres pages Web sont accessibles normalement. , il peut s'agir d'un problème avec la page Web ; 2. Videz le cache du navigateur. Le cache du navigateur peut empêcher le chargement de la page Web, etc.
Comment configurer l'actualisation automatique d'une page Web
Oct 26, 2023 am 10:52 AM
Pour paramétrer le rafraîchissement automatique d'une page web, vous pouvez utiliser la balise HTML "meta", la fonction JavaScript "setTimeout", la fonction "setInterval" ou encore l'en-tête HTTP "Refresh". Introduction détaillée : 1. Utilisez la balise "meta" du HTML Dans la balise "<head>" du document HTML, vous pouvez utiliser la balise "meta" pour définir l'actualisation automatique de la page Web. 2. Le "setTimeout" ; " fonction de JavaScript, etc.
Que dois-je faire si les images de la page Web ne peuvent pas être chargées ? 6 solutions
Mar 15, 2024 am 10:30 AM
Certains internautes ont constaté que lorsqu'ils ouvraient la page Web du navigateur, les images de la page Web ne pouvaient pas être chargées pendant une longue période. Que s'est-il passé ? J'ai vérifié que le réseau est normal, alors quel est le problème ? L'éditeur ci-dessous vous présentera six solutions au problème de l'impossibilité de charger les images de pages Web. Les images de la page Web ne peuvent pas être chargées : 1. Problème de vitesse Internet La page Web ne peut pas afficher les images. Cela peut être dû au fait que la vitesse Internet de l'ordinateur est relativement lente et qu'il y a davantage de logiciels ouverts sur l'ordinateur et que les images auxquelles nous accédons sont relativement volumineuses. peut être dû à un délai de chargement. Par conséquent, l'image ne peut pas être affichée. Vous pouvez désactiver le logiciel qui utilise la vitesse du réseau et le vérifier dans le gestionnaire de tâches. 2. Trop de visiteurs Si la page Web ne peut pas afficher d'images, c'est peut-être parce que les pages Web que nous avons visitées ont été visitées en même temps.
Raisons possibles pour lesquelles la connexion réseau est normale mais le navigateur ne peut pas accéder à la page Web
Feb 19, 2024 pm 03:45 PM
Le navigateur ne peut pas ouvrir la page Web mais le réseau fonctionne normalement. Il existe de nombreuses raisons possibles. Lorsque ce problème survient, nous devons enquêter étape par étape pour déterminer la cause spécifique et résoudre le problème. Tout d’abord, déterminez si la page Web ne peut pas être ouverte est limitée à un navigateur spécifique ou si tous les navigateurs ne peuvent pas ouvrir la page Web. Si un seul navigateur ne parvient pas à ouvrir la page Web, vous pouvez essayer d'utiliser d'autres navigateurs, tels que Google Chrome, Firefox, etc., à des fins de test. Si d'autres navigateurs parviennent à ouvrir la page correctement, le problème vient probablement de ce navigateur spécifique, peut-être
Quelles sont les compétences opérationnelles pour la composition Excel ?
Mar 20, 2024 pm 05:01 PM
Afin d'obtenir l'effet visuel de l'ensemble du document, les fichiers Word et Excel doivent être saisis. Cependant, de nombreux amis novices ne savent pas comment effectuer la composition Excel. Ci-dessous, nous partagerons quelques compétences en matière de composition, dans l'espoir de vous donner. un peu d'inspiration sur les compétences opérationnelles ! 1. Tout d’abord, nous créons et ouvrons un formulaire Excel et saisissons du contenu simple pour faciliter les opérations de démonstration. 2. On retrouve le menu de la fonction aperçu avant impression dans la barre de menu au-dessus du fichier. 3. Cliquez sur la fonction d'aperçu avant impression, et nous constatons que le tableau est asymétrique lorsqu'il n'est pas composé. Nous devons trouver la fonction de mise en page dans la barre de menu au-dessus du document. 4. Cliquez sur Paramètres de la page et recherchez la fonction de marge dans le menu des fonctions qui s'ouvre. 5. Cliquez sur
Que faire si la page Web ne peut pas être ouverte
Feb 21, 2024 am 10:24 AM
Comment résoudre le problème des pages Web qui ne s'ouvrent pas Avec le développement rapide d'Internet, les gens comptent de plus en plus sur Internet pour obtenir des informations, communiquer et se divertir. Cependant, nous rencontrons parfois le problème que la page Web ne peut pas être ouverte, ce qui nous pose beaucoup de problèmes. Cet article vous présentera quelques méthodes courantes pour vous aider à résoudre le problème des pages Web qui ne s'ouvrent pas. Tout d’abord, nous devons déterminer pourquoi la page Web ne peut pas être ouverte. Les raisons possibles incluent des problèmes de réseau, des problèmes de serveur, des problèmes de paramètres du navigateur, etc. Voici quelques solutions : Vérifiez la connexion réseau : Tout d'abord, nous avons besoin
