图文列表导航组件以及表格制作

图文列表

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>图文列表导航组件</title>
  8. </head>
  9. <body>
  10.     <ul>
  11.         <li><a href="https://www.baidu.com" target="_blank">这个跳转到百度<img src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="这个跳转到百度" width="100"></a></li>
  12.         <hr>
  13.         <li><a href="https://www.php.cn" target="_blank">这个跳转到php中文网<img src="https://img.php.cn/upload/course/000/000/001/624e4c82a65d0931.jpg" alt="这个跳转到php中文网" width="100"></a></li>
  14.         <hr>
  15.         <li><a href="https://www.iqiyi.com" target="_blank">这个跳转到爱奇艺<img src="https://bizaladdin-image.baidu.com/0/pic/1924681018_-408011434_1449421733.jpg" alt="这个跳转到爱奇艺" width="100"></a></li>
  16.     </ul>
  17. </body>
  18. </html>

效果如下

  • 这个跳转到百度这个跳转到百度

  • 这个跳转到php中文网这个跳转到php中文网

  • 这个跳转到爱奇艺这个跳转到爱奇艺

课程表

源码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>课程表以及导航组件</title>
  8. </head>
  9. <body>
  10.     <style>
  11.         table,tbody,th,tr,td {border: 1px solid black;border-collapse: collapse;}
  12.         th{background-color: aquamarine;}
  13.     </style>
  14.     <table>
  15.         <caption>课    程    表</caption>
  16.         <thead>
  17.             <th>时间</th>
  18.             <th>星期一</th>
  19.             <th>星期二</th>
  20.             <th>星期三</th>
  21.             <th>星期四</th>
  22.             <th>星期五</th>
  23.             <th>星期六</th>
  24.             <th>星期日</th>
  25.         </thead>
  26.         <tbody>
  27.             <tr>
  28.                 <td rowspan="4" bgcolor="red">上午</td>
  29.                 <td>语文课</td>
  30.                 <td>语文课</td>
  31.                 <td>语文课</td>
  32.                 <td >语文课</td>
  33.                 <td >语文课</td>
  34.                 <td rowspan="8" colspan="2" bgcolor="grey">想干啥干啥</td>
  35.             </tr>
  36.             <tr>
  37.                 <td>语文课</td>
  38.                 <td>语文课</td>
  39.                 <td>语文课</td>
  40.                 <td>语文课</td>
  41.                 <td>语文课</td> 
  42.             </tr>
  43.             <tr>
  44.                 <td>语文课</td>
  45.                 <td>语文课</td>
  46.                 <td>语文课</td>
  47.                 <td>语文课</td>
  48.                 <td>语文课</td>
  49.             </tr>
  50.             <tr>
  51.                 <td>语文课</td>
  52.                 <td>语文课</td>
  53.                 <td>语文课</td>
  54.                 <td>语文课</td>
  55.                 <td>语文课</td>
  56.             </tr>
  57.             <tr>
  58.                 <td colspan="6" bgcolor="yellow"  style="text-align: center">午休时间</td>
  59.             </tr>
  60.             <tr>
  61.                 <td rowspan="3" bgcolor="green">下午</td>
  62.                 <td>语文课</td>
  63.                 <td>语文课</td>
  64.                 <td>语文课</td>
  65.                 <td>语文课</td>
  66.                 <td>语文课</td>
  67.             </tr>
  68.             <tr>
  69.                 <td>语文课</td>
  70.                 <td>语文课</td>
  71.                 <td>语文课</td>
  72.                 <td>语文课</td>
  73.                 <td>语文课</td>
  74.             </tr>
  75.             <tr>
  76.                 <td>语文课</td>
  77.                 <td>语文课</td>
  78.                 <td>语文课</td>
  79.                 <td>语文课</td>
  80.                 <td>语文课</td>
  81.             </tr>
  82.         </tbody>
  83.     </table>
  84. </body>
  85. </html>

>效果

课程表

更多相关文章

  1. html制作课程表格代码（用HTML5标签设计课程表）
  2. 使用APICloud AVM多端框架开发课程表功能
  3. 图文列表与课程表的演示
  4. Android多功能课程表项目实现（完整版）
  5. 简单实例：图文列表、表格（课程表）
  6. 图文列表和课程表
  7. Emmet插件使用和HTML知识及课程表作业
  8. 图文列表和课程表
  9. html中做图片,链接,列表,图文列表 及一个课程表

随机推荐

  1. Android BroadcastReceiver之开机监听
  2. 自定义Button形状（圆形、椭圆）
  3. [RxJava学习]observeOn源码分析
  4. Android欢迎页面自动跳转和触摸进入首页
  5. 比achartengine更加强大的Android图表控
  6. Android查看应用的最大可用内存及其使用
  7. 安卓漫漫路之碎片Fragment不同包下的区别
  8. android使用存储在assets文件夹中的Linux
  9. Android 实现多页界面左右滑动切换效果之
  10. 回调函数在Android监听机制中的体现