css当当网百货销售榜

最近当当网推出了百货销售榜，采用了CSS来美化页面，让顾客购物更加方便。现在让我们来看一下该页面具体的CSS样式。

.sales-board {
   width: 800px;
   margin: 0 auto;
}

.sales-board h2 {
   font-size: 24px;
   font-weight: bold;
   color: #333;
   text-align: center;
   margin-top: 30px;
}

.sales-board ul {
   list-style: none;
   margin: 0;
   padding: 0;
}

.sales-board li {
   width: 25%;
   float: left;
   text-align: center;
   margin-bottom: 20px;
   padding: 10px;
   Box-sizing: border-Box;
   border: 1px solid #ccc;
}

.sales-board li:hover {
   border: 1px solid #f33;
}

.sales-board li img {
   max-width: 100%;
}

.sales-board li p.name {
   font-size: 14px;
   font-weight: bold;
   color: #333;
   margin-top: 10px;
   margin-bottom: 5px;
}

.sales-board li p.price {
   font-size: 14px;
   font-weight: bold;
   color: #f33;
   margin-top: 5px;
}

.sales-board li p.time {
   font-size: 12px;
   color: #999;
   margin-top: 5px;
}

这段CSS代码运用了清晰的类选择器和伪类选择器，实现了当当网百货销售榜页面的美化和优化。其中，sales-board类定义了整个页面的宽度和居中，h2标签定义了榜单标题的字体大小、颜色和居中，ul标签定义了列表的样式，li标签根据列表的样式自主排列，hover伪类实现了鼠标滑过样式的变化，img标签设定了图片的最大宽度，p标签定义了每个商品的名称、价格和时间的样式。

通过优秀的CSS设计，当当网的百货销售榜页面不仅清晰直观，还具有良好的视觉效果，让顾客在选购商品时更加方便，简单易懂。