Les pages Web que nous ouvrons dans notre vie quotidienne sont toujours ordonnées et confortables à consulter, mais savez-vous comment elles font ? Ils sont présentés à l'aide de nos éléments HTML + quelques styles CSS, apprenons donc comment mettre en page la page aujourd'hui.
Mise en page du site Web
La plupart des sites Web organisent le contenu dans plusieurs colonnes (tout comme un magazine ou un journal).
La plupart des sites Web peuvent utiliser les éléments
ou
CSS est utilisé pour positionner des éléments ou créer des arrière-plans et des looks colorés pour les pages.
Bien que nous puissions utiliser la balise table HTML pour concevoir une belle mise en page, il n'estpas recommandéd'utiliser la balise table comme outil de mise en page - les tableaux ne sont pas des outils de mise en page.
Conseils : La mise en page des pages Web est très importante pour améliorer l'apparence du site Web,Veuillez concevoir la mise en page de vos pages Web avec soin.
Mise en page HTML - utilisant l'élément
< L'élément >div est un élément de niveau bloc utilisé pour regrouper des éléments HTML.
Exemple
L'exemple suivant utilise cinq éléments div pour créer une mise en page multi-colonnes avec un style CSS simple :
php中文网(php.cn)
主要的网站标题
菜单 HTML CSS JavaScript
这里是内容
Le code HTML ci-dessus will Produit le résultat suivant :
Mise en page HTML à l'aide d'un tableau
Commentaires: L'élément
n'est pas conçu comme un outil de mise en page. L'élément
est utilisé pour afficher des données tabulaires.
L'utilisation de l'élément
peut obtenir des effets de mise en page car l'élément table peut être stylisé via CSS :
Astuce : Le plus grand avantage de l'utilisation de CSS est que si le code CSS est stocké dans une feuille de style externe, le site sera plus facile à maintenir. En modifiant un seul fichier, vous pouvez modifier la mise en page de toutes les pages. Pour en savoir plus sur CSS,visitez nos tutoriels CSS.
Conseil : étant donné que la création de mises en page avancées prend du temps, l'utilisation de modèles est une option rapide. Il existe de nombreux modèles de sites Web gratuits disponibles via les moteurs de recherche (vous pouvez utiliser ces mises en page de sites Web prédéfinies et les optimiser).
Par exemple,utiliser Bootstrap
Bootstrapconsiste à utiliser un framework CSS prêt à l'emploi.
Bootstrap est le framework HTML, CSS et JS le plus populaire pour développer un Web réactif.
Bootstrap vous aide à développer des sites qui ont fière allure quelle que soit la taille : écran, ordinateur portable, tablette ou téléphone mobile :
Pour en savoir plus sur Bootstrap, lisez notre tutoriel Bootstrap.
Le didacticiel n'est pas disponible au téléchargement pour le moment. Le staff est actuellement en train de l'organiser. Veuillez prêter plus d'attention à ce cours à l'avenir ~
Les étudiants qui ont regardé ce cours apprennent également
![Combat réel Front-end Vue3 [projet vue manuscrit]](https://img.php.cn/upload/course/000/000/068/639b12e98e0b5441.png)
![Tutoriel APIPOST [Vulgarisation des concepts techniques liés à la communication réseau]](https://img.php.cn/upload/course/000/000/068/63996f34c6c94370.png)
