ホームページ > 記事 > ウェブフロントエンド > HTML と CSS を使用してレスポンシブな観光名所ページ レイアウトを作成する方法
HTML と CSS を使用してレスポンシブな観光名所ページ レイアウトを作成する方法
- WBOYオリジナル
- 2023-10-27 11:46:581558ブラウズ
HTML と CSS を使用してレスポンシブな観光名所ページ レイアウトを作成する方法
モバイル デバイスが普及した今日の時代では、レスポンシブな Web レイアウトが重要です。特に旅行業界では、さまざまな画面に適応するエレガントなページ レイアウトがより多くのユーザーを引き付け、ユーザー エクスペリエンスを向上させることができます。この記事では、HTML と CSS を使用してレスポンシブな観光名所ページ レイアウトを作成する方法と、具体的なコード例を紹介します。
ステップ 1: HTML 構造
ヘッダー、ナビゲーション バー、本文コンテンツ、下部を含む基本的な HTML 構造を作成します。コード例は次のとおりです。
<!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>ステップ 2: CSS スタイル
CSS を使用して、ページのレイアウトとスタイルを設定します。具体的なコード例は次のとおりです。
/* 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;
}
}ステップ 3: コンテンツの追加
アトラクション コンテンツを <main></main> タグに追加します。必要に応じて、写真、テキスト、アイコンなどを追加できます。次のコード例は単なる例です。
<main>
<h2>景点介绍</h2>
<p>这里是景点介绍的内容。</p>
<img src="景点图片.jpg" alt="景点图片">
</main>要約すると、これらは、HTML と CSS を使用して応答性の高い観光名所のページ レイアウトを作成するための基本的な手順とコード例です。もちろん、特定のレイアウトとスタイルはニーズに応じて調整する必要があります。この記事がお役に立てば幸いです。
以上がHTML と CSS を使用してレスポンシブな観光名所ページ レイアウトを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。