1

我目前正在将我们的图形设计师的 Illustrator 资产切片为 HTML，并且我不确定如何最好地表示设计的一部分：

在此处输入图像描述

不难想象为此使用基于表格的布局，例如

<table>
  <tr>
     <td>TDC <br/> CHANNEL</td>
     <td>B</td>
  </tr>
</table>

并更改 B 的字体大小，直到它看起来正确。但是在 HTML 中表示这种设计确实似乎是对正确排版的挑战，并且为此使用表格似乎是邪恶的。我想知道是否有更好的方法？

4

3 回答 3

2

样式化并带有语义标记：

http://jsfiddle.net/kboucher/pXyrd/

<dl class="clearfix">
    <dt>TDC<br />Channel</dt>
    <dd>B</dd>
</dl>

dl {
    background: #B5B8BE;
    color:#415987;
    display:inline-block;
    font-family: Helvetica, Arial, sans-serif;
    padding:1.5% 1% 1%;
}
dt {
    clear: left;
    float:left;
    font-size:0.8em;
    line-height:1em;
    text-transform: uppercase;
}

dd {
    float:left;
    font-size:2.1em;
    font-weight: bold;
    line-height:1em;
    margin: -0.1em 0 0 0.1em;
}
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}
于 2012-10-04T17:38:58.627 回答
0

我不确定我是否完全理解您的问题，但您可以查看 CSS 中的 'text-indent' 属性（也许为大文本创建一个类，然后将您的 HTML 包装在<span class="largeText></span>. 它接受负值，所以请保留记住。如果您提供更多信息，也许我可以提出其他建议。

于 2012-10-04T17:31:32.160 回答
0

看起来你可以离开 TDC 和 CHANNEL 之间的休息并将其包含在一个 div 中，然后将大 B 放在一个 div 中使用 css 来完成剩下的......

或尝试仅使用现有的中断并将大 B 放在一个跨度中

于 2012-10-04T17:37:35.453 回答