HTML5实现好看的天气预报网站源码

由于原始代码已经很完整，我们可以直接参考其结构和样式来提供一个简化版本的HTML5天气预报网站模板。以下是一个简化版的HTML5天气预报页面的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天气预报</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f4f4f4;
        }
        .header {
            text-align: center;
            padding: 20px;
            background-color: #fff;
        }
        .weather-data {
            text-align: center;
            padding: 50px;
            background-color: #fff;
            margin-top: 20px;
        }
        .weather-data h2 {
            font-size: 24px;
        }
        .weather-data p {
            margin: 0;
        }
        .search-bar {
            text-align: center;
            padding: 20px 0;
            background-color: #fff;
            margin-top: 20px;
        }
        input[type="text"] {
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        input[type="submit"] {
            padding: 10px 20px;
            border: none;
            background-color: #005F6B;
            color: white;
            font-weight: bold;
            border-radius: 5px;
            cursor: pointer;
        }
        input[type="submit"]:hover {
            background-color: #048BA8;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>天气预报</h1>
    </div>
    <div class="search-bar">
        <form>
            <input type="text" placeholder="输入城市名称">
            <input type="submit" value="查看天气">
        </form>
    </div>
    <div class="weather-data">
        <h2>北京</h2>
        <p>天气：多云</p>
        <p>温度：28°C</p>
        <p>风速：2.5 m/s</p>
        <p>PM2.5：350</p>
    </div>
</body>
</html>

这个简化版本的代码包含了基本的HTML结构、CSS样式和一个搜索表单，用于获取用户输入的城市名称并显示相应的天气信息。样式使用了简单的CSS属性，没有使用复杂的CSS框架，以确保代码的简洁性和可读性。

HTML5实现好看的天气预报网站源码

评论已关闭

推荐阅读