css写一个好看的提示框

可以尝试以下代码：

<div class="tip-box">
  <p class="tip-message">这是一个提示框</p>
</div>

<style>
.tip-box {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  padding: 20px;
  width: 300px;
  text-align: center;
}

.tip-message {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}
</style>

你可以根据需求调整提示框的宽度、背景色、阴影等效果，同时调整提示信息的字体大小、颜色等样式。

相关问题

请给我写一个CSS输入提示框的代码

当然，我可以帮你写一个CSS输入提示框的代码。以下是一个基本的示例代码：

HTML代码：

<input type="text" class="input-box" placeholder="请输入文本">
<ul class="dropdown-list">
  <li class="list-item">选项1</li>
  <li class="list-item">选项2</li>
  <li class="list-item">选项3</li>
  <li class="list-item">选项4</li>
  <li class="list-item">选项5</li>
</ul>

CSS代码：

/* 输入框样式 */
.input-box {
  padding: 8px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* 下拉列表的样式 */
.dropdown-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  max-height: 150px;
  overflow-y: auto;
}

/* 下拉列表项的样式 */
.list-item {
  padding: 8px;
  cursor: pointer;
}

/* 当下拉列表项被选中时的样式 */
.list-item:hover,
.list-item:focus {
  background-color: #ddd;
}

这个输入提示框有一个输入框和一个下拉列表，当用户在输入框中输入文本时，下拉列表会显示匹配的选项。用户可以通过点击下拉列表项来选择输入框中的文本内容。

给我写一个jQuery，css美化的div居中提示框

当然可以，以下是一个基于 jQuery 和 CSS 的居中提示框的示例代码：

HTML 代码：

<div id="my-modal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>这是一个提示框</p>
  </div>
</div>

CSS 代码：

/* 控制提示框的基本样式 */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 500px;
  text-align: center;
}

/* 控制关闭按钮的样式 */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

jQuery 代码：

$(document).ready(function () {
  // 当用户点击某个按钮时显示提示框
  $("#my-button").click(function () {
    $("#my-modal").css("display", "block");
  });

  // 当用户点击关闭按钮或者提示框外部时隐藏提示框
  $(".close, .modal").click(function () {
    $("#my-modal").css("display", "none");
  });
});

这段代码会在页面加载完成后绑定一个点击事件，当用户点击某个按钮时，会显示一个居中的提示框，提示框中包含一个文本信息以及一个关闭按钮。当用户点击关闭按钮或者提示框外部时，提示框会被隐藏。你可以根据需要对这段代码进行修改和定制，以满足你的实际需求。