简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 列表、链接、图片、表的使用
Blogger Information
Blog 37
fans 0
comment 0
visits 14221
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
387 people have browsed it

使用列表,链接, 图片等制作一个图文列表或导航组件 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>
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！