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

Home

Web Front-end

HTML Tutorial

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Oct 27, 2023 am 11:46 AM

csshtmlResponsive layout

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 id="旅游景点">旅游景点</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>

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

Step 3: Add content

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

<main>
    <h2 id="景点介绍">景点介绍</h2>
    <p>这里是景点介绍的内容。</p>
    <img src="/static/imghwm/default1.png"  data-src="景点图片.jpg"  class="lazy" alt="景点图片">
</main>

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!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn