html静态网站基于HTML+CSS+JavaScript上海美食介绍网站网页设计与实现共计5个页面

这篇文章距离上次修改已过200天，其中的内容可能已经有所变动。

由于篇幅限制，我将提供一个包含主页和一个关于我们页面的简单示例。其余页面可以以同样的方式实现。




<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上海美食之旅</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav class="navbar">
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="about.html">关于我们</a></li>
                <!-- 其他导航链接 -->
            </ul>
        </nav>
    </header>
    <main>
        <section class="hero">
            <div class="content">
                <h1>欢迎来到上海美食之旅</h1>
                <p>在这里，你可以品尝到来自上海的独特美食。</p>
                <!-- 更多英雄区域的内容 -->
            </div>
        </section>
        <!-- 其他页面内容 -->
    </main>
    <footer>
        <div class="footer-content">
            <p>版权所有 &copy; 2023 上海美食网</p>
        </div>
    </footer>
    <script src="script.js"></script>
</body>
</html>

CSS (style.css):




/* 简单的样式示例 */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}
 
.navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}
 
.navbar li {
    float: left;
}
 
.navbar li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
 
.navbar li a:hover {
    background-color: #111;
}
 
.hero {
    text-align: center;
    background-image: url('path_to_image.jpg');
    background-size: cover;
    height: 600px;
    color: white;
}
 
.hero h1 {
    font-size: 50px;
    margin-bottom: 0;
}
 
.footer-content {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 20px;
}
 
/* 其他样式 */

JavaScript (script.js):




// 可以放置用于处理用户交互的脚本

这个简单的例子展示了如何使用HTML、CSS和JavaScript创建一个基础的上海美食网站。实际的网站将需要更多的页面、更复杂的布局和更多的交互功能，这些可以通过添加更多HTML、CSS和JavaScript代码来实现。

html静态网站基于HTML+CSS+JavaScript上海美食介绍网站网页设计与实现共计5个页面

评论已关闭

推荐阅读