博客列表 >12月9日作业

12月9日作业

A瞌睡虫
A瞌睡虫原创
2020年12月10日 15:24:11438浏览

12月9日作业

有序列表.无序列表和.自定义列表

  • 有序列表

    无序列表
    是用ul标签定义无序列表加li列组成
    示例:

    1. <ul>
    2. <li>张三</li>
    3. <li>李四</li>
    4. <li>王麻子</li>
    5. <li>赵大锤</li>
    6. </ul>
  • 无序列表

    有序列表
    是用ol标签定义有序列表加li列组成
    示例:

    1. <ol>
    2. <li>早餐</li>
    3. <li>午餐</li>
    4. <li>晚餐</li>
    5. <li>夜宵</li>
    6. <li>夜场</li>
    7. </ol>
  • 自定义列表

    是用dl标签定义自定义列表,用dt创建一级列表,dd创建下级列表
    示例:

    1. <dl>
    2. <dt>陕西</dt>
    3. <dd>西安</dd>
    4. <dd>咸阳</dd>
    5. <dt>河南</dt>
    6. <dd>郑州</dd>
    7. <dd>驻马店</dd>
    8. </dl>
  • 应用场景

    导航
    示例:

    1. <ul class="menu">
    2. <li><a href="">首页</a> </li>
    3. <li><a href="">教学视频</a> </li>
    4. <li><a href="">社区问答</a> </li>
    5. <li><a href="">资料下载</a> </li>
    6. <li><a href="">登录</a> </li>
    7. </ul>

    图片列表
    示例:

    1. <ul class="list">
    2. <li>
    3. <a href=""></a><img src="https://img.php.cn/*.jpg" alt="图片" width="200px"></a>
    4. </li>
    5. </ul>

