浮动通知
本课属于 Coddy HTML 学习旅程的“使用 CSS 添加样式”单元。第 76 课，共 76 课。
挑战
简单在这个挑战中，你将重新创建一个悬浮通知，让它看起来像下方图片中的样子（或采用类似的设计）。这是一个复习练习，你将运用学过的 CSS 定位知识，正确放置通知和关闭按钮。
按照以下步骤设置悬浮通知的样式：
1. 设置通知框的样式：
- 将它放在页面顶部附近，位置大致居中。
- 设置固定宽度，并添加一些内边距。
- 为背景、字体和边框选择任意颜色，打造醒目的警告样式。
- 添加圆角和轻微的阴影，让通知更加醒目。
2. 设置关闭按钮的样式：
- 使用
position: absolute将关闭按钮放在通知容器的右上角。 - 选择一个背景颜色，并调整字体大小。
- 确保按钮看起来可以点击，并且与背景形成鲜明对比。
💡 试着调整颜色、间距和位置，打造你想要的设计！
亲手试试
<html>
<head>
<title>Floating Notification</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="notification">
<button class="close-btn">×</button>
<p>This is a floating notification! Click the "X" to close.</p>
</div>
</body>
</html>使用 CSS 添加样式中的所有课
自己练习： Web 在线编辑器