Maison >interface Web >tutoriel HTML >Comment créer une mise en page de site Web d'actualités réactive en utilisant HTML et CSS
Comment créer une mise en page de site Web d'actualités réactive en utilisant HTML et CSS
- WBOYoriginal
- 2023-10-20 16:25:581422parcourir
Comment créer une mise en page de site Web d'actualités réactive à l'aide de HTML et CSS
À l'ère d'Internet moderne, la mise en page réactive de sites Web est devenue une préoccupation clé pour les concepteurs et les développeurs. Cette mise en page permet au site Web de s'afficher de manière optimale sur différents appareils et tailles d'écran. Cet article explique comment utiliser HTML et CSS pour créer une mise en page de site Web d'actualités réactive et fournit des exemples de code spécifiques.
1. Structure HTML
Avant de commencer à créer la mise en page, vous devez d'abord considérer la structure globale et le contenu du site Web. Les sites Web d’actualités incluent généralement une barre de navigation supérieure, un en-tête, une zone de contenu et un pied de page. Ici, nous utilisons la structure HTML suivante :
<!DOCTYPE html>
<html>
<head>
<title>响应式新闻网站</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">娱乐</a></li>
<li><a href="#">体育</a></li>
<li><a href="#">科技</a></li>
</ul>
</nav>
</header>
<section id="content">
<article>
<h2>新闻标题</h2>
<p>新闻内容</p>
</article>
<article>
<h2>新闻标题</h2>
<p>新闻内容</p>
</article>
</section>
<footer>
<p>版权所有 © 2021 新闻网站</p>
</footer>
</body>
</html>2. Style CSS
Ensuite, nous utilisons CSS pour contrôler le style du site Web afin qu'il présente une mise en page réactive. Nous utilisons des requêtes multimédias pour ajuster automatiquement les styles en fonction de la taille de l'écran.
/* 全局样式 */
body {
font-family: Arial, sans-serif;
}
/* 顶部导航栏样式 */
header {
background-color: #333;
color: #fff;
padding: 10px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav li {
display: inline;
margin-right: 10px;
}
nav a {
color: #fff;
text-decoration: none;
}
/* 内容区域样式 */
#content {
margin: 20px;
}
/* 文章样式 */
article {
margin-bottom: 20px;
}
article h2 {
margin-top: 0;
}
/* 页脚样式 */
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}3. Mise en page réactive
Maintenant que nous avons créé la structure et le style du site Web, nous allons mettre en œuvre une mise en page réactive via des requêtes multimédias. Nous ferons apparaître la barre de navigation verticalement et masquerons l'en-tête lorsque la largeur de l'écran est inférieure à 768 pixels.
/* 响应式布局 - 小屏幕 */
@media only screen and (max-width: 768px) {
header nav {
display: block;
}
header nav ul {
text-align: center;
}
header nav li {
display: block;
margin: 10px 0;
}
#content {
margin: 10px;
}
}Le code ci-dessus permettra au site Web de présenter une barre de navigation verticale et une mise en page compacte sur les appareils à petit écran.
Résumé
Grâce à l'introduction de cet article, nous avons appris à utiliser HTML et CSS pour créer une mise en page simple et réactive pour un site Web d'actualités. En utilisant les requêtes multimédias, nous pouvons ajuster automatiquement le style du site Web en fonction de différents appareils et lui donner une meilleure apparence sur différentes tailles d'écran. Ceci n'est qu'un exemple simple, vous pouvez personnaliser et étendre cette mise en page en fonction de vos besoins et de votre style.
J'espère que cet article vous sera utile et je vous souhaite du succès dans la conception de sites Web réactifs !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!