Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 想躺平的第二天
Blogger Information
Blog 17
fans 0
comment 0
visits 8270
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
想躺平的第二天
想做一个躺平的程序员
Original
532 people have browsed it

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

页面效果如下：

演示代码如下：

  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>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：标题名字稍微改一下，符合文章内容即可，方便后续复习
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post