练习列表+链接+图片实现图文列表
页面效果如下：
演示代码如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>演示链接+图片+列表实现图文列表</title><style>ul{display: flex; /*实现弹性布局*/list-style: none; /*去掉小黑点*/}li{border: 1px blue solid;margin: 10px 10px;}img{width: 300px;height: 300px;}</style></head><body><div class="dome"><ul><li><a href="https://www.baidu.com/"><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="去百度"></a></li><li><a href="https://www.php.cn/"><img src="https://img.php.cn/upload/article/000/000/001/6231cfa90db5f304.jpg" alt="去php中文网"></a></li><li><a href="https://v.qq.com/"><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="去腾讯视频官网"></a></li></ul></div></body></html>
练习表格
页面效果如下：
代码如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>练习表格</title></head><body><table border><caption>实现人生自由表</caption><thead><tr><td>***</td><td>星期一</td><td>星期二</td><td>星期三</td><td>星期四</td><td>星期五</td></tr></thead><tbody><tr><td>早上</td><td>多吃</td><td>多吃</td><td>多吃</td><td>多吃</td><td>多吃</td></tr><tr><td>中午</td><td>躺平</td><td>躺平</td><td>躺平</td><td>躺平</td><td>躺平</td></tr><tr><td>晚上</td><td>运动</td><td>运动</td><td>运动</td><td>运动</td><td>运动</td></tr></tbody></table></body></html>