博客列表 >语义化元素、列表、表格框架联系

语义化元素、列表、表格框架联系

熊猫大侠
熊猫大侠原创
2020年05月21日 12:12:46505浏览

1语义化元素及列表

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>语义化元素联系</title>
  7. </head>
  8. <body>
  9. <header>
  10. <div class="nav">
  11. <a href="">网站首页</a>
  12. <a href="">找工作</a>
  13. <a href="">找人才</a>
  14. <a href="">招聘会</a>
  15. <a href="">纳职APP</a>
  16. <a href="">纳职公众号</a>
  17. </div>
  18. </header>
  19. <div class="container">
  20. <aside>
  21. <div class="ggw">广告位</div>
  22. <ul>
  23. <!-- 无序列表 -->
  24. <li>会员套餐</li>
  25. <li>图片展示</li>
  26. <li>会员权限</li>
  27. <li>展示案例</li>
  28. <li>自助在线</li>
  29. <!-- 有序列表 -->
  30. </ul>
  31. <ol>
  32. <li>知名企业A</li>
  33. <li>知名企业B</li>
  34. <li>知名企业c</li>
  35. <li>知名企业D</li>
  36. <li>知名企业E</li>
  37. </ol>
  38. </aside>
  39. <main>
  40. <div class="article">
  41. <h3 style="color: blueviolet; ">
  42. 专业的微信小程序招聘平台
  43. </h3>
  44. <p>你值得拥有,简单易操作</p>
  45. <p>打开微信,搜索纳职,快速找到</p>
  46. </div>
  47. </main>
  48. </div>
  49. <footer>
  50. <div class="links">
  51. <a href="">关于纳职</a>
  52. <a href="">企业文化</a>
  53. <a href="">联系我们</a>
  54. <a href="">在线客服</a>
  55. <a href="">加入QQ群</a>
  56. </div>
  57. </footer>
  58. </body>
  59. </html>

2.表格及框架

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>表格与框架</title>
  7. </head>
  8. <body>
  9. <table
  10. border="1"
  11. cellpadding="5"
  12. cellspacing="0"
  13. width="500"
  14. height="300"
  15. align="center"
  16. >
  17. <colgroup bgcolor="lightpink">
  18. <col />
  19. <col bgcolor="lightgreen" />
  20. <col bgcolor="yellow" span="2" />
  21. <col />
  22. <col />
  23. </colgroup>
  24. <!-- 表格标题 -->
  25. <caption style="font-size: 2rem; margin-bottom: 10px;">
  26. 纳职会员确认表
  27. </caption>
  28. <!-- 表示页面 -->
  29. <thead bgcolor="lightblue">
  30. <th>部门</th>
  31. <th>ID</th>
  32. <th>姓名</th>
  33. <th>职位</th>
  34. <th>电话</th>
  35. </thead>
  36. <!-- 表示主题 -->
  37. <tbody>
  38. <tr>
  39. <td rowspan="3" align="center">市场部</td>
  40. <td>101</td>
  41. <td>范建明</td>
  42. <td>主管</td>
  43. <td>15225825467</td>
  44. </tr>
  45. <tr>
  46. <!-- <td>市场部</td> -->
  47. <td>102</td>
  48. <td>黄耀武</td>
  49. <td>组长</td>
  50. <td>13925642245</td>
  51. </tr>
  52. <tr>
  53. <!-- <td>市场部</td> -->
  54. <td>103</td>
  55. <td>李倩倩</td>
  56. <td>精英</td>
  57. <td>13888882544</td>
  58. </tr>
  59. </tbody>
  60. <!-- 表格主题2 -->
  61. <tbody>
  62. <tr>
  63. <td rowspan="3" align="center">售后部</td>
  64. <td>201</td>
  65. <td>夏敏</td>
  66. <td>经理</td>
  67. <td>18745821546</td>
  68. </tr>
  69. <tr>
  70. <!-- <td>售后部</td> -->
  71. <td>202</td>
  72. <td>刘诗昆</td>
  73. <td>主管</td>
  74. <td>18988296526</td>
  75. </tr>
  76. <tr>
  77. <!-- <td>售后部</td> -->
  78. <td>303</td>
  79. <td>张凯丽</td>
  80. <td>组员</td>
  81. <td>17585422542</td>
  82. </tr>
  83. </tbody>
  84. <tfoot>
  85. <tr bgcolor="wheat">
  86. <td align="center">备注</td>
  87. <td colspan="4">欢迎大家加入纳职大家庭!!!!</td>
  88. </tr>
  89. </tfoot>
  90. </table>
  91. </body>
  92. </html>

一直没有交作业,主要是还没有理解过来,重复看了3遍视频,有点眉目了。昨天晚上自己开始写,不明白的地方参照了老师的笔记,终于写好了。第一次自己写的,还是有个别地方没有理解,需要继续再看视频消化。另外就是点击实时预览,跳出来5500找不到应用程序,百度了,之前的安装视频也看了,没有处理好。

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议