表格

  • 表格的组成

    表格标题
    示例:
    <caption>商品信息表</caption>
    表格表头
    示例:
    <thead>

    1. <tr>
    2. <th>序号</th>
    3. <th>品名</th>
    4. <th>数量</th>
    5. <th>重量</th>
    6. <th>单价</th>
    7. <th>总价</th>
    8. </tr>

    </thead>
    表格内容
    示例:
    <tbody>

    1. <tr>
    2. <td>1</td>
    3. <td>黄瓜</td>
    4. <td>10</td>
    5. <td>1</td>
    6. <td>2.00</td>
    7. <td>2.00</td>
    8. </tr>
    9. <tr>
    10. <td>2</td>
    11. <td>西红柿</td>
    12. <td>10</td>
    13. <td>1</td>
    14. <td>2.00</td>
    15. <td>2.00</td>
    16. </tr>
    17. <tr>
    18. <td>3</td>
    19. <td>大白菜</td>
    20. <td>10</td>
    21. <td>1</td>
    22. <td>2.00</td>
    23. <td>2.00</td>
    24. </tr>
    25. </tbody>

    课程表实例

  • 示例代码

    1. <title>课程表</title>
    2. </head>
    3. <body>
    4. <table border="1px" cellpandding=0 cellspacing=0>
    5. <caption>合肥市第三十六小学课程表</caption>
    6. <thead>
    7. <tr>
    8. <th colspan="2"></th>
    9. <!-- <th></th> -->
    10. <th>星期一</th>
    11. <th>星期二</th>
    12. <th>星期三</th>
    13. <th>星期四</th>
    14. <th>星期五</th>
    15. </tr>
    16. </thead>
    17. <tbody>
    18. <tr>
    19. <td rowspan="4" class="sw">上午</td>
    20. <td>1</td>
    21. <td>数学</td>
    22. <td>语文</td>
    23. <td>语文</td>
    24. <td>语文</td>
    25. <td>数学</td>
    26. </tr>
    27. <tr>
    28. <!-- <td>上午</td> -->
    29. <td>2</td>
    30. <td>语文</td>
    31. <td>语文</td>
    32. <td>音乐</td>
    33. <td>科学</td>
    34. <td>美术</td>
    35. </tr>
    36. <tr>
    37. <!-- <td>上午</td> -->
    38. <td>3</td>
    39. <td>语文</td>
    40. <td>美术</td>
    41. <td>数学</td>
    42. <td>数学</td>
    43. <td>语文</td>
    44. </tr>
    45. <tr>
    46. <!-- <td>上午</td> -->
    47. <td>4</td>
    48. <td>科学</td>
    49. <td>数学</td>
    50. <td>语文</td>
    51. <td>体育</td>
    52. <td>道法</td>
    53. </tr>
    54. <tr>
    55. <td colspan="7" class="zw">中午休息</td>
    56. </tr>
    57. <tr>
    58. <td rowspan="3" class="xw">下午</td>
    59. <td>5</td>
    60. <td>数学</td>
    61. <td>语文</td>
    62. <td>语文</td>
    63. <td>语文</td>
    64. <td>数学</td>
    65. </tr>
    66. <tr>
    67. <!-- <td>下午</td> -->
    68. <td>6</td>
    69. <td>语文</td>
    70. <td>语文</td>
    71. <td>音乐</td>
    72. <td>科学</td>
    73. <td>美术</td>
    74. </tr>
    75. <tr>
    76. <!-- <td>下午</td> -->
    77. <td>7</td>
    78. <td>课外活动</td>
    79. <td colspan="4">各班自行组织,自愿参加</td>
    80. <!-- <td></td>
    81. <td></td>
    82. <td></td> -->
    83. </tr>
    84. </tbody>
    85. </table>
    86. <style>
    87. table{
    88. width: 600px;
    89. height: 300px;
    90. text-align: center;
    91. }
    92. thead{
    93. background-color: rgb(229, 250, 244);
    94. }
    95. .sw{
    96. background-color: aquamarine;
    97. }
    98. .xw{
    99. background-color: aquamarine;
    100. }
    101. .zw{
    102. background-color: #cccccc;
    103. }
    104. caption{
    105. height: 35px;
    106. }
    107. </style>
  • 运行结果

    表单-文本框

  • 代码示例

    1. <title>表单</title>
    2. </head>
    3. <body>
    4. <div class="bk">
    5. <h3 class="title">用户注册</h3>
    6. <!-- action:处理表单的程序 -->
    7. <!-- method:表单的提交类型 -->
    8. <!-- 默认为get:数据直接放在URL地址中 -->
    9. <!-- POST:表单的数组在表头体重 -->
    10. <form action="" method="POST" enctype="multipart/form-data">
    11. <label for="username">账号:</label>
    12. <!-- type:控件类型 -->
    13. <!-- name:数据的变量名 -->
    14. <!-- value:数据的内容 -->
    15. <input type="text" id="username" name="username" value="" placeholder="请输入账号" required><br />
    16. <label for="mail">邮箱:</label>
    17. <input type="mail" id="mail" name="mail" value="" placeholder="请输入邮箱" required><br />
    18. <label for="pass">密码:</label>
    19. <input type="password" id="pass" name="pass" value="" placeholder="请输入密码" required><br />
    20. <label for="baomi">性别:</label>
    21. <input type="radio"" name="xb" value="nan" id="nan"><label for=""></label>
    22. <input type="radio"" name="xb" value="nv" id="nv"><label for=""></label>
    23. <input type="radio"" name="xb" value="baomi" id="baomi" checked><label for="">保密</label>
    24. <br />
    25. <label for="">兴趣爱好:</label>
    26. <input type="checkbox" name="xingqu" value="youxi" id="youxi"><label for="">游戏</label>
    27. <input type="checkbox" name="xingqu" value="dianying"" id="dianying" checked><label for="">电影</label>
    28. <input type="checkbox" name="xingqu" value="shipin" id="shipin"><label for="">游戏</label>
    29. <br/>
    30. <div class="xueli">
    31. <label for="">学历:</label>
    32. <select name="xueli" id="xueli">
    33. <option value="1">初中</option>
    34. <option value="2">高中</option>
    35. <option value="3" selected>本科</option>
    36. <option value="4">研究生</option>
    37. </select>
    38. </div>
    39. <br>
    40. <label for="">备注:</label>
    41. <textarea name="beizhu" id="beizu" cols="15" rows="5"></textarea>
    42. <br />
    43. <!-- 提交按钮 -->
    44. <button>提交</button>
    45. </form>
    46. </div>
    1. <style>
    2. .bk{
    3. border: 1px solid #cccccc;
    4. width: 300px;
    5. height: 350px;
    6. text-align: center;
    7. margin: 50px auto;
    8. background-color: lightblue;
    9. /* background-color: hotpink; */
    10. }
    11. label{
    12. padding-right: 10px;
    13. }
    14. button{
    15. margin-top: 10px;
    16. }
    17. .xueli{
    18. text-align: left;
    19. margin-left: 43px;
    20. }
    21. .beizhu{
    22. }
    23. </style>

    *运行结果

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