Maison > Article > interface Web > Comment créer une mise en page d'attraction touristique réactive en utilisant HTML et CSS
Comment créer une mise en page d'attraction touristique réactive en utilisant HTML et CSS
- WBOYoriginal
- 2023-10-27 11:46:581508parcourir
Comment créer une mise en page d'attraction touristique réactive à l'aide de HTML et CSS
À l'ère actuelle des appareils mobiles répandus, une mise en page Web réactive est cruciale. Surtout dans l’industrie du voyage, une mise en page élégante qui s’adapte à différents écrans peut attirer davantage d’utilisateurs et améliorer l’expérience utilisateur. Cet article explique comment utiliser HTML et CSS pour créer une mise en page d'attraction touristique réactive et donne des exemples de code spécifiques.
Première étape : Structure HTML
Créez une structure HTML de base, comprenant l'en-tête, la barre de navigation, le contenu du corps et le bas. L'exemple de code est le suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>旅游景点页面</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>旅游景点</h1>
</header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">景点介绍</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
<main>
<!-- 页面内容 -->
</main>
<footer>
© 2021 旅游景点页面
</footer>
</body>
</html>Étape 2 : Style CSS
Utilisez CSS pour définir la mise en page et le style de la page. L'exemple de code spécifique est le suivant :
/* styles.css */
/* 全局样式 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* 头部样式 */
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px;
}
/* 导航栏样式 */
nav {
background-color: #666;
color: #fff;
text-align: center;
padding: 10px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
margin: 0 10px;
}
nav ul li a {
text-decoration: none;
color: #fff;
}
/* 主体内容样式 */
main {
padding: 20px;
}
/* 底部样式 */
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
}
/* 响应式布局 */
@media only screen and (max-width: 768px) {
/* 导航栏垂直排列 */
nav ul li {
display: block;
margin: 10px 0;
}
}Étape 3 : Ajouter du contenu
Ajoutez le contenu de votre attraction dans la balise <main></main>. Vous pouvez ajouter des images, du texte, des icônes, etc. selon vos besoins. L'exemple de code suivant n'est qu'un exemple simple :
<main>
<h2>景点介绍</h2>
<p>这里是景点介绍的内容。</p>
<img src="景点图片.jpg" alt="景点图片">
</main>Pour résumer, ce sont les étapes de base et l'exemple de code pour créer une mise en page d'attractions touristiques réactive en utilisant HTML et CSS. Bien entendu, la disposition et le style spécifiques devront être ajustés en fonction de vos besoins. J'espère que cet article vous sera utile.
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!