Comment créer une mise en page de site Web d'actualités réactive en utilisant HTML et CSS-tutoriel HTML-php.cn

Comment créer une mise en page de site Web d'actualités réactive en utilisant HTML et CSS

WBOY

Libérer： 2023-10-20 16:25:58

original

1444 Les gens l'ont consulté

Comment créer une mise en page de site Web dactualités réactive en utilisant HTML et CSS

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>版权所有 &copy; 2021 新闻网站</p>
    </footer>
</body>
</html>

Copier après la connexion

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;
}

Copier après la connexion

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;
    }
}

Copier après la connexion

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!