正文

HTML5 简易旅行主题网页源代码示例：探秘世界，轻松制作个性化旅行网站

/0 浏览量
1030

在这个信息爆炸的时代，拥有一个属于自己的旅行网站，可以让你分享旅途中的点点滴滴，与朋友和家人共同回忆美好时光。今天，我们就来探秘HTML5的魔法，轻松制作一个个性化旅行主题网页。

页面结构

首先，我们需要构建网页的基本结构。以下是一个简单的HTML5旅行主题网页结构示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的旅行日记</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>我的旅行日记</h1>
        <nav>
            <ul>
                <li><a href="#home">首页</a></li>
                <li><a href="#travel">旅行日志</a></li>
                <li><a href="#contact">联系方式</a></li>
            </ul>
        </nav>
    </header>
    <section id="home">
        <h2>欢迎来到我的旅行日记</h2>
        <p>在这里，我将与你分享我的旅行故事，让我们一起探秘这个世界。</p>
    </section>
    <section id="travel">
        <h2>旅行日志</h2>
        <article>
            <h3>泰国曼谷</h3>
            <img src="thailand.jpg" alt="泰国曼谷">
            <p>这里是泰国的首都曼谷，这里有热闹的夜市、美味的小吃和古老的寺庙。</p>
        </article>
        <article>
            <h3>法国巴黎</h3>
            <img src="paris.jpg" alt="法国巴黎">
            <p>这里是浪漫的法国巴黎，这里有埃菲尔铁塔、卢浮宫和塞纳河。</p>
        </article>
    </section>
    <section id="contact">
        <h2>联系方式</h2>
        <p>如果你有任何问题，欢迎通过以下方式联系我：</p>
        <address>
            <strong>邮箱：</strong><a href="mailto:example@example.com">example@example.com</a><br>
            <strong>电话：</strong><a href="tel:+8613800000000">+86 138 0000 0000</a>
        </address>
    </section>
    <footer>
        <p>版权所有 &copy; 2023 我的旅行日记</p>
    </footer>
</body>
</html>

CSS样式

接下来，我们需要为网页添加一些CSS样式，使其更加美观。以下是一个简单的CSS样式示例：

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

header {
    background-color: #333;
    color: #fff;
    padding: 20px;
}

header h1 {
    margin: 0;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-right: 20px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
}

section {
    padding: 20px;
}

h2 {
    border-bottom: 1px solid #333;
    padding-bottom: 10px;
}

article img {
    max-width: 100%;
    height: auto;
}

footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px;
    position: fixed;
    bottom: 0;
    width: 100%;
}

总结

通过以上HTML5和CSS的代码示例，我们可以轻松制作一个个性化的旅行主题网页。当然，这只是一个简单的示例，你可以根据自己的需求进行修改和扩展。希望这篇文章能帮助你开启属于自己的旅行网站之旅！

-- 展开阅读全文 --