SSH框架网上商城项目第22战之银行图标以及支付页面显示

SSH框架网上商城项目的支付页面显示需要显示银行图标，具体步骤如下：

1. 银行图标的获取

首先需要获取银行图标。可以通过以下方式获取：

• 在网上搜寻对应银行的官网，找到银行的Logo并下载；
• 在开发者工具中查看银行网页中的Logo图片地址，然后下载该图片；

下载的银行图标需要保存在项目的资源目录中，如webapp/resources/img/bank/。

1. 在支付页面中显示银行图标

在支付页面中需要引用对应的银行图标，具体步骤如下：

• 在页面的中引入样式文件：

  html
<link rel="stylesheet" href="../resources/css/pay.css" />
  （注：pay.css为支付页面的样式文件，可根据实际情况调整引用路径）

• 在银行选择列表中添加对应银行的图标。

  html
<ul class="bank-list">
<li class="bank-item">
<input type="radio" name="bank" id="bank1" />
<label for="bank1">
<img src="../resources/img/bank/ABC.png" alt="中国农业银行" />
</label>
</li>
<li class="bank-item">
<input type="radio" name="bank" id="bank2" />
<label for="bank2">
<img src="../resources/img/bank/CMB.png" alt="招商银行" />
</label>
</li>
...
</ul>
  （注：ABC.png和CMB.png为对应银行的Logo文件名，可根据实际情况调整）

• 编写支付页面的CSS样式

为了使银行图标展现效果更佳，需要添加CSS样式。具体步骤如下：

• 定义银行选择列表外观：

  css
.bank-list {
list-style: none;
margin: 20px 0;
padding: 0;
border-top: 1px solid #ddd;
}
.bank-list .bank-item {
display: inline-block;
margin-right: 20px;
}

• 定义银行图标大小：

  css
.bank-item img {
width: 80px;
height: 40px;
}

• 定义银行图标选中状态样式：

  css
.bank-item input[type="radio"]:checked + label img {
border: 1px solid #f00;
box-shadow: 0 0 5px #f00;
}

至此，银行图标在支付页面的显示就完成了。

示例1：

建设银行Logo文件名为CCB.png，资源路径为webapp/resources/img/bank/CCB.png

在支付页面中加入以下代码：

```html
<ul class="bank-list">
    <li class="bank-item">
        <input type="radio" name="bank" id="bank1" />
        <label for="bank1">
            <img src="../resources/img/bank/CCB.png" alt="建设银行" />
        </label>
    </li>
    ...
</ul>
```

示例2：

中国银行Logo文件名为BOC.png，资源路径为webapp/resources/img/bank/BOC.png

在支付页面中加入以下代码：

 ```
<ul class="bank-list">
    <li class="bank-item">
        <input type="radio" name="bank" id="bank1" />
        <label for="bank1">
            <img src="../resources/img/bank/BOC.png" alt="中国银行" />
        </label>
    </li>
    ...
</ul>
```