search

博客列表 >列表、链接、图片、表的使用

列表、链接、图片、表的使用

秋闲独醉
秋闲独醉原创
2022年07月05日 13:57:29388浏览

使用列表,链接, 图片等制作一个图文列表或导航组件 2. 使用表格元素制作课程表/购物车(二选一)

1、使用列表，链接，图片等制作一个图文列表

div.list>ol.nextList>li*3>a>img[src="images/list$.jpg" alt="这是一只"]

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.     <style>
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.       }
  13.       img {
  14.         padding-left: 20px;
  15.         padding-top: 20px;
  16.         width: 50px;
  17.         height: auto;
  18.       }
  19.     </style>
  20.   </head>
  21.   <body>
  22.     <!-- div.list>ol.nextList>li*3>a>img[src="image/list$.jpg"] -->
  23.     <div class="list">
  24.       <ol class="nextList">
  25.         <li>
  26.           <a href="#"><img src="images/list1.jpg" alt="这是一只老鼠" /></a>
  27.         </li>
  28.         <li>
  29.           <a href="#"><img src="images/list2.jpg" alt="这是一只企鹅" /></a>
  30.         </li>
  31.         <li>
  32.           <a href="#"><img src="images/list3.jpg " alt="这是一个精灵" /></a>
  33.         </li>
  34.       </ol>
  35.     </div>
  36.   </body>
  37. </html>

2、使用表格元素制作课程表

div.timetable>table[border="1"]>caption{三年级课程表}+(thead>tr>th{}*2+th{星期$}*5)+(tbody>tr*7>td*7)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.     <style>
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.       }
  13.       img {
  14.         padding-left: 20px;
  15.         padding-top: 20px;
  16.         width: 50px;
  17.         height: auto;
  18.       }
  19.       tr,
  20.       th,
  21.       td {
  22.         text-align: center;
  23.       }
  24.       table {
  25.       }
  26.     </style>
  27.   </head>
  28.   <body>
  29.     <!-- div.timetable>table[border="1"]>caption{三年级课程表}+(thead>tr>th{}*2+th{星期$}*5)+(tbody>tr*7>td*7) -->
  30.     <div class="timetable">
  31.       <table border="1">
  32.         <caption>
  33.           三年级课程表
  34.         </caption>
  35.         <thead>
  36.           <tr>
  37.             <th colspan="2">类别/时间</th>
  38.             <th>星期1</th>
  39.             <th>星期2</th>
  40.             <th>星期3</th>
  41.             <th>星期4</th>
  42.             <th>星期5</th>
  43.           </tr>
  44.         </thead>
  45.         <tbody>
  46.           <tr>
  47.             <td rowspan="4">上午</td>
  48.             <td>第一节</td>
  49.             <td>数学</td>
  50.             <td>语文</td>
  51.             <td>语文</td>
  52.             <td>英语</td>
  53.             <td>英语</td>
  54.           </tr>
  55.           <tr>
  56.             <td>第二节</td>
  57.             <td>语文</td>
  58.             <td>数学</td>
  59.             <td>英语</td>
  60.             <td>语文</td>
  61.             <td>语文</td>
  62.           </tr>
  63.           <tr>
  64.             <td>第三节</td>
  65.             <td>科学</td>
  66.             <td>英语</td>
  67.             <td>音乐</td>
  68.             <td>综合实践</td>
  69.             <td>体育</td>
  70.           </tr>
  71.           <tr>
  72.             <td>第四节</td>
  73.             <td>品德与社会</td>
  74.             <td>科学</td>
  75.             <td>数学</td>
  76.             <td>体育</td>
  77.             <td>美术</td>
  78.           </tr>
  79.           <tr>
  80.             <td rowspan="3">下午</td>
  81.             <td colspan="6">午间休息</td>
  82.           </tr>
  83.           <tr>
  84.             <td>第五节</td>
  85.             <td>综合实践</td>
  86.             <td>美术</td>
  87.             <td>信息技术</td>
  88.             <td>品德与社会</td>
  89.             <td>数学</td>
  90.           </tr>
  91.           <tr>
  92.             <td>第六节</td>
  93.             <td>数学</td>
  94.             <td>语文</td>
  95.             <td>体育</td>
  96.             <td>劳技</td>
  97.             <td>音乐</td>
  98.           </tr>
  99.         </tbody>
  100.       </table>
  101.     </div>
  102.   </body>
  103. </html>
上一条：Ubuntu20详细安装步骤下一条：如何用table表格标签制作课程表和用ul>li>a或ul>li>a>img实现文本、图片的超链接
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多