Css 如何仅使用HTML编码此电子邮件中的2行、4个按钮和白色背景_Css_Html_Frontend_User Experience

Css 如何仅使用HTML编码此电子邮件中的2行、4个按钮和白色背景

css html

Css 如何仅使用HTML编码此电子邮件中的2行、4个按钮和白色背景,css,html,frontend,user-experience,Css,Html,Frontend,User Experience,今天我试着练习，用HTML编写一个简单的电子邮件设计。但到目前为止，我还有一些问题不清楚，请看图片样本，我可以寻求一些帮助：中间的白色背景。如何使用HTML编写这部分代码这两条粉红色的线，我试着用来做这个，但我不知道为什么颜色不会改变，从第一行到图像顶部的中间空间不正确，所以有没有其他方法来编码这条线这4个按钮，如何HTML这4个按钮？图像示例按钮粉色背景看起来像用作形状我知道这些可以使用CSS来达到效果，但目前希望所有的事情都只在HTML中完成，基于这个示例，这可能吗如果有人知道如

今天我试着练习，用HTML编写一个简单的电子邮件设计。但到目前为止，我还有一些问题不清楚，请看图片样本，我可以寻求一些帮助：

中间的白色背景。如何使用HTML编写这部分代码

这两条粉红色的线，我试着用

来做这个，但我不知道为什么颜色不会改变，从第一行到图像顶部的中间空间不正确，所以有没有其他方法来编码这条线

这4个按钮，如何HTML这4个按钮？图像示例按钮粉色背景看起来像用作形状

我知道这些可以使用CSS来达到效果，但目前希望所有的事情都只在HTML中完成，基于这个示例，这可能吗

如果有人知道如何解决这些问题，请告诉我。

HTML:

<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
  <div class="mainDiv">
    <div class="lines"></div>
    <div class="title">MEMORIAL DAY</div>
    <div class="title2">SALE</div>
    <div class="lines"></div>
    <div class="text1">stock up blah blah</div>
    <div class="row">
      <div class="sm-col margin">
      <button type="button" class="btn btn-info">but1</button>
      <button type="button" class="btn btn-info">but2</button>
      </div>
        <div class="row">
      <div class="sm-col">
      <button type="button" class="btn btn-info">but1</button>
      <button type="button" class="btn btn-info">but2</button>
      </div>
    </div>
  </div>

您必须在html元素中使用内联css。CSS是你如何设计和定位HTML的，它们是相辅相成的。您必须同时使用这两种方法才能实现所需的设计。@Paigemeink只是想让您知道，

标记在电子邮件中也受支持。他可以把所有的CSS都放在那里。@OmriLuzon很高兴知道，谢谢你来到堆栈溢出！我纠正了许多拼写错误。（请参阅以获取格式帮助，以便您可以创建最佳问题）。对

块使用倒勾（`），这样它就不会显示实际的水平规则。另外：降低噪音！我们不在乎你是新来的，你可以跳过问候/感谢。我们需要问题，我们提供答案。除此之外的任何东西都是杂乱无章的。

.mainDiv {
  background-color: white;
  width: 350px;
  height: 500px;
  display: inline-block;
  text-align: center;
}

.lines {
  margin-top: 50px;
  display: inline-block;
  text-align: center;
  margin-bottom: 10px;
  height: 6px;
  width: 200px;
  background-color: pink;
}

.title {
  color: black;
  font-size: 25px;
}

.title2 {
  color: black;
  font-size: 60px;
}

.text1{
  font-size:17;
}
.margin{
  margin-bottom:30px;
}