在web开发中,常常需要将信息进行分类展示,这时候就需要用到分类信息的css文本。
.item { display: flex; flex-direction: column; width: 300px; border: 1px solid #ddd; padding: 10px; margin-bottom: 10px; } .item img { width: 100%; object-fit: cover; height: 200px; margin-bottom: 10px; } .item h2 { font-size: 16px; font-weight: bold; margin-bottom: 10px; } .item p { line-height: 1.5; margin-bottom: 10px; } .item .price { font-size: 18px; font-weight: bold; }
上面的代码示例展示了如何使用css对信息进行分类。我们创建了一个.item类来包含一个商品的信息,包括商品图片、商品名称、商品描述以及商品价格。通过设置.flex-direction来使信息垂直排列,而非水平排列,从而达到分类的目的。同时为了美观和易于阅读,还对不同的信息进行了不同的样式设置。