白骑士的CSS教学实战项目篇 6.4 动态天气应用的CSS设计-CSDN博客

本文链接：https://blog.csdn.net/JeremyTC/article/details/141506086

设计一个动态天气应用的CSS涉及许多方面，包括界面的美观、信息的清晰展示和用户体验的优化。本文将详细讲解如何通过CSS设计一个功能齐全且视觉吸引的天气应用界面。

页面结构

假设你的天气应用包含以下主要部分：

顶部导航栏：用于应用的标题和菜单。
搜索框：用户输入城市或地区名称来查询天气。
天气信息展示：显示当前天气情况和相关数据（如温度、湿度、风速等）。
天气图标：根据天气情况显示不同的图标。
未来天气预报：展示未来几天的天气情况。

CSS样式设计

以下是设计这些部分的CSS示例：

顶部导航栏

HTML：

<header class="navbar">
    <div class="container">
        <h1 class="logo">WeatherApp</h1>

        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </div>
</header>

CSS：

.navbar {
    background-color: #007bff;
    color: #fff;
    padding: 10px 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.navbar .container {
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar .logo {
    font-size: 24px;
    font-weight: bold;
}

.navbar nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.navbar nav ul li {
    margin-left: 20px;
}

.navbar nav ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    transition: color 0.3s;
}

.navbar nav ul li a:hover {
    color: #e0e0e0;
}

搜索框

HTML：

<section class="search">
    <div class="container">
        <input type="text" placeholder="Enter city or region" class="search-input">
        <button class="search-button">Search</button>
    </div>
</section>

CSS：

.search {
    padding: 20px 0;
    background-color: #f8f9fa;
    text-align: center;
}

.search .container {
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.search-input {
    width: 300px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    margin-right: 10px;
}

.search-button {
    padding: 10px 20px;
    border: none;
    background-color: #007bff;
    color: #fff;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.search-button:hover {
    background-color: #0056b3;
}

天气信息展示

HTML：

<section class="weather-info">
    <div class="container">
        <div class="weather-main">
            <h2 class="city-name">New York</h2>

            <div class="weather-icon">
                <img src="sunny-icon.png" alt="Sunny">
            </div>

            <div class="temperature">
                <p class="temp-value">28°C</p>
                <p class="weather-description">Sunny</p>
            </div>
        </div>

        <div class="weather-details">
            <p>Humidity: 60%</p>
            <p>Wind Speed: 15 km/h</p>
        </div>
    </div>
</section>

CSS：

.weather-info {
    padding: 40px 0;
    background-color: #ffffff;
    text-align: center;
    border-bottom: 1px solid #ddd;
}

.weather-main {
    margin-bottom: 20px;
}

.city-name {
    font-size: 32px;
    margin: 0;
}

.weather-icon img {
    width: 100px;
}

.temperature {
    margin-top: 10px;
}

.temp-value {
    font-size: 48px;
    margin: 0;
    font-weight: bold;
}

.weather-description {
    font-size: 24px;
    margin: 0;
}

.weather-details p {
    font-size: 16px;
    margin: 5px 0;
}

未来天气预报

HTML：

<section class="forecast">
    <div class="container">
        <h2>5-Day Forecast</h2>

        <div class="forecast-items">
            <div class="forecast-item">
                <p class="day">Mon</p>
                <img src="sunny-icon.png" alt="Sunny">
                <p class="temp">30°C</p>
            </div>

            <div class="forecast-item">
                <p class="day">Tue</p>
                <img src="cloudy-icon.png" alt="Cloudy">
                <p class="temp">25°C</p>
            </div>

            <!-- More forecast items -->
        </div>
    </div>
</section>

CSS：

.forecast {
    padding: 20px 0;
    background-color: #f8f9fa;
}

.forecast h2 {
    text-align: center;
    font-size: 28px;
    margin-bottom: 20px;
}

.forecast-items {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.forecast-item {
    width: 18%;
    text-align: center;
    background-color: #ffffff;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.forecast-item img {
    width: 50px;
}

.day {
    font-size: 18px;
    margin: 0;
}

.temp {
    font-size: 20px;
    margin: 10px 0 0;
}