Cara membuat susun atur halaman tarikan pelancong yang responsif menggunakan HTML dan CSS-html tutorial-php.cn

Cara membuat susun atur halaman tarikan pelancong yang responsif menggunakan HTML dan CSS

WBOY

Lepaskan： 2023-10-27 11:46:58

asal

1602 orang telah melayarinya

Cara membuat susun atur halaman tarikan pelancong yang responsif menggunakan HTML dan CSS

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>
        &copy; 2021 旅游景点页面
    </footer>
</body>
</html>

Salin selepas log masuk

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

Salin selepas log masuk

Langkah 3: Tambah kandungan

Tambahkan kandungan tarikan anda dalam teg <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>

Salin selepas log masuk

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!