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:pink border： 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>
