图片、链接、列表及表格标签的学习与运用

一、图文列表

• 主要运用图片、链接、列表知识点

    <!-- 图文列表 -->
    <ul class="nav" style="display: flex; list-style: none">
        <li class="item" style="text-align: center;">
            <a href="https://baidu.com"><img src="static/images/dog.jpg" alt="小狗" /></a>
            <span>小狗</span>
        </li>
        &nbsp;
        <li class="item" style="text-align: center;">
            <a href=""><img src="static/images/duck.jpg" alt="小鸡" /></a>
            <span>小鸡</span>
        </li>
        </li>
        &nbsp;
        <li class="item" style="text-align: center;">
            <a href=""><img src="static/images/bear.jpg" alt="考拉" /></a>
            <span>考拉</span>
        </li>
        &nbsp;
    </ul>

二、商品表

• 主要运用表格知识

    <table border="1" width="800" cellspacing="0" cellpadding="5" align="center">
        <caption>
            <h3>商品表</h3>
        </caption>
        <thead>
            <tr>
                <th rowspan="2">品名</th>
                <th colspan="3">入库</th>
                <!-- <th></th>
                <th></th> -->
                <th colspan="3">出库</th>
                <!-- <th></th>
                <th></th> -->
                <th rowspan="2">库存</th>
            </tr>
            <tr>
                <!-- <th></th> -->
                <th>入库数量</th>
                <th>入库单号</th>
                <th>签收员</th>
                <th>出库数量</th>
                <th>出库单号</th>
                <th>经手人</th>
                <!-- <th></th> -->
            </tr>
        </thead>
        <tbody align="center">
            <tr>
                <td>苹果</td>
                <td>10</td>
                <td>m12124545454</td>
                <td>张三</td>
                <td>8</td>
                <td>m5454545454</td>
                <td>李四</td>
                <td>2</td>
            </tr>
            <tr>
                <td>香蕉</td>
                <td>10</td>
                <td>m12124545454</td>
                <td>张三</td>
                <td>8</td>
                <td>m5454545454</td>
                <td>李四</td>
                <td>2</td>
            </tr>
            <tr>
                <td>葡萄</td>
                <td>10</td>
                <td>m12124545454</td>
                <td>张三</td>
                <td>8</td>
                <td>m5454545454</td>
                <td>李四</td>
                <td>2</td>
            </tr>
            <tr>
                <td>龙眼</td>
                <td>10</td>
                <td>m12124545454</td>
                <td>张三</td>
                <td>8</td>
                <td>m5454545454</td>
                <td>李四</td>
                <td>2</td>
            </tr>
            <tr>
                <td>荔枝</td>
                <td>10</td>
                <td>m12124545454</td>
                <td>张三</td>
                <td>8</td>
                <td>m5454545454</td>
                <td>李四</td>
                <td>2</td>
            </tr>
            <tr>
                <td>芒果</td>
                <td>10</td>
                <td>m12124545454</td>
                <td>张三</td>
                <td>8</td>
                <td>m5454545454</td>
                <td>李四</td>
                <td>2</td>
            </tr>
            <tfoot align="center" bgcolor="lightblue">
                <tr>
                    <td>备注:</td>
                    <td colspan="7">每天下午15:30-17:30清点商品</td>
                </tr>
            </tfoot>
        </tbody>
    </table>