Question

我在Photoshop中制作了这个草图，我将其转换为HTML＆amp; CSS。

enter image description here

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-tag。

检查此jsfiddle：http://jsfiddle.net/upas3/1/

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

Answer 1

我会为每个这样的块使用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>

Answer 2

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

Answer 3

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

如果您希望将这些块视为一行文本，则可以使用div。

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

Answer 4

这看起来像表格数据，表格数据在表格中。但是，这并不意味着它必须看起来像一张桌子！

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是不完整的，但基线是重新格式化表格的。

Answer 5

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

Answer 6

试试这个：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;
}

Answer 7

我会像这样组织它：

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

然后相应的风格。

Answer 8

我喜欢更多的语义解决方案：

<强> 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，除非颜色的选择取决于其他内容而非价格盒的位置。

Answer 9

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

为方便起见，您可以使用div或span，除了阻止与内联之外没有默认渲染，因此您无需覆盖默认设置。

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

Answer 10

它们看起来像我的列表项目。不是段落。以编程方式，你有什么是好的。在语义上，如果关闭CSS，我会尝试考虑它们（这就是为什么我要把它们作为一个列表）

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

一些事情：1）我尝试定位元素，但在<ul>标签上使用“.pricelist”是一种选择。 2）如果我认为“标题”很重要，那么你可以使用<ul> and <li>元素上的定位将标题移动到最后一个项目进行演示，但保持你的语义。

我应该使用span标签还是p标签？

10 个答案: