课程作业：

  1. 制作一个用户注册表单,将课堂上提到的表单控件全部用到;

  2. 理解css模块的思想,并试写一个案例(选做)

  3. 实例演示基本选择器与上下文选择器

  4. 预习伪类选择器与常用元素的css样式设置,盒模型知识等

课程内容：

1. 制作一个用户注册表单,将课堂上提到的表单控件全部用到;

1.1 作业效果：

1.2 实操代码：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>用户注册表</title>
  8.   </head>
  9.   <style>
  10.     div {
  11.       padding: 10px;
  12.     }
  13.   </style>
  14.   <body>
  15.     <h1>新用户注册登记表</h1>
  16.     <form action="" method="post">
  17.       <fieldset>
  18.         <legend>1.用户账号信息(必填):</legend>
  19.         <!-- 单行文本框 -->
  20.         <div>
  21.           <label for="username">注册账号:</label>
  22.           <input
  23.             type="text"
  24.             id="username"
  25.             autofocus
  26.             required
  27.             placeholder="必须是6-8位数"
  28.             maxlength="8"
  29.           />
  30.         </div>
  31.         <!-- 密码框 -->
  32.         <div>
  33.           <label for="password">用户密码:</label>
  34.           <input
  35.             type="password"
  36.             id="password"
  37.             required
  38.             placeholder="必须是字母+数字的组合"
  39.           />
  40.         </div>
  41.       </fieldset>
  42.       <fieldset>
  43.         <legend>2.其他个人信息</legend>
  44.         <!-- 单选框 -->
  45.         <div>
  46.           <label for="">性别:</label>
  47.           <input type="radio" name="gender" value="male" id="male" />
  48.           <label>男</label>
  49.           <input type="radio" name="gender" value="female" id="female" />
  50.           <label>女</label>
  51.           <input
  52.             type="radio"
  53.             name="gender"
  54.             value="secret"
  55.             id="secret"
  56.             checked
  57.           />
  58.           <label>保密</label>
  59.         </div>
  60.         <!-- 多选框 -->
  61.         <div>
  62.           <label for="">爱好:</label>
  63.           <!-- 因为允许同时提交多个值，所以name属性要写成数组格式 -->
  64.           <input type="checkbox" name="hobby[]" id="meishi" /><label
  65.             for="meishi"
  66.             >美食</label
  67.           >
  68.           <input type="checkbox" name="hobby[]" id="lvyou" /><label for="lvyou"
  69.             >旅游</label
  70.           >
  71.           <input type="checkbox" name="hobby[]" id="shuma" /><label for="shuma"
  72.             >数码</label
  73.           >
  74.           <input type="checkbox" name="hobby[]" id="biancheng" checked /><label
  75.             for="biancheng"
  76.             >编程</label
  77.           >
  78.         </div>
  79.         <!-- 下拉列表 -->
  80.         <div>
  81.           <label for="">目前的会员身份</label>
  82.           <select name="level" id="">
  83.             <option value="1" selected>不是会员</option>
  84.             <option value="2">初级会员</option>
  85.             <option value="3">中级会员</option>
  86.             <option value="4">高级会员</option>
  87.           </select>
  88.         </div>
  89.         <!-- 多行文本框 - 文本域 -->
  90.         <div>
  91.           <label for="jieshao">自我介绍:</label>
  92.           <textarea
  93.             name="jieshao"
  94.             id="jieshao"
  95.             cols="22"
  96.             rows="5"
  97.             placeholder="介绍一下你自己的经历"
  98.           ></textarea>
  99.         </div>
  100.       </fieldset>
  101.       <fieldset>
  102.         <legend>3.附件上传</legend>
  103.         <!-- 文件上传 -->
  104.         <div>
  105.           <label for="">照片上传:</label>
  106.           <input type="file" name="userimg" />
  107.           <input type="submit" value="点击上传图片" />
  108.         </div>
  109.       </fieldset>
  111.       <fieldset>
  112.         <legend>4.其他补充信息</legend>
  113.         <!-- 日期选择控件 -->
  114.         <div>
  115.           <label for="">生日日期:</label>
  116.           <input type="date" name="depart" />
  117.         </div>
  118.         <!-- 电子邮箱 -->
  119.         <div>
  120.           <label for="email">邮箱地址:</label>
  121.           <input
  122.             type="email"
  123.             name="email"
  124.             id="email"
  125.             placeholder="demo@xxx.com"
  126.           />
  127.         </div>
  128.         <!-- datalist 搜索框 自定义输入+预选 -->
  129.         <div>
  130.           <label for="">邀请人:</label>
  131.           <input type="search" name="search" list="my-key" />
  132.           <datalist id="my-key">
  133.             <option value="张三"></option>
  134.             <option value="李四"></option>
  135.             <option value="王五"></option>
  136.           </datalist>
  137.         </div>
  138.       </fieldset>
  139.       <div>
  140.         <input type="submit" name="touxiang" value="点击提交表单" />
  141.       </div>
  142.     </form>
  143.   </body>
  144. </html>

2. 理解css模块的思想,并试写一个案例(选做)

CSS模块化是为了使开发者更好的维护代码，同时根据实际的需求按需加载，减少负荷、提高效率，可以实现分区独立控制；

作业内容：

作业代码：

  • HTML页面代码：
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width= , initial-scale=1.0" />
  7.     <title>CSS模块化开发</title>
  8.     <link rel="stylesheet" href="css/style.css" />
  10.     <!-- 另外一种引入方式 -->
  11.     <!-- <style>
  12.       @import url(css/style.css);
  13.     </style> -->
  14.   </head>
  15.   <body>
  16.     <!-- 页头 -->
  17.     <header>
  18.       <!-- 导航栏 -->
  19.       <nav>
  20.         <ul>
  21.           <li>首页</li>
  22.           <li>博客</li>
  23.           <li>快讯</li>
  24.           <li>友链</li>
  25.           <li>关于</li>
  26.         </ul>
  27.       </nav>
  28.     </header>
  30.     <!-- 内容 -->
  31.     <main>
  32.       <p>
  33.         php中文网提供大量免费、原创、高清的php视频教程,并定期举行公益php培训!可边学习边在线修改示例代码,查看执行效果!php从入门到精通,一站式php自学平台!
  34.       </p>
  35.     </main>
  37.     <!-- 页脚 -->
  38.     <footer>
  39.       <ul>
  40.         <li>友情链接</li>
  41.         <li>关于我们</li>
  42.         <li>最新资讯</li>
  43.       </ul>
  44.     </footer>
  45.   </body>
  46. </html>

  • CSS文件代码4个

    • style.css 代码
  1. @import url(header.css);
  2. @import url(main.css);
  3. @import url(footer.css);
  • header.css \ main.css \ footer.css 代码
  1. footer {
  2.   background: green; 
  3. }

3. 实例演示基本选择器与上下文选择器

3.1 基本·选择器：

【标签】样式选择 - “ tag “

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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. </head>
  9. <body>
  10.     <div>
  11.         <p>标签选择器</p>
  12.     </div>
  13. </body>
  14. </html>

【属性】样式选择 - attribute

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>基本选择器作业实例</title>
  8.     <style>
  9.       /* 标签选择 */
  10.       p {
  11.         background: green;
  12.       }
  13.       /* 属性选择 */
  14.       li[id="1"] {
  15.         background: yellow;
  16.       }
  17.     </style>
  18.   </head>
  19.   <body>
  20.     <div>
  21.       <p class="content">标签选择器</p>
  22.       <ul>
  23.         <li id="1">属性选择器</li>
  24.         <li>class选择器</li>
  25.         <li>id选择器</li>
  26.       </ul>
  27.     </div>
  28.   </body>
  29. </html>

  • 【类】样式选择 - “ class “

  • 【id】样式选择 - “ id “

3.2 上下文·选择器：

【后代】选择器 - “空格Space”

【子】选择器 - “ > “

【同级相邻】选择器 - “ + “

【同级所有】选择器 - “ ~ “

4. 预习伪类选择器与常用元素的css样式设置,盒模型知识等

已预习

更多相关文章

  1. 图标使用、盒模型、box-sizing、百分比布局vm vh
  2. 前端作业-CSS1
  3. HTML表格实战：制作商品信息表格
  4. 0629作业
  5. 第二天 HTML标签与属性
  6. 前端作业-表单
  7. 注册表单练习
  8. 作业提交2021630
  9. 表单列表作业提交

随机推荐

  1. Windows7下使用Eclipse搭建Cocos2dx+Andr
  2. Android核心入门分析
  3. 获取Android SDK 源代码并在Eclipse中关
  4. Android(安卓)Activity 之 startActivity
  5. Android重温
  6. 腾讯Android面经
  7. Android中对同一个TextView设置不同字体
  8. 用 Golang 开发 Android 应用（六）—— Came
  9. 【10.0.1】ArcGIS Runtime for Android之
  10. android用户界面之Widget教程实例汇总