样式展示：

HTML代码：

\<!--门店新形象-->

\<div class="ys-jj-wrap">
  \<div class="ys-wrap-1200">
    \<div class="ys-title-wrap mdxx-title p-r t-c">
      \<h2>{dede:field name='typename'/}\</h2>
    \</div>
    \<div class="clear mt35">
      \<div class="fr ys-cpgy-des font16 color-242424">
        \<div class="JMJS_tab_text">{dede:field.content/}\</div>
      \</div>
      \<div class="fl ys-cpgy-img">\<img alt="一点点奶茶logo" src="{dede:global.cfg_basehost/}/public/images/alittlle_tea_com/jishujiaoxue.png"/> \</div>
    \</div>
  \</div>
\</div>

css样式：

.position-dpzs{
    margin-left: -490px;bottom: 41px;
}
.mdxx-title{
    background: url("https://www.alittlle-tea.com/public/images/jmfy/mdxx-title-bg.png") no-repeat center top;
}
.ys-cpgy-des{
    width: 886px;height: auto;line-height: 200px;
}
.ys-cpgy-des span{
    display: inline-block;vertical-align: middle;line-height: 28px;
}
.ys-cpgy-img{
    width: 300px;height: 200px;
    -webkit-box-shadow: 0 0 10px 1px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 0 10px 1px rgba(0,0,0,0.2);
    box-shadow: 0 0 10px 1px rgba(0,0,0,0.2);
}
.ys-jj-wrap{
    padding: 50px ;margin: 0 auto;
}
.ys-wrap-1200{
    width: 1200px;height: auto;margin: 0 auto;
}
.ys-title-wrap{
    height: 60px;line-height: 60px;
}
.ys-title-wrap h2{
    background: url("https://www.alittlle-tea.com/public/images/common/title-l-bg.png")no-repeat left top,url("/public/images/common/title-r-bg.png")no-repeat right bottom;
    font-size: 30px;color: #242424;font-weight: bold;padding: 0 7px 0 12px;
}
.p-r{
    position: relative;
}
.t-c{
    text-align: center;
}
.mt35{
    margin-top: 35px!important;
}
.clear:after { display: block; content: ''; clear: both; }
.clear { zoom: 1; }
.font16{
    font-size: 16px!important;
}
.color-242424{
    color: #242424;
}
.fl{
    float: left;display: inline;
}
.fr{
    float: right;display: inline;
}
.JMJS_tab_text {
    width: 760px;
    height: auto;
    margin: 15px 0 0;
    /* background: url(../images/JMJS_bg2.png) repeat-y;*/
    font-size: 12px;
    color: #333;
    padding: 15px 20px;
    box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    line-height: 24px;
    text-indent: 0;
}

更新: 2024-06-13 09:59:01
原文: <https://www.yuque.com/seoers/uyyd4f/sak48r>

版权所有

许可证：署名 4.0 国际 (CC-BY-4.0)