用html和css写一个用户或密码错误提示

可以的，下面是一个简单的例子，供参考：

HTML代码：

<div class="error">
  <i class="fa fa-exclamation-triangle"></i>
  <p>用户名或密码错误，请重新输入！</p>
</div>

CSS代码：

.error {
  background-color: #f8d7da;
  border-color: #f5c6cb;
  border-radius: 0.25rem;
  border: 1px solid transparent;
  color: #721c24;
  margin: 10px 0;
  padding: 10px;
  text-align: center;
}

.error i {
  color: #721c24;
  font-size: 20px;
}

.error p {
  display: inline-block;
  margin-left: 10px;
  vertical-align: middle;
}

解释一下 CSS 代码：

- `.error` 定义一个类名，用于表示错误提示框。
- `background-color` 和 `border-color` 分别设置背景色和边框颜色。
- `border-radius` 设置边框圆角。
- `border` 设置边框宽度、样式和颜色。
- `color` 设置文字颜色。
- `margin` 设置错误提示框与其他元素之间的间距。
- `padding` 设置错误提示框内部的间距。
- `.error i` 定义一个类名，用于表示错误提示的图标。
- `color` 设置图标颜色。
- `font-size` 设置图标大小。
- `.error p` 定义一个类名，用于表示错误提示的文字。
- `display: inline-block` 让文字与图标在同一行显示。
- `margin-left` 设置文字左侧的间距。
- `vertical-align` 将文字与图标垂直居中对齐。

需要注意的是，上面的代码使用了 Font Awesome 图标库中的 exclamation-triangle 图标，所以需要在 HTML 中引入 Font Awesome 的 CSS 文件。