前端开发 | 在线支持

在网上购物的时候.每次交易的最后一个流程就是购物车结算。结算界面一般都是使用表格元素实现的，通过使用表格可以使信息分类更加明确。但是HTML原生的表格只是通过边线区分每个数据所在的区域，毫无美感可言。针对不同的网页风格，需要对表格添加相应的样式，以达到整体风格统一，提高用户体验的目的。本例将结合应用CSS3各技术点，对一个表格元素添加样式，实现美化结算界面的效果。

对于表格的美化主要包含两个方面:表头样式、表文样式。表头一般用于说明各列数据的作用，通常需要突出显示表头信息。表文主要是表格数据，通常可以使用相间的背景颜色以区别相邻行。结算表格的最后一行通常用于显示和值信息，所以最后一行也应突出显示。根据如上分析，设计结算界面基础结构。表格包括如下几列信息:商品名称、单价、购买数量、总价。由于这里是模拟购物车界面，所以我们事先填充几种商品的信息。在表格最后一行，是所有购物车内商品总价格。为界面增加CSS3样式。分别对表格的表头、数据信息、最后一行统计信息增加相应的样式。

【示例】

HTML

<table>
    <tr>
        <th>商品名称</th>
        <th>单价</th>
        <th>购买数量</th>
        <th>总价</th>
    </tr>
    <tr>
        <td>iPhone 4S</td>
        <td>4360</td>
        <td>1</td>
        <td>4360</td>
    </tr>
    <tr>
        <td>三星I9300</td>
        <td>3700</td>
        <td>1</td>
        <td>3700</td>
    </tr>
    <tr>
        <td>联想A789</td>
        <td>900</td>
        <td>3</td>
        <td>2700</td>
    </tr>
    <tr>
        <td>华为G600</td>
        <td>1200</td>
        <td>3</td>
        <td>3600</td>
    </tr>
    <tr>
        <td colspan="3">总价</td>
        <td>14460</td>
    </tr>
</table>

CSS

div {
    width: 600px; /*设置div宽度*/
    border-style: solid; /*设置div边框样式*/
    border-radius: 8px; /*设置边框圆角样式*/
}
table {
    width: 100%; /*设置table宽度*/
    border-collapse: collapse; /*设置边框样式*/
}
td, th {
    border: none; /*设置td，th边框样式*/
}
th {
    line-height: 30px;
    background-color: #000; /*设置th背景色样式*/
    color: #fff; /*设置th文字颜色样式*/
}
td {
    line-height: 20px;
}
tr:nth-of-type(even) {
    background-color: #F3F3F3; /*设置偶数行背景色样式*/
}
tr:nth-of-typ(odd) {
    background-color:#ddd; /*设置奇数行背景色样式*/
}
td:nth-child(n+2) {
    text-align: right; /*设置除第1列外，其他列文本对齐方式*/
}
tr:last-child {
    font-weight: bolder; /*设置最后一行的文字样式*/
}
tr:last-child td:last-child {
    font-size: 25px; /*设置最后一行最后一列的文字样式*/
}

下载源代码