如何使用 HTML 和 CSS 创建电子邮件通讯？

2025年03月17日 | 阅读 9 分钟

在本文中，我们将通过各种示例学习如何使用 HTML 和 CSS 创建电子邮件通讯。HTML 用于创建通讯的结构，CSS 用于设计通讯的布局。

什么是电子邮件通讯？

电子邮件通讯是用于告知订阅者有关网站或公司的每日新闻或更新的电子邮件。他们将通过电子邮件收到更新信息或新发布的内容，这有助于他们保持最新状态。

以下是使用 HTML 和 CSS 创建电子邮件通讯的各种示例。

示例 1

<! DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
        <meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
        <title> Email Newsletter using HTML and CSS </title>
        <link rel = "stylesheet" href = "https://codepen.io/gymratpacks/pen/VKzBEp#0">
        <link href = 'https://fonts.googleapis.com/css?family=Nunito:400,300' rel = 'stylesheet' type = 'text/css'>
<link rel = "stylesheet"
		href =
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,900,300);
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
* { box-sizing: border-box; }
body {
    font-family: 'Lato', sans-serif;
    color: rgba(0,0,0,0.7);
    background: #6D6475; 
    background-size: cover;
    background-repeat: no-repeat;
    background: linear-gradient(to bottom, #0A1A29, #6D6475, #C69E92);
    margin: 0;
}
h2 {
  text-align: center;
  font-weight: normal;
  color: #fff;
  text-transform: uppercase;
  font-size: 1em;
  white-space: nowrap;
  font-size: 4vw;
  z-index: 1000;
font-family: 'Titillium Web', sans-serif;  
text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.7);
  @include skew(0, -6.7deg, false);
  @include transition-property(font-size);
  @include transition-duration(0.5s);
}
* {
  margin: 0;
  padding: 0;
}
.container .body_txt {
  flex-basis: 60%;
  padding: 10px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
body {
  background: rgb(255, 0, 55);
  font-family: 'Titillium Web', sans-serif;
}
h3 {
  text-align: center;
  font-weight: normal;
  color: #fff;
  text-transform: uppercase;
  font-size: 1em;
  white-space: nowrap;
  font-size: 2vw;
  z-index: 1000;
font-family: 'Titillium Web', sans-serif;
  text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.7);
  @include skew(0, -6.7deg, false);
  @include transition-property(font-size);
  @include transition-duration(0.5s);
}
.container {
  margin: 150px auto;
  width: 48vw;
  height: 300px;
  background: rgb(255, 255, 255);
  display: flex;
  padding: 10px;
  border-radius: 0.5em;
  overflow: hidden;
}
.body_txt hi {
  font-size: 1.9vw;
  line-height: 3vw;
}
.body_txt p {
  margin: 18px 0;
}
h1 {
  text-align: center;
  font-weight: normal;
  color: rgb(255, 0, 55);
  text-transform: uppercase;
  font-size: 2em;
  white-space: nowrap;
  font-size: 1.5vw;
  z-index: 1000;
  font-family: 'Titillium Web', sans-serif;
  @include skew(0, -6.7deg, false);
  @include transition-property(font-size);
  @include transition-duration(0.5s);
}
.inps input[type="email"] {
  background: rgb(251 251 251);
  border: 2px solid rgb(150, 150, 150);
  outline: none;
  width: 80%;
  padding: 8px;
  font-family: Arial;
  font-size: 15px;
  height: 24px;
  border-radius: 0.2rem;
  transition: 0.12s;
}
.container .img {
  flex-basis: 40%;
  display: grid;
  place-items: center;
}
.container .img img {
  width: 100%;
  height: auto;
}
.inps input[type="email"]:focus {
  border: 2px solid #ff0037;
cursor: pointer;
}
.inps button {
  width: 85%;
  height: 39px;
  padding: 6px;
  margin-top: 15px;
  background: #ff0037;
  color: #fff;
  border: 1px solid #ff0037;
  outline: 0;
  font-family: roboto;
  font-size: 15px;
  border-radius: 0.4em;
  cursor: pointer;
  transition: 0.2s all;
  user-select: none;
}
.inps button:hover {
  background: #ffffff;
  color: #ff0037;
  border: 2px solid #ff0037;
}
.inps button:active {
  background: #ffffff;
  color: #ff0037;
  border: 2px solid #ff0037;
}
@media screen and (max-width: 870px) {
  .container {
    width: 80vw;
    height: auto;
    background: rgb(255, 255, 255);
    padding: 10px;
    display: block;
  }
  .container .img {
    height: 150px;
    background: url("/img_on_mobile.png");
    object-fit: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  .container .img img {
    display: none;
  }
  container .body_txt h1 {
    font-size: 1.5em;
    line-height: 25px;
    margin: 5px 0;
  }
 .container .inps button {
    width: 88%;
  }
}
</style>
<body>
<h2> Example </h2>
<h3> Email Newsletter Using CSS </h3>
<div class = "container">
  <div class = "img">
    <img src = "2.png" alt = " ">
  </div>
  <div class = "body_txt">
    <h1> Subscribe to our <br> newsletter! </h1>
    <p> We'll send you the best of our blog just once a month. We promise. </p>
    <div class = "inps">
      <input type = "email" name = " " id = " " placeholder = "Enter e-mail"> <br>
      <button> Subscribe </button>
    </div>
  </div>
</div>
</body>
</html>

说明

在上面的示例中，我们创建了一个电子邮件通讯的示例。我们可以通过注册的电子邮件 ID 订阅此通讯。

输出

以下是这个例子的输出。

示例 2

<! DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
        <meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
        <title> Email Newsletter using CSS </title>
        <link rel = "stylesheet" href = "https://codepen.io/gymratpacks/pen/VKzBEp#0">
        <link href = 'https://fonts.googleapis.com/css?family=Nunito:400,300' rel = 'stylesheet' type = 'text/css'>
<link rel = "stylesheet"
		href =
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap");
body {
	width: 100%;
	height: 100%;
	display: block;
	position: relative;
	background: #000;
	font-family: "Open Sans", sans-serif;
	padding: 0 2em;
	overflow-x: 0;
}
h2 {
	color: #fff;
	margin-bottom: 1em;
	font-size: 2.5em;
	font-weight: 300;
	text-align: center;
	letter-spacing: 3px;
	width: 100%;
}
.signup-box {
	display: block;
	margin: 0 auto;
	width: 40em;
	height: auto;
	background: #fff;
	padding: 4em 2em;
}
.signup-box .signup-form {
	display: block;
	margin: 0 auto;
}
.signup-form label {
	display: block;
	padding: 0;
	width: 100%;
}
.signup-form input {
	display: block;
	padding: 0;
	width: 100%;
}
.signup-form input:-webkit-autofill {
	border: 0;
	border-bottom: 2px solid black;
	-webkit-text-fill-color: black;
	-webkit-box-shadow: 0 0 0px 1000px #fff inset;
}
.signup-form input:-webkit-autofill:hover {
	border: 0;
	border-bottom: 2px solid black;
	-webkit-text-fill-color: black;
	-webkit-box-shadow: 0 0 0px 1000px #fff inset;
}
.signup-form input:-webkit-autofill:focus {
	border: 0;
	border-bottom: 2px solid black;
	-webkit-text-fill-color: black;
	-webkit-box-shadow: 0 0 0px 1000px #fff inset;
}
.signup-form textarea:-webkit-autofill {
	border: 0;
	border-bottom: 2px solid black;
	-webkit-text-fill-color: black;
	-webkit-box-shadow: 0 0 0px 1000px #fff inset;
}
.signup-form textarea:-webkit-autofill:hover {
	border: 0;
	border-bottom: 2px solid black;
	-webkit-text-fill-color: black;
	-webkit-box-shadow: 0 0 0px 1000px #fff inset;
}
.signup-form textarea:-webkit-autofill:focus {
	border: 0;
	border-bottom: 2px solid black;
	-webkit-text-fill-color: black;
	-webkit-box-shadow: 0 0 0px 1000px #fff inset;
}
.signup-form select:-webkit-autofill {
	border: 0;
	border-bottom: 2px solid black;
	-webkit-text-fill-color: black;
	-webkit-box-shadow: 0 0 0px 1000px #fff inset;
}
.signup-form select:-webkit-autofill:hover {
	border: 0;
	border-bottom: 2px solid black;
	-webkit-text-fill-color: black;
	-webkit-box-shadow: 0 0 0px 1000px #fff inset;
}
.signup-form select:-webkit-autofill:focus {
	border: 0;
	border-bottom: 2px solid black;
	-webkit-text-fill-color: black;
	-webkit-box-shadow: 0 0 0px 1000px #fff inset;
}
.signup-form label {
	font-size: 1em;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #1b94b9;
}
.signup-form .signup-input {
	border: 0;
	border-bottom: 2px solid #000;
	margin-bottom: 2em;
	font-size: 1em;
	padding: 0.5em 0.25rem;
}
.signup-form .signup-input:focus {
	border: 0;
	outline: 0;
	border-bottom: 1px solid #000;
}
.signup-form input[type="submit"] {
	font-size: 0.9em;
	display: block;
	margin: 0 auto;
	width: max-content;
	background: #000;
	padding: 1.25em 2em;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #fff;
	border: 0;
	outline: 0;
	transition: 0.3s all ease-in-out;
}
.signup-form input[type="submit"]:hover {
	background: #333;
	padding: 1.25em 4em;
	cursor: pointer;
}
.signup-terms {
	display: block;
	margin: 2em 0;
}
.signup-terms input {
	padding: 0;
	height: initial;
	width: initial;
	margin-bottom: 0;
	display: none;
	cursor: pointer;
}
.signup-terms label {
	position: relative;
	cursor: pointer;
	text-transform: initial;
}
.signup-terms label a {
	border-bottom: 1px dashed #fffafb;
    color: #c51c53;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.5px;
    padding: 0 2px;
}
.signup-terms label a:hover {
	text-decoration: none;
}
.signup-terms label:before {
	content: " ";
	-webkit-appearance: none;
	background-color: transparent;
	border: 3px solid #000;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05),
		inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
	padding: 7px;
	display: inline-block;
	position: relative;
	vertical-align: middle;
	cursor: pointer;
	margin-right: 1em;
}
h2 {
  text-align: center;
  font-weight: normal;
  color: #fff;
  text-transform: uppercase;
  font-size: 2em;
  white-space: nowrap;
  font-size: 2vw;
  z-index: 1000;
  font-family: 'Titillium Web', sans-serif;
  text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.7);
  @include skew(0, -6.7deg, false);
  @include transition-property(font-size);
  @include transition-duration(0.5s);
}
h3 {
  text-align: center;
  font-weight: normal;
  color: #fff;
  text-transform: uppercase;
  font-size: 1.5em;
  white-space: nowrap;
  font-size: 1vw;
  z-index: 1000;
 font-family: 'Titillium Web', sans-serif;
  text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.7);
  @include skew(0, -6.7deg, false);
  @include transition-property(font-size);
  @include transition-duration(0.5s);
}
.signup-terms input:checked + label:after {
	content: " ";
	display: block;
	position: absolute;
	top: 3px;
	left: 7px;
	width: 4px;
	height: 8px;
	border: solid #fff;
	border-width: 0 3px 3px 0;
	transform: rotate(45deg);
}
.signup-terms input:checked ~ label:before {
	background: #000;
}
@media only screen and (max-width: 48em) {
	.signup-box {
		width: 30em;
	}
}
@media only screen and (max-width: 40em) {
	.signup-box {
		width: 100%;
	}
}
</style>
<body>
<section id = "contact">
	<div class = "wrapper">
		<h2> Example </h2>
        <h3> E-mail Newsletter using CSS </h3>
		<div class = "signup-box">
			<form class = "signup-form">
		                 <label for = "email"> E-mail: </label>
			<input type = "email" name = "email" class = "signup-input" required >
				<label for = "name"> Name </label>
			<input type = "text" name = "name" class = "signup-input" required >
				<label for = "surname"> Mobile No. </label>
			<input type = "text" name = "surname" class = "signup-input" required >
				<div class = "signup-terms">
					<input type = "checkbox" id = "terms">
			<label for = "terms"> I agree with � the terms of use. </label>
				</div>
				<input type = "submit" value = "Subscribe">
			</form>
		</div>
	</div>
