最近当当网推出了百货销售榜,采用了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标签定义了每个商品的名称、价格和时间的样式。