search

博客列表 >12月9日作业

12月9日作业

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

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;
    10.           /* background-color: hotpink; */
    11.       }
    12.       label{
    13.           padding-right: 10px;
    15.       }
    16.       button{
    17.           margin-top: 10px;
    18.       }
    19.      .xueli{
    20.          text-align: left;
    21.          margin-left: 43px;
    22.      }
    23.      .beizhu{
    25.      }
    26.   </style>

    *运行结果

上一条：1209 作业(列表/表格与表单)下一条：mark down 教程之标题，段落，列表，区块，代码，链接，图片，表格，扩展
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多