淘先锋技术网

首页 1 2 3 4 5 6 7

在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来使信息垂直排列,而非水平排列,从而达到分类的目的。同时为了美观和易于阅读,还对不同的信息进行了不同的样式设置。