</section>
</body>
</html>

说明

在上面的示例中，我们创建了一个电子邮件通讯注册的示例。在此，我们可以输入电子邮件、姓名和手机号码并订阅此通讯。

输出

以下是这个例子的输出。

示例 3

<! DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
        <meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
        <title> Email Newsletter using CSS </title>
        <link rel = "stylesheet" href = "https://codepen.io/gymratpacks/pen/VKzBEp#0">
        <link href = 'https://fonts.googleapis.com/css?family=Nunito:400,300' rel = 'stylesheet' type = 'text/css'>
 <link href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel = "stylesheet">    
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Titillium Web', sans-serif;
  background: linear-gradient(125deg, #778beb, #f8a5c2);
  min-height: 100vh;
}
.card_container {
  width: 350px;
  background: #fff;
  border-radius: 15px;
}
.card_container .card_header {
  background-color: #bf5bee;
  background-image: linear-gradient(
    43deg,
    #bf5bee 0%,
    #c850c0 46%,
    #ffcc70 100%
  );
  padding: 4rem 1.3rem;
  border-radius: 15px 15px 0 0;
  text-align: center;
}
.card_container .card_header h1 {
  margin: 0;
  padding: 0;
  color: #fff;
  margin-top: 0.6rem;
  font-size: 1.5rem;
}
.card_container .card_header h1 span {
  text-transform: uppercase;
}
.card_header .text {
  color: #fff;
  font-size: 0.9rem;
}
.card_content {
  padding: 2rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
    align-items:center; 
  flex-direction: column;
}
input:focus {
    border: 2px solid #011936;
    font-weight: 600;
}
.card_content .input-field input {
  width: 100%;
  padding: 0.8rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.card_content .btn {
  padding: 0.8rem;
  background-color: #bf5bee;
  font-family: 'Titillium Web', sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
  background-image: linear-gradient(
    43deg,
    #bf5bee 0%,
    #c850c0 46%,
    #ffcc70 100%
  );
  border: none;
  outline: none;
  border-radius: 5px;
  color: #fff;
  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}
.card_content .btn:hover {
  box-shadow: 3px 7px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.card_content span {
  text-align: center;
  padding: 1rem 0;
  font-size: 0.8rem;
  color: gray;
  letter-spacing: 1px;
}
.links {
  display: flex;
  flex-wrap:wrap;
  gap: 1rem;
  justify-content: center;
   margin-top:1rem; 
}
.links .icon {
  border: 1px solid transparent;
  padding: 1rem 1.5rem;
  border-radius: 4px;
  transition: 0.2s ease-in-out;
}
.links .icon i {
  font-size: 1.3rem;
}
.links .icon .fa-facebook {
  color: blue;
    font-size: 1.4rem;
    font-weight: 800;
}
.links .icon .fa-twitter {
  color: #1da1f2;
  font-size: 1.4rem;
    font-weight: 800;
}
.links .icon .fa-google {
  color: #db4437;
  font-size: 1.4rem;
    font-weight: 800;
}
.links .icon:hover {
  border: 1px solid black;
}
h2 {
  text-align: center;
  font-weight: normal;
  color: #fff;
  text-transform: uppercase;
  font-size: 2em;
  white-space: nowrap;
  font-size: 2vw;
  z-index: 1000;
  font-family: 'Titillium Web', sans-serif;
  @include skew(0, -6.7deg, false);
  @include transition-property(font-size);
  @include transition-duration(0.5s);
}
h3 {
  text-align: center;
  font-weight: normal;
  color: #fff;
  text-transform: uppercase;
  font-size: 2em;
  white-space: nowrap;
  font-size: 1.5vw;
  z-index: 1000;
  font-family: 'Titillium Web', sans-serif;
  @include skew(0, -6.7deg, false);
  @include transition-property(font-size);
  @include transition-duration(0.5s);
}
.links a {
    border-bottom: 1px dashed #fffafb;
    color: #c51c53;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.5px;
    padding: 0 2px;
}
span {
  text-align: center;
  font-weight: normal;
  color: #fff;
  text-transform: uppercase;
  font-size: 2em;
  white-space: nowrap;
  font-size: 1vw;
  z-index: 1000;
  font-family: 'Bangers', cursive;
  @include skew(0, -6.7deg, false);
  @include transition-property(font-size);
  @include transition-duration(0.5s); 
}
@media screen and (max-width:400px) {
  .card_container{
    width: calc(90% - 1rem);
    margin: 2rem 0;
  }
  .links .icon i {
    font-size: .9rem;
  }
}
</style>
<body>		
		<div class = "card_container">
  <div class = "card_header">
     <h2> Example </h2>
        <h3> E-mail Newsletter using CSS </h3>
  </div>
  <div class = "card_content">
    <div class = "input-field">
      <input type = "email" id = "email" placeholder = "Enter your email address">
    </div>
    <button class = "btn"> Subscribe <i class = "fas fa-arrow-right"> </i> </button>
    <span> Or subscribe using </span>
    <div class = "links">
      <a href = "#" class = "icon">
        <i class = "fab fa-google"> </i>
      </a>
      <a href = "#" class = "icon">
        <i class = "fab fa-twitter"> </i>
      </a> 
      <a href = "#" class = "icon">
        <i class = "fab fa-facebook"> </i>
      </a>
    </div>
  </div>
</body>
</html> 

说明

在上面的示例中，我们创建了一个电子邮件通讯的示例。我们可以通过注册的电子邮件 ID 订阅此通讯，或者通过各种社交媒体平台（如 Google 帐户、Twitter 或 Facebook 等）进行订阅。

输出

以下是这个例子的输出。

下一主题如何在 HTML 中对齐占位符文本

如何使用 HTML 和 CSS 创建电子邮件通讯？

什么是电子邮件通讯？

示例 1

示例 2

示例 3

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

如何使用 HTML 和 CSS 创建电子邮件通讯？

什么是电子邮件通讯？

示例 1

示例 2

示例 3

相关帖子

如何制作 HTML 列表

如何创建 HTML 注册表单

如何在 HTML 中更改字体大小

HTML 文本标签

HTML CSS

动画基础

HTML 搜索栏

HTML 中的语义化

HTML 和 CSS 中的自动图片滑块

如何在 HTML 中更改链接颜色

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器