简单实例：图文列表、表格（课程表）

发布于：2022-04-10 12:52:49  栏目：技术文档

1、简单图文列表实例

代码

<ul class="nav" style="display: flex;list-style: none">
    <li class="item">
        <a href="/static/images/cheng.jpg"><img src="/static/images/cheng.jpg" alt="城堡"></a>
        <a href="/static/images/cheng.jpg">城堡</a>
    </li>
    &nbsp;
    <li class="item">
        <a href="/static/images/tree.jpg"><img src="/static/images/tree.jpg" alt="圣诞树" ></a>
        <a href="/static/images/tree.jpg">圣诞树</a>
    </li>
    &nbsp;
    <li class="item">
        <a href="/static/images/kfc.jpg"><img src="/static/images/kfc.jpg" alt="肯德基老人"></a>
        <a href="/static/images/kfc.jpg">肯德基老人</a>
    </li>
    &nbsp;
</ul>
<style>
    img{
        width:200px;height:250px
    }  
</style>

<!-- ul.nav>li*3.item>a -->

<!-- style="display:flex" 弹性布局-->

<!-- list-style: none 没有列表标记（默认是实心圆点列表标记） -->

<!-- alt 在图像无法显示或者用户禁用图像显示时,代替图像显示在浏览器中的内容 -->

效果

2、表格实例：课程表

代码

<style>
        td{text-align: center;}
        thead,tfoot{background-color: lightgray;}
</style>
    <table border="1" width="450" cellspacing="0" cellpadding="5" align="center">
        <caption>
            <h3>五年级第一学期课程表</h3>
        </caption>
       <!-- thead>th{xx}*6 -->
        <thead>
           <th>时间</th>
           <th>周一</th>
           <th>周二</th>
           <th>周三</th>
           <th>周四</th>
           <th>周五</th>
        </thead>
        <tbody>
            <!-- tr*8>td{xxxxx}*6 -->
           <tr>
               <td rowspan="4" bgcolor="#e7f7f7">上午</td>
               <td>语文</td>
               <td>英语</td>
               <td>数学</td>
               <td>美术</td>
               <td>音乐</td>
           </tr>
           <tr>               
               <td>科学</td>
               <td>数学</td>
               <td>音乐</td>
               <td>英语</td>
               <td>美术</td>
           </tr>
           <tr>
               <td>数学</td>
               <td>科学</td>
               <td>英语</td>
               <td>语文</td>
               <td>语文</td>
           </tr>
           <tr>               
               <td>数学</td>
               <td>美术</td>
               <td>实践</td>
               <td>语文</td>
               <td>体育</td>
           </tr>
           <tr>
               <td colspan="6" align="center">中午午休</td>
           </tr>
           <tr>
               <td rowspan="3" bgcolor="#e7f7f7">下午</td>
               <td>体育</td>
               <td>英语</td>
               <td>劳动</td>
               <td>健康</td>
               <td>数学</td>
           </tr>
           <tr>
               <td>英语</td>
               <td>舞蹈</td>
               <td>武术</td>
               <td>体育</td>
               <td>阅读</td>
           </tr>
           <tr>
               <td>英语</td>
               <td>书法</td>
               <td>朗诵</td>
               <td>数学</td>
               <td>数学</td>
           </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>备注：</td>
                <td colspan="5">课后做完作业再回家</td>
            </tr>
        </tfoot>
    </table>

<!-- rowspan规定单元格可横跨的行数，垂直合并。colspan规定单元格可横跨的列数,水平合并。 -->

<!-- cellspacing规定单元格之间的空间。cellpadding规定单元边沿与其内容之间的空白。 -->

效果

相关推荐