通知横幅
本课属于 Coddy HTML 学习旅程的“前端实践”单元。第 24 课，共 35 课。
通知横幅会提醒用户注意重要信息，例如成功消息、警告或错误。它们通常显示在页面顶部或底部。你可能见过它们用于显示以下内容：
- 成功消息，例如：“你的个人资料已成功更新。”
- 错误消息，例如：“出了点问题，请重试。”
- 信息提示，例如：“我们已更新隐私政策。”
我们来创建一个简单的通知横幅。先从一个基本的容器开始：
<div class="notification">
This is a notification message!
</div>添加一些样式，让它更醒目：
.notification {
background-color: #4CAF50;
color: white;
padding: 15px;
margin-bottom: 15px;
border-radius: 4px;
}这会创建一个带有白色文字的绿色通知横幅。
挑战
简单给你提供了一个通知横幅的 HTML。你的任务是为它添加样式，让它看起来像一条真实的成功消息。
你的任务：
- 使用
display: flex和align-items: center，让图标和文字并排显示。 - 在横幅内部添加 内边距，让内容更易读。
- 为横幅设置绿色背景（
#4CAF50），并将文字设为白色，因为这是一条成功通知。 - 将边角设为圆角。
- 添加盒子阴影，让横幅看起来更有层次感。
- 使用
margin-right在图标和文字之间添加间距。 - 使用
font-size: 18px将图标稍微放大。
目标：让横幅看起来像一条简洁的成功消息，左侧是对勾图标，右侧是文字。
亲手试试
<!DOCTYPE html>
<html>
<head>
<title>Notification Banners</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.notification {
}
.notification_icon {
}
</style>
</head>
<body>
<div class="notification notification--success">
<span class="notification_icon">✓</span>
<div class="notification_message">Your changes have been saved successfully!</div>
</div>
</body>
</html>
自我测试这节课包含一个小测验。开始学习即可作答，并记录你的进度。
前端实践中的所有课
自己练习： Web 在线编辑器