Question

我已经尝试将源减少到更易于管理（希望如此）。

当前看起来很普通，但实际上是一个矩形。我想做的是添加一个彩色边框，该边框环绕矩形，文本“ Footer”位于该彩色区域内。页脚上方的三个单词在矩形内，但该区域未着色。

我尝试用div和类email-wrapper包装所有内容，并添加了background-color: #aaaaaa，但是它什么也没做。

希望很清楚。有人能帮忙吗？

Answer 1

请尝试一下，让我知道。 codepen！

#content {
  border: 2px solid #999;
  border-top: 20px solid #999;
  padding: 10px;
}

.titlebox {
  float: left;
  padding: 0 0px;
  margin: -28px 0 0 30px;
  background: #999;
  color: white;
}

<html>

<body>
  <div id="content">
    <div class="titlebox">Vocabularies</div>
    <p>This is a div</p>
  </div>
</body>

</html>

Answer 2

如果您想以自己的方式添加边框，则可以为.email-wrapper添加填充并提供背景颜色。

body {
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
  margin: 0;
  padding: 0;
  font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-size: 100%;
  line-height: 1.6;
}

.table-wrapper {
  width: 700px;
  margin: auto;
  margin-top: 50px;
  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
}

.email-wrapper {
  background-color: #000;
  width: 700px;
  margin: auto;
  padding:5px;
}

table.body-wrap {
  width: 100%;
  background: #f6f6f6;
  margin: 0;
  font-size: 100%;
  line-height: 1.8;
  font-size: 15px;
}

.container {
  display: block !important;
  margin: 0 auto !important;
  /* makes it centered */
  clear: both !important;
}

.header {
  background-repeat: no-repeat;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  height: 80px;
  background: {
      {
      email_settings.brand_primary
    }
  }
  ;
  background-size: 300px;
  background-position: 100%;
  background-repeat: no-repeat;
  line-height: 55px;
  padding-top: 40px;
  text-align: center;
  color: {
      {
      email_settings.brand_navbar_text
    }
  }
  ;
}

.header-title {
  background: {
      {
      email_settings.brand_primary
    }
  }
  ;
  color: {
      {
      email_settings.brand_navbar_text
    }
  }
  ;
  padding: 0px 60px 40px;
  text-align: center;
    {
    % if email_settings.brand_primary=="#ffffff" %
  }
  padding-bottom: 0px;
    {
    % endif %
  }
  margin-bottom: 40px;
}

.header-title h1,
.header-title h1 a {
  font-size: 28px;
  line-height: 40px;
  padding-top: 0px;
  margin-bottom: 10px;
  font-weight: 400;
  color: {
      {
      email_settings.brand_navbar_text
    }
  }
  ;
}

.content .header-title h1:first-child {
  padding-top: 0px;
}

.header-title p,
.header-title p a {
  color: {
      {
      email_settings.brand_navbar_text
    }
  }
  ;
  opacity: 0.8;
}

.header-margin-overide {
  margin-top: -40px;
}

.content {
  margin: 0 auto !important;
  /* makes it centered */
  clear: both !important;
  background: #fff;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  padding-bottom: 40px;
}

.content p,
.content h1,
.content h2,
.content table,
.content hr {
  padding-left: 40px;
  padding-right: 40px;
}

.content p:first-child,
.content h1 {
  padding-top: 40px;
}

.content p:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

.condensed-width {
  max-width: 510px;
  margin: auto;
}

.footer {
  padding-top: 30px;
  padding-bottom: 1px;
  width: 100%;
  clear: both !important;
  text-align: center;
}

.footer p {
  font-size: 12px;
  color: #666;
}

.data-table td {
  background: #ffffff;
  letter-spacing: 0.6px;
  font-size: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 70px;
}

.data-table tr.bordered {
  border-top: 1px solid #B5C2D3;
}

.subtitle {
  font-weight: 700;
  font-size: 20px;
}

.bold {
  font-weight: bold;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.left {
  float: left;
}

.right {
  float: right;
}

.small {
  font-size: 80%;
  line-height: 250%;
  vertical-align: middle;
}

.margin-none {
  margin: 0 !important;
}

.padding-none {
  padding: 0 !important;
}

h1 {
  font-size: 28px;
  line-height: 45px;
  font-weight: bold;
  margin-bottom: 30px;
}

h2 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

h3 {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 20px;
}

p,
ul,
ol {
  font-weight: normal;
  padding: 0;
  font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  line-height: 1.7;
  margin-bottom: 1.3em;
  font-size: 15px;
  color: #47505E;
}

p:first-child {
  margin-top: 0px;
}

ul li,
ol li {
  margin-left: 50px;
  list-style-position: inside;
}

.content h1.headline:first-child,
.content h2.headline:first-child {
  padding-top: 40px;
}

.content h2.subline {
  font-weight: 300;
  font-size: 20px;
}

@media only screen and (max-device-width: 700px) {
  .table-wrapper {
    width: 100% !important;
    margin-top: 0px !important;
    border-radius: 0px !important;
  }
  .header {
    border-radius: 0px !important;
  }
  .header-title {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .header-title h1 {
    font-size: 25px !important;
  }
}

<body>
  <div class="email-wrapper">
    <table style="background: #ffffff;" width="100%" cellpadding="0" cellspacing="0">
      <tr>
        <td>
          <table cellpadding="0" cellspacing="0" class="table-wrapper">
            <tr>
              <td class="container header">
                <p>
                  "test"
                </p>
              </td>
            </tr>

在带有文本的元素周围添加边框

2 个答案: