HTML5手機天氣預報代碼
<!DOCTYPE html> <html> <head> <title>手機天氣預報</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/styles.css"> </head> <body> <div class="container"> <h1>今日天氣</h1> <div class="weather"> <img src="images/sun.png" alt="sunny"> <h2>晴天</h2> <p class="temp"><span>28</span>℃</p> </div> <p>明天天氣</p> <div class="weather"> <img src="images/cloudy.png" alt="cloudy"> <h2>多云</h2> <p class="temp"><span>24</span>℃</p> </div> </div> </body> </html>
CSS代碼（styles.css）
.container {
max-width: 600px;
margin: 0 auto;
text-align: center;
font-family: Arial, sans-serif;
}
.weather {
display: inline-block;
margin: 20px;
}
.weather img {
width: 100px;
height: 100px;
}
.weather h2 {
font-size: 24px;
margin: 10px 0;
}
.weather .temp {
font-size: 18px;
color: #666;
}
.weather .temp span {
font-weight: bold;
font-size: 36px;
}下一篇ttf css