我在 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/
欢迎任何想法或解决方案。