css咨讯框代码

CSS是网页设计中必不可少的一部分，因为它可以让网站具有更好的可读性和更好的可视性。其中一个常见的CSS技术，就是咨讯框。咨讯框通常是指在网站中为用户呈现的消息或通知。下面我们来看一下使用CSS创建咨讯框的代码。

.newsletter {
  font-family: Arial,sans-serif;
  background-color: #F8F8F8;
  border: 1px solid #DDD;
  border-radius: 5px;
  padding: 20px;
  margin-bottom: 20px;
}

.newsletter h2 {
  font-size: 24px;
  margin-top: 0;
}

.newsletter p {
  font-size: 16px;
}

.newsletter input[type="text"],.newsletter input[type="email"] {
  padding: 10px;
  font-size: 14px;
  border-radius: 3px;
  border: 1px solid #DDD;
  width: 100%;
  margin-bottom: 10px;
}

.newsletter input[type="submit"] {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #007ACC;
  color: #FFF;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.newsletter input[type="submit"]:hover {
  background-color: #005580;
}

css咨讯框代码

以上的代码是一个基本的咨讯框样式，它包括一个标题，一段文字介绍以及一个输入表单。这个样式也包括一些基本的CSS属性，如字体、背景颜色、圆角边框、内边距和外边距等。

如果要使用这个样式，我们需要为咨讯框添加一个class名，例如下面的代码：

<div class="newsletter">
  <h2>订阅我们的咨询</h2>
  <p>想获取最新的消息和更新吗？请输入您的电子邮件地址。</p>
  <form>
    <input type="email" name="email" placeholder="你的电子邮件地址">
    <input type="submit" value="立即订阅">
  </form>
</div>

以上是一个简单的咨讯框布局，可以通过此方法，轻松创建自己的咨讯框，并设计出独特的样式。希望这篇文章对你有所帮助。

css咨讯框代码

相关文章