How to create a responsive tourist attraction page layout using HTML and CSS-HTML Tutorial-php.cn

How to create a responsive tourist attraction page layout using HTML and CSS

WBOY

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

Original

1610 people have browsed it

How to create a responsive tourist attraction page layout using HTML and CSS

How to use HTML and CSS to create a responsive tourist attraction page layout

In today's era of widespread mobile devices, a responsive web layout is crucial . Especially in the travel industry, an elegant page layout that adapts to various screens can attract more users and improve user experience. This article will introduce how to use HTML and CSS to create a responsive tourist attraction page layout, and give specific code examples.

Step One: HTML Structure

Create a basic HTML structure, including header, navigation bar, body content and bottom. The code example is as follows:

<!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>

Copy after login

Step 2: CSS style

Use CSS to set the layout and style of the page. The specific code examples are as follows:

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

Copy after login

Step 3: Add content

Add your attraction content in the <main> tag. You can add pictures, text, icons, etc. according to your needs. The following code example is just a simple example:

<main>
    <h2>景点介绍</h2>
    <p>这里是景点介绍的内容。</p>
    <img src="景点图片.jpg" alt="景点图片">
</main>

Copy after login

To summarize, these are the basic steps and code example for creating a responsive tourist attraction page layout using HTML and CSS. Of course, the specific layout and style will need to be adjusted according to your needs. Hope this article is helpful to you.

The above is the detailed content of How to create a responsive tourist attraction page layout using HTML and CSS. For more information, please follow other related articles on the PHP Chinese website!