6

このスケッチはフォトショップで作成し、HTML と CSS に変換しています。

ここに画像の説明を入力

HTML: 

<div class="pricebox">
    <p class="price">360kr</p>
    <p class="min">40 min</p>
    <p class="info green">Körlektion</p>
</div>

<div class="pricebox">
    <p class="price">1700kr</p>
    <p class="min">Riskutbildnig 2</p>
    <p class="info yellow">Halkan</p>
</div>  
<div class="pricebox">
    <p class="price">500kr</p>
    <p class="min">Riskutbildning 1</p>
    <p class="info red">Riskettan</p>
</div>

CSS

body {
    font-family: "Myriad Pro",Myriad,"Helvetica Neue",Helvetica,Arial,sans-serif;
}
.pricebox {
    display:inline-block;
    border: 1px solid #EEEEEE;
    border-radius: 3px;
    width: 100px;
    height: 150px;
    margin: 5px;
}

.price{
    font-size: 28px;
    font-weight:300;
    color: #383838;
    padding: 11px;
}
.min {
    font-size: 11px;
    color: #909090;
    padding: 0 25px;
}
.info {
    height: 35%;
    margin-top: 15px;
    color: #EEEEEE;
    font-weight: 600;
    font-size: 11px;
}
.green{background-color: #a7d155;}
.yellow{background-color: #eada42;}
.red{background-color: #e54e4b;}

しかし、すべてを構造化する方法についてちょっと迷っています。p-tags の代わりに span または div タグを使用する必要があります。

このjsfiddleを確認してください：http://jsfiddle.net/upas3/1/

アイデアや解決策は大歓迎です。

4

10 に答える 10

5

DLそのようなブロックごとに list を使用ULし、それらを意味的にグループ化するには list を使用します。

<ul>
    <li><dl>
        <dt>Körlektion</dt>
        <dd>360kr</dd>
        <dd>40 min</dd>
    </dl></li>

    <li><dl>
        <dt>Halkan</dt>
        <dd>1700kr</dd>
        <dd>Riskutbildnig 2</dd>
    </dl></li>

    <li><dl>
        <dt>Riskettan</dt>
        <dd>500kr</dd>
        <dd>Riskutbildning 1</dd>
    </dl></li>
</ul>
于 2012-12-17T17:44:25.537 に答える
2

これは表形式のデータのように見え、表形式のデータはテーブルに入れられます。しかし、それはそれがテーブルのように見えなければならないという意味ではありません！

http://jsfiddle.net/jdEP4/

table.prices {
    display: block;
}

table.prices thead {
    display: none;
}

table.prices tr {
    display: inline-block;
    border: 1px solid;
}

table.prices td {
    display: block;
    text-align: center;
}

.info.yellow {
    background: yellow;
}

.info.green {
    background: green;
}

.info.red {
    background: red;
}

もちろん、CSSは不完全ですが、テーブルを再フォーマットするためのベースラインがあります。

于 2012-12-17T18:51:35.900 に答える
2

ul と li タグを使用するのに適した場所のようです。段落タグを使用することもできますが、UI 設計には直感的ではありません。

于 2012-12-17T17:40:05.417 に答える
2

divとはブロック要素pであるという点で「同じ」ですが、pデフォルトのスタイリングが多いため、それらの間ではdiv.

spanこれらのブロックを 1 行のテキストとして扱いたい場合に使用できます。

更新：他の回答で述べたように、さまざまなリストタグを使用して、それらをスパンなどのインライン要素にスタイル設定することもできます。これは、スクリーン リーダーに適しています。

于 2012-12-17T17:41:05.233 に答える
1

一般的に統一されたフォーマットはありませんので、使いやすいと感じたものを使用してください。実際には、回避策をあまり必要としない要素を常に使用しようとしています。pタグに追加のマージン正規化が必要になるとしましょう。そのため、代わりに s を使用します。inilne 要素が必要な場合は、 notをdiv使用する方がよいでしょう。クラス/ID名で私を悩ませているのは、常に, , :) のようなものを避け、代わりにコンテキストで意味があり、他の開発者が理解できるものを使用することですspandivsize1size2style124

于 2012-12-17T17:44:00.450 に答える
1

これを試してください：http://jsfiddle.net/P4xwK/

あなたの質問について私はあなたがすべてをあなたが好きなものに変換できることは本当に重要ではないと思いdisplay:inlineますdisplay:block. ただし、タグの順序は構文的に正しい必要があります。

あなたが望むように見えるその小さな三角形を除いて。

body {
    font-family: "Myriad Pro",Myriad,"Helvetica Neue",Helvetica,Arial,sans-serif;
}
.pricebox {
    display:inline-block;
    border: 1px solid #EEEEEE;
    border-radius: 3px;
    width: 100px;
    height: 100px;
    margin: 5px;
}

.price{
    font-size: 28px;
    font-weight:300;
    color: #383838;
    text-align:center;
}
.min {
    font-size: 11px;
    color: #909090;
    text-align:center;
}
.info {
    height: 35%;
    margin-top: 15px;
    padding-top:15px;
    color: #EEEEEE;
    font-weight: 600;
    font-size: 11px;
    text-align:center;
}
.green{background-color: #a7d155;}
.yellow{background-color: #eada42;}
.red{background-color: #e54e4b;}

これは、css で三角形を描画するためのトリックです。

.arrow-up {
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid black;
}
于 2012-12-17T17:46:03.863 に答える
0

それらは私にはリストアイテムのように見えます。段落ではありません。プログラム的に、あなたが持っているものは大丈夫です。意味的には、CSSがシャットオフされている場合は、それらについて考えようとします（そのため、リストを作成します）

<ul>
    <li><h2>Header</h2></li>
    <li>Price</li>
    <li>Description</li>
</ul>

いくつかのこと：1）私は要素をターゲットにしようとしますが、タグに「.pricelist」を使用<ul>することはオプションです。2）「ヘッダー」が重要であると私が考えるのが正しければ、要素の配置を使用し<ul> and <li>てヘッダーをプレゼンテーションの最後のアイテムに移動することができますが、セマンティクスは維持します。

于 2012-12-17T18:02:22.323 に答える
0

私はよりセマンティックなソリューションが好きです:

HTML:

<dl class="pricebox">
    <dt>Körlektion</dt>
    <dd><abbr class="price" title="360 kronor">360kr</abbr></dd>
    <dd><abbr class="min" title="40 minutes">40 min</abbr></dd>
</dl>
<dl class="pricebox">
    <dt>Halkan</dt>
    <dd><abbr class="price" title="1700 kronor">1700kr</abbr></dd>
    <dd><abbr class="min" title="2 FrihDehBiDeUh">Riskutbildnig 2</abbr></dd>
</dl>  
<dl class="pricebox">
    <dt>Riskettan</dt>
    <dd><abbr class="price" title="500 kronor">500kr</abbr></dd>
    <dd><abbr class="min" title="1 FrihDehBiDeUh">Riskutbildning 1</abbr></dd>
</dl>

@MaratTanalin ソリューションに触発されました

CSS で:

色の選択がプライスボックスの位置以外に依存する場合を除き、 、.green、 、を.yellow置き換えます。.reddl:nth-of-type(1) dtdl:nth-of-type(2) dtdl:nth-of-type(3) dt

于 2012-12-17T17:50:16.073 に答える
0

ここで本当に重要なのは、作成者の利便性とフォールバックだけです。

便宜上、divまたはを使用spanします。これには、ブロック対インラインであることを除いてデフォルトのレンダリングがないため、オーバーライドする必要があるデフォルト設定はありません。

フォールバックの場合、つまり CSS 以外のレンダリングの場合は、アイテムを段落として (空の行または間に一時停止を入れて) レンダリングしたいが、内部的にはテキストとしてレンダリングしたいので、おそらくp代わりにdivandspanの代わりに使用したいと思うでしょう。div

于 2012-12-17T17:50:52.563 に答える
0

私はそれを次のように整理します：

<div class="pricebox">
    <ul>
        <li class="price">360kr</li>
        <li class="min">40 min</li>
        <li class="info green">Körlektion</li>
    </ul>
</div>

それに応じてスタイルを設定します。

于 2012-12-17T17:42:57.670 に答える