Rumah > Artikel > hujung hadapan web > Cara membuat susun atur halaman tarikan pelancong yang responsif menggunakan HTML dan CSS
Cara membuat susun atur halaman tarikan pelancong yang responsif menggunakan HTML dan CSS
- WBOYasal
- 2023-10-27 11:46:581511semak imbas
Cara menggunakan HTML dan CSS untuk mencipta reka letak halaman tarikan pelancong yang responsif
Dalam era peranti mudah alih yang meluas hari ini, halaman web yang responsif Susun atur adalah penting. Terutamanya dalam industri pelancongan, susun atur halaman yang elegan yang disesuaikan dengan pelbagai skrin boleh menarik lebih ramai pengguna dan meningkatkan pengalaman pengguna. Artikel ini akan memperkenalkan cara menggunakan HTML dan CSS untuk mencipta reka letak halaman tarikan pelancong yang responsif, dan memberikan contoh kod khusus.
Langkah pertama: Struktur HTML
Buat struktur HTML asas, termasuk pengepala, bar navigasi, kandungan badan dan bahagian bawah. Contoh kod adalah seperti berikut:
<!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>Langkah 2: Gaya CSS
Gunakan CSS untuk menetapkan reka letak dan gaya halaman. Contoh kod khusus adalah seperti berikut:
/* 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;
}
}Langkah 3: Tambah kandungan
Tambahkan kandungan tarikan anda dalam teg <main></main>. Anda boleh menambah gambar, teks, ikon, dsb. mengikut keperluan anda. Contoh kod berikut hanyalah contoh mudah:
<main>
<h2>景点介绍</h2>
<p>这里是景点介绍的内容。</p>
<img src="景点图片.jpg" alt="景点图片">
</main>Untuk meringkaskan, itulah langkah asas dan contoh kod untuk mencipta reka letak halaman tarikan pelancong yang responsif menggunakan HTML dan CSS. Sudah tentu, susun atur dan gaya khusus perlu diselaraskan mengikut keperluan anda. Semoga artikel ini bermanfaat kepada anda.
Atas ialah kandungan terperinci Cara membuat susun atur halaman tarikan pelancong yang responsif menggunakan HTML dan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!