小米官网作为国内知名的电子产品销售平台,页面设计精美,功能齐全。其中,表格是页面设计中的重要元素之一。在小米官网中,CSS技术被应用到了表格中,实现了表格样式的美化以及信息的清晰呈现。
table { margin: 0 auto; width: 100%; border-collapse: collapse; } table th { background-color: #f7f7f7; border: 1px solid #e5e5e5; color: #333333; font-size: 14px; font-weight: 400; padding: 8px 15px; text-align: left; } table td { border: 1px solid #e5e5e5; color: #666666; font-size: 14px; font-weight: 300; padding: 8px 15px; } table tr:nth-child(odd) td { background-color: #f7f7f7; }
以上是小米官网表格样式的CSS代码。在表格中,为了使表格信息更加易读易懂,使用了浅灰色和白色交替的背景色,并使用了加粗字体和居中对齐的表头,以及统一的表格边框,提高了表格的美观性和可读性。此外,如果需要对表格的一行或某几行进行不同的样式处理,可以使用伪类: nth-child() 来实现,这也是CSS技术中比较实用的一种用法。