练习列表+链接+图片实现图文列表

页面效果如下：

演示代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>演示链接+图片+列表实现图文列表</title>
  7.     <style>
  8.         ul{
  9.             display: flex; /*实现弹性布局*/
  10.             list-style: none; /*去掉小黑点*/
  11.         }
  12.         li{
  13.             border: 1px blue solid;
  14.             margin: 10px 10px;
  15.         }
  16.         img{
  17.             width: 300px;
  18.             height: 300px;
  19.         }
  22.     </style>
  23. </head>
  24. <body>
  25.     <div class="dome">
  26.          <ul>
  27.             <li>
  28.                 <a href="https://www.baidu.com/">
  29.                     <img src="https://t14.baidu.com/it/u=3871151578,586465891&fm=179&app=42&size=w621&n=0&f=PNG?s=56F72C72CCB47E904B7DA3C40300A026&sec=1647882000&t=0d19c31b9a75e4275880d1b02a2c2516" alt="去百度">
  30.                 </a>
  31.             </li>
  32.             <li>
  33.                 <a href="https://www.php.cn/">
  34.                     <img  src="https://img.php.cn/upload/article/000/000/001/6231cfa90db5f304.jpg" alt="去php中文网">
  35.                 </a>
  36.             </li>
  37.             <li>
  38.                 <a href="https://v.qq.com/">
  39.                     <img src="https://t7.baidu.com/it/u=194876691,407914925&fm=85&app=131&size=f242,150&n=0&f=JPEG&fmt=auto?s=B124D4128BB16C884ECD49C60000D0F2&sec=1647882000&t=5a66f6877941bc38854b26a0af80fcc4" alt="去腾讯视频官网">
  40.                 </a>
  41.             </li>
  42.         </ul>
  43.     </div>
  45. </body>
  46. </html>

练习表格

页面效果如下：

代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>练习表格</title>
  7. </head>
  8. <body>
  9.     <table border>
  10.         <caption>实现人生自由表</caption>
  11.         <thead>
  12.             <tr>
  13.                 <td>***</td>
  14.                 <td>星期一</td>
  15.                 <td>星期二</td>
  16.                 <td>星期三</td>
  17.                 <td>星期四</td>
  18.                 <td>星期五</td>
  19.             </tr>
  20.         </thead>
  21.         <tbody>
  22.             <tr>
  23.                 <td>早上</td>
  24.                 <td>多吃</td>
  25.                 <td>多吃</td>
  26.                 <td>多吃</td>
  27.                 <td>多吃</td>
  28.                 <td>多吃</td>
  29.             </tr>
  30.             <tr>
  31.                 <td>中午</td>
  32.                 <td>躺平</td>
  33.                 <td>躺平</td>
  34.                 <td>躺平</td>
  35.                 <td>躺平</td>
  36.                 <td>躺平</td>
  37.             </tr>
  38.             <tr>
  39.                 <td>晚上</td>
  40.                 <td>运动</td>
  41.                 <td>运动</td>
  42.                 <td>运动</td>
  43.                 <td>运动</td>
  44.                 <td>运动</td>
  45.             </tr>
  46.         </tbody>
  48.     </table>
  50. </body>
  51. </html>

更多相关文章

  1. HTML图片列表及表格制作课程表
  2. 表格/图片/链接/列表
  3. Android应用开发——TextView控件属性列表
  4. HTML图文列表
  5. 图文列表与课程表代码实现
  6. HTML入门学习之表格制作课程表实战练习
  7. 图文列表与课程表
  8. 图文列表和表格（商品表）
  9. 表格/图片/链接/列表

随机推荐

  1. 有关在线文件的文章推荐10篇
  2. 详解用MicroService4Net 创建一个微服务
  3. asp.net core实例教程之异常处理与静态文
  4. 总结关于winfrom注意点
  5. 总结.Net MVC实现长轮询实例
  6. asp.net core实例教程之如何设置中间件
  7. 关于接口类型的10篇课程推荐
  8. 用微信PC端dll库实现截图的实例代码
  9. asp.net core实例教程之项目结构
  10. 有关ListView的文章推荐10篇