表格和列表制作
16lz
2022-07-06
1.图文列表
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>yknb</title><style>table{border:15px solid gray;}th,td{border: 1px solid gray;}</style></head><body><ul"><li><a href="https://www.php.cn/course/837.html"><img src="https://img.php.cn/upload/course/000/000/068/625e5dfcbd1c6699.jpg" alt="这是一个前端项目" width="100">HTML教程</a></li><li><a href="https://www.php.cn/course/1039.html"><img src="https://img.php.cn/upload/course/000/000/068/62612317099e9449.jpg" alt="Python" width="100">Python教程</a></li><li><a href="https://www.php.cn/course/639.html"><img src="https://img.php.cn/upload/course/000/000/068/62611ef88fcec821.jpg" alt="PHP" width="100">PHP教程</a></li></ul></body></html>
2.导航组件
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>yknb</title><style>ul li{float: left;width: 100px;height: 30px;background-color:pinkborder： 1px solid 6495ED;text-align: center;line-height: 30px; }ulli:hover{background-color: aqua;}ul li:hover a{color: black;}</style></head><body><ul><li><a href="#">导航图片</a></li><li><a href="#">关于我们</a></li><li><a href="#">提出问题</a></li><li><a href="#">疑难解答</a></li></ul></body></html>
3.课程表
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>yknb</title><style>table{border:15px solid gray;}th,td{border: 1px solid gray;}</style></head><body><table ><caption>小学课程表</caption><thead style="background-color: green"><tr><th>时间</th><th>周一</th><th>周二</th><th>周三</th><th>周四</th><th>周五</th></tr></thead><tbody><tr><td rowspan="4">上午</td><td>数学</td><td>语文</td><td>语文</td><td>英语</td><td>体育</td></tr><tr><td>语文</td><td>法律</td><td>科学</td><td>数学</td><td>数学</td></tr><tr><td>音乐</td><td>语文</td><td>英语</td><td>电脑</td><td>数学</td></tr><tr><td>数学</td><td>数学</td><td>语文</td><td>语文</td><td>音乐</td></tr><tr><td colspan="6" style="text-align: center">中午休息</td></tr><tr><td rowspan="3">下午</td><td>数学</td><td>数学</td><td>语文</td><td>语文</td><td>音乐</td></tr><tr><td>数学</td><td>数学</td><td>语文</td><td>语文</td><td>音乐</td></tr><tr><td>数学</td><td>数学</td><td>语文</td><td>语文</td><td>音乐</td></tr></tbody><tfoot bground-color="back"><tr><td>备注：</td><td colspan="5">每天晚上必须写完作业回家</td></tr></tfoot></table></body></html>
4.购物车
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>yknb</title><style>table{border:15px solid gray;}th,td{border: 1px solid gray;}</style></head><body><table ><caption>我的购物车</caption><thead><tr><th>选购商品</th><th>价格</th><th colspan="3">介绍</th></tr></thead><tbody><tr><td>沐浴露</td><td>23</td><td colspan="3">xxx</td></tr><tr><td>洗发水</td><td>23</td><td colspan="3">xxx</td></tr><tr><td>护发素</td><td>23</td><td colspan="3">xxx</td></tr></tbody></table></table></body></html>
更多相关文章
- 2022年PHP学习课程表-表格与图文列表
- 图文列表导航组件以及表格制作
- 图片列表导航（附table课程表表格）
- 0704作业提交
- html制作课程表格代码（用HTML5标签设计课程表）
- CSS:表格的常用样式-复习
- 常用数组函数学习
- 图文列表与课程表的演示
- 字符串处理函数学习小结