1.图文列表

代码

  1.     <!-- ul.list>li.jpg*4>a>img -->
  2.     <ul class="list" style="display:grid; list-style:none">
  3.         <li class="jpg">
  4.             <a href="www.baidu.com">
  5.             <img src="static/images/cat.webp" alt="">
  6.                 <div>猫咪</div>
  7.             </a>
  8.         </li>&nbsp;             
  9.         <!-- 转义字符&nbsp;表示一个空格 -->
  10.         <li class="jpg">
  11.             <a href="www.baidu.com">
  12.             <img src="static/images/cock.webp" alt="">
  13.                 <div>公鸡</div>
  14.             </a>
  15.         </li>&nbsp;
  17.         <li class="jpg">
  18.             <a href="www.baidu.com">
  19.             <img src="static/images/dog.webp" alt="">
  20.                 <div>狗狗</div>
  21.             </a>
  22.         </li>&nbsp;
  24.         <li class="jpg">
  25.             <a href="www.baidu.com">
  26.             <img src="static/images/lion.webp" alt="">
  27.                 <div>狮子</div>
  28.             </a>
  29.         </li>&nbsp;
  30.     </ul>

效果示例

图文代码

2.行程列表

  1. <table border="1" width="600" cellspacing="0" cellpadding="5" align="center">
  2.         <!-- 表格标题 -->
  3.         <caption>行程航班</caption>
  5.         <!-- 表头 -->
  6.         <!-- thead>tr>th*5 -->
  7.         <thead>
  8.             <tr>
  9.                 <th>航向</th>
  10.                 <th>航班</th>
  11.                 <th>起飞时间</th>
  12.                 <th>航程</th>
  13.                 <th>票价</th>
  14.             </tr>
  15.         </thead>
  17.         <!-- 主体 -->
  18.         <!-- tbody>tr*5>td*5 -->
  19.         <tbody>
  20.             <tr>
  21.                 <!-- 垂直方向合并3个单元格 -->
  22.                 <td rowspan="3" bgcolor="cyan">来</td>
  23.                 <td>G9581</td>
  24.                 <td>8:00-14:00</td>
  25.                 <td>1765公里</td>
  26.                 <td>1800￥</td>
  27.             </tr>
  28.             <tr>
  29.                 <!-- <td>来</td> -->
  30.                 <td>G7158</td>
  31.                 <td>9:50-15:30</td>
  32.                 <td>1860公里</td>
  33.                 <td>2210￥</td>
  34.             </tr>
  35.             <tr>
  36.                 <!-- <td>来</td> -->
  37.                 <td>A4871</td>
  38.                 <td>11:10-16:40-</td>
  39.                 <td>1973公里</td>
  40.                 <td>2450￥</td>
  41.             </tr>
  42.             <tr>
  43.                 <!-- 垂直方向合并3个单元格 -->
  44.                 <td rowspan="2" bgcolor="lightgreen">返</td>
  45.                 <td>A3644</td>
  46.                 <td>13:05-20:40</td>
  47.                 <td>2100公里</td>
  48.                 <td>2768￥</td>
  49.             </tr>
  50.             <tr>
  51.                 <!-- <td>返</td> -->
  52.                 <td>A1647</td>
  53.                 <td>15:50-22:40</td>
  54.                 <td>2800公里</td>
  55.                 <td>3700￥</td>
  56.             </tr>
  59.             <!-- 表尾 -->
  60.             <!-- tfoot>tr>td*5 -->
  61.             <tfoot>
  62.                 <tr>
  63.                     <!--水平合并5个单元格-->
  64.                     <td colspan="5" bgcolor="red">注意事项:.........</td>
  65.                     <!-- <td></td>
  66.                     <td></td>
  67.                     <td></td>
  68.                     <td></td> -->
  69.                 </tr>
  70.             </tfoot>
  71.         </tbody>
  72.     </table>

效果示例

代码示例

更多相关文章

  1. android 拖动图片移动效果
  2. 记录代码合并时产生的bug
  3. Android(安卓)ApiDemos示例解析(178):Views->Lists->11. Multipl
  4. Android(安卓)用源代码写layout布局
  5. android图片拖动
  6. android实现自动关机代码
  7. SHA 的实现
  8. Android(安卓)Media Recorder录音播放源代码
  9. Android(安卓)GL_OUT_OF_MEMORY

随机推荐

  1. google 开发者自定义view的系列（创建view,
  2. Android之TelephonyManager类的使用案例
  3. Android studio 打包自定义命名apk
  4. Android Txt文本阅读器源码
  5. Material Design 之 Theme
  6. android不死服务的实现方法
  7. EditText失去焦点隐藏软键盘
  8. android弹出输入法时的模式
  9. Android通过HttpURLConnection上传多个文
  10. Android之手机振动的设置