6

我在 Photoshop 中制作了这个草图，并将其转换为 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;}

但是我有点迷失如何构建所有内容，应该使用 span 或 div 标签而不是 p-tags。

检查这个jsfiddle：http: //jsfiddle.net/upas3/1/

欢迎任何想法或解决方案。

4

10 回答 10

5

我会DL为每个这样的块使用列表，并UL在语义上将它们组合在一起：

<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

看起来是使用 ul 和 li 标签的好地方。使用段落标签可以工作，但对于 UI 设计来说是反直觉的。

于 2012-12-17T17:40:05.417 回答
2

好吧，div它们p是“相同的”，因为它们是块元素，但p具有更多默认样式，因此在它们之间，您将需要使用div.

span如果您希望将这些块视为一行文本，您可能会使用它，看起来就像您所做的那样。

更新：正如其他答案中所述，您还可以使用各种列表标签，并将它们设置为内联元素，如 span。这对屏幕阅读器来说可能很好。

于 2012-12-17T17:41:05.233 回答
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 回答
1

一般来说，没有统一的格式，所以你可以使用任何你感觉更好的东西。实际上，我一直在尝试使用需要较少解决方法的元素。假设p标签需要额外的边距标准化，所以我会使用divs，如果你需要 inilne 元素可能更好的是使用spannotdiv等等。只有一件事让我很恼火，它是类/id 名称，总是尽量避免类似size1, size2, style124:) 之类的东西，而是使用在上下文中有意义且其他开发人员可以理解的东西

于 2012-12-17T17:44:00.450 回答
1

试试这个：http: //jsfiddle.net/P4xwK/

关于您的问题，我认为这并不重要，您可以使用display:inline和 with将所有内容转换为您喜欢的内容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

我会这样组织它：

<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 回答
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和.red,除非颜色dl:nth-of-type(1) dt的选择取决于dl:nth-of-type(2) dt价格dl:nth-of-type(3) dt框位置以外的其他东西。

于 2012-12-17T17:50:16.073 回答
0

这里唯一真正重要的是作者的便利和后备。

为方便起见，您将使用divor span，除了块与内联之外没有默认渲染，因此您无需覆盖默认设置。

对于后备，即非 CSS 渲染，您可能希望使用p而不是div和span代替div，因为您希望将项目呈现为段落（在它们之间有空行或暂停），但在内部只是作为文本。

于 2012-12-17T17:50:52.563 回答
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 回答