电子邮件中的CSS选项卡

nfeuvbwi 于 2022-12-15 发布在其他

关注(0)|答案(3)|浏览(363)

我试图创建一个电子邮件模板为我的网站，在模板中我需要CSS标签，即使没有JavaScript的工作，
我有这样的CSS标签：
造型：

#globalnav {
    position:relative;
    float:left;
    width:100%;
    padding:0 0 1.75em 1em;
    margin:0;
    list-style:none;
    line-height:1em;
}

#globalnav LI {
    float:left;
    margin:0;
    padding:0;
}

#globalnav A {
    display:block;
    color:#444;
    text-decoration:none;
    font-weight:bold;
    background:#ddd;
    margin:0;
    padding:0.25em 1em;
    border-left:1px solid #fff;
    border-top:1px solid #fff;
    border-right:1px solid #aaa;
}

#globalnav A:hover,
#globalnav A:active,
#globalnav A.here:link,
#globalnav A.here:visited {
    background:#bbb;
}

#globalnav A.here:link,
#globalnav A.here:visited {
    position:relative;
    z-index:102;
}

/*subnav*/

#globalnav UL {
    position:absolute;
    left:0;
    top:1.5em;
    float:left;
    background:#bbb;
    width:100%;
    margin:0;
    padding:0.25em 0.25em 0.25em 1em;
    list-style:none;
    border-top:1px solid #fff;
}

#globalnav UL LI {
    float:left;
    display:block;
    margin-top:1px;
}

#globalnav UL A {
    background:#bbb;
    color:#fff;
    display:inline;
    margin:0;
    padding:0 1em;
    border:0
}

#globalnav UL A:hover,
#globalnav UL A:active,
#globalnav UL A.here:link,
#globalnav UL A.here:visited {
    color:#444;
}

html中的代码：

<ul id="globalnav">
                                <li><a href="#" class="here">INFOmail Hoy</a>

                                </li>
                                <li>
                                    <a href="#">Vieron</a>
                                </li>
                                <li><a href="#">OTFs</a></li>
                                <li><a href="#">Eventos</a></li>
                                <li><a href="#">ECos</a></li>
                                <li><a href="#">Encuetams</a></li>

                            </ul>

但这对我来说并不奏效，因为当你点击或移动到它的时候，它不会改变或做任何事情。
我不能让它做工作，使它将真正的标签，即改变内容时，点击。我需要它的工作在电子邮件客户端，如gmail或outlook。

css

来源：https://stackoverflow.com/questions/25347636/css-tabs-in-emails

3条答案

按热度按时间

zwghvu4y1#

你可以只使用CSS在邮件中创建标签--除了它们不会在所有客户端上工作，所以你需要评估你的“后备”策略以及是否值得。
下面的文章向你展示了如何创建在iOS、Android原生电子邮件客户端以及Yahoo！Mail、Gmail和AOL Mail中工作的选项卡。具体来说，这些选项卡在www.example.com或Outlook中不工作Outlook.com。
http://freshinbox.com/blog/interactive-tabs-for-email/
正如dcc提到的，许多客户端不支持某些CSS样式，如定位，因此该示例通过使用替代“技巧”来避免它们，如使用标签、复选框和嵌套。

赞(0）回复(0）举报 2022-12-15

ycl3bljg2#

这只是一个简单的坏主意，除非你不关心，绝大多数人收到你的电子邮件将收到一封电子邮件，这看起来非常糟糕。
CSS定位在HTML电子邮件中不起作用。我检查了你的代码片段，建议你删除它。你还没有写一个应该存在于电子邮件中的CSS定义。定位，边距和填充元素在电子邮件中不起作用，基本的样式，如背景色和颜色应该写内联。
如果你想要一个好的模板，这里有一个非常好的你可以查看：gist(link)

赞(0）回复(0）举报 2022-12-15

vecaoik13#

不幸的是，目前还不可能有跨浏览器兼容的纯CSS选项卡。
这大概是你能得到的最接近的东西了：

HTML
<div class="tabs">
  <div class="tab"><div class="tab-box"></div></div>
  <div class="tab"><div class="tab-box"></div></div>
  <div class="tab active"><div class="tab-box"></div></div>
  <div class="tab"><div class="tab-box"></div></div>

</div>
  <div class="content">

  </div>

中央支助系统

body {
  padding:100px;
}
.tabs {
  height:45px;
  padding: 0 0 0 0;
  overflow:visible;
}
.tab {
  width:200px;
  height:45px;
  overflow:hidden;
  float:left;
  margin:0 -15px 0 0;
}

.tab-box {
  height:50px;
  background: #fff;
  border-radius: 4px;
  border:1px solid #ccc;
  margin:0 10px 0;
  box-shadow: 0 0 2px  #fff inset;

 -webkit-transform: perspective(100px) rotateX(30deg);
 -moz-transform: perspective(100px) rotateX(30deg);

}

.tab.active {
  z-index:40;
  position:relative;
  padding-bottom:1px;
}
.tab.active .tab-box{
  background-color: #eee;
  @include background-image(linear-gradient(top, #ccc , #ddd 3%, rgba(#eee, 0.5)  ));
  box-shadow: 0 0 2px 0 #fff inset;
}

.content {
  z-index:1;
  padding:100px;
  border:1px solid #ccc;
  background:#eee;
  position:relative;

}

.clear {
 clear:both;
}

JS系统

$('.tab').click(function(){
  $('.tab').removeClass('active');
  $(this).addClass('active');
});

演示：http://codepen.io/minipai/pen/Etnhv
您可能还想了解一下https://github.com/adamschwartz/chrome-tabs

赞(0）回复(0）举报 2022-12-15

我来回答

电子邮件中的CSS选项卡

3条答案

相关问题

热门标签

最新问答