1、简单图文列表实例

代码

  1. <ul class="nav" style="display: flex;list-style: none">
  2.     <li class="item">
  3.         <a href="/static/images/cheng.jpg"><img src="/static/images/cheng.jpg" alt="城堡"></a>
  4.         <a href="/static/images/cheng.jpg">城堡</a>
  5.     </li>
  6.     &nbsp;
  7.     <li class="item">
  8.         <a href="/static/images/tree.jpg"><img src="/static/images/tree.jpg" alt="圣诞树" ></a>
  9.         <a href="/static/images/tree.jpg">圣诞树</a>
  10.     </li>
  11.     &nbsp;
  12.     <li class="item">
  13.         <a href="/static/images/kfc.jpg"><img src="/static/images/kfc.jpg" alt="肯德基老人"></a>
  14.         <a href="/static/images/kfc.jpg">肯德基老人</a>
  15.     </li>
  16.     &nbsp;
  17. </ul>
  19. <style>
  20.     img{
  21.         width:200px;height:250px
  22.     }  
  23. </style>

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

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

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

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

效果

2、表格实例：课程表

代码

  1. <style>
  2.         td{text-align: center;}
  3.         thead,tfoot{background-color: lightgray;}
  4. </style>
  6.     <table border="1" width="450" cellspacing="0" cellpadding="5" align="center">
  8.         <caption>
  9.             <h3>五年级第一学期课程表</h3>
  10.         </caption>
  12.        <!-- thead>th{xx}*6 -->
  13.         <thead>
  14.            <th>时间</th>
  15.            <th>周一</th>
  16.            <th>周二</th>
  17.            <th>周三</th>
  18.            <th>周四</th>
  19.            <th>周五</th>
  20.         </thead>
  22.         <tbody>
  23.             <!-- tr*8>td{xxxxx}*6 -->
  24.            <tr>
  25.                <td rowspan="4" bgcolor="#e7f7f7">上午</td>
  26.                <td>语文</td>
  27.                <td>英语</td>
  28.                <td>数学</td>
  29.                <td>美术</td>
  30.                <td>音乐</td>
  31.            </tr>
  32.            <tr>               
  33.                <td>科学</td>
  34.                <td>数学</td>
  35.                <td>音乐</td>
  36.                <td>英语</td>
  37.                <td>美术</td>
  38.            </tr>
  39.            <tr>
  40.                <td>数学</td>
  41.                <td>科学</td>
  42.                <td>英语</td>
  43.                <td>语文</td>
  44.                <td>语文</td>
  45.            </tr>
  46.            <tr>               
  47.                <td>数学</td>
  48.                <td>美术</td>
  49.                <td>实践</td>
  50.                <td>语文</td>
  51.                <td>体育</td>
  52.            </tr>
  53.            <tr>
  54.                <td colspan="6" align="center">中午午休</td>
  56.            </tr>
  57.            <tr>
  58.                <td rowspan="3" bgcolor="#e7f7f7">下午</td>
  59.                <td>体育</td>
  60.                <td>英语</td>
  61.                <td>劳动</td>
  62.                <td>健康</td>
  63.                <td>数学</td>
  64.            </tr>
  65.            <tr>
  66.                <td>英语</td>
  67.                <td>舞蹈</td>
  68.                <td>武术</td>
  69.                <td>体育</td>
  70.                <td>阅读</td>
  71.            </tr>
  72.            <tr>
  73.                <td>英语</td>
  74.                <td>书法</td>
  75.                <td>朗诵</td>
  76.                <td>数学</td>
  77.                <td>数学</td>
  78.            </tr>
  79.         </tbody>
  81.         <tfoot>
  82.             <tr>
  83.                 <td>备注：</td>
  84.                 <td colspan="5">课后做完作业再回家</td>
  85.             </tr>
  86.         </tfoot>
  88.     </table>

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

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

效果

更多相关文章

  1. 想做跨境电商，不会英语应该怎样入行？
  2. html中做图片,链接,列表,图文列表 及一个课程表
  3. 表格/图片/链接/列表
  4. html基础-图文列表、表格
  5. 表格标签演示之课程表
  6. 图文列表和表格（课程表）
  7. 图文列表与课程表代码实现
  8. 表格/图片/链接/列表
  9. markdown的常用语法

随机推荐

  1. Android TextView文字过多，添加滚动条
  2. Windows下载Android全部源码
  3. 解决CardView无点击效果 实现水波纹效果
  4. android sdk setup时呈现:Failed to fetc
  5. Android 源码分析-打电话和发短信
  6. SD卡读写文件 代码学习
  7. android 使用post方法请求网址
  8. android joystick 游戏摇杆
  9. [Android]Android的常用adb命令
  10. Android中主题的添加