1

現在、グラフィック デザイナーの Illustrator アセットを HTML にスライスしていますが、どのように表現すればよいかわからないデザインの部分があります。

ここに画像の説明を入力

これにテーブルベースのレイアウトを使用することは想像に難くありません。

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

B の font-size を正しく見えるように変更します。しかし、このデザインを 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

TDCとCHANNELの間に休憩を残し、それをdivで囲んでから、大きなBをdivに入れてcssを使用して残りを行うことができるようです。

または、既存のブレークを使用して、大きなBをスパンに配置してみてください

于 2012-10-04T17:37:35.453 に答える
0

あなたの質問を完全に理解しているかどうかはわかりませんが、CSS の「text-indent」プロパティを調べることができます (おそらく、大きなテキスト用のクラスを作成し、HTML を でラップします<span class="largeText></span>。負の値を受け入れるので、もっと情報を提供してくれれば、何か別のことを思い付くことができるかもしれません。

于 2012-10-04T17:31:32.160 に答える