devbox
知新_RL
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

[HTML]Web前端开发技术16（HTML5、CSS3、JavaScript ）表格课后练习网页标题：域标签的使用网页标题：美家装饰联系我们网页标题：登录界面网页标题问卷调查——喵喵画网页

作者：知新_RL | 2024-02-16 13:08:01

赞

踩

[HTML]Web前端开发技术16（HTML5、CSS3、JavaScript ）表格课后练习网页标题：域标签的使用网页标题：美家装饰联系我们网页标题：登录界面网页标题问卷调查——喵喵画网页

希望你开心，希望你健康，希望你幸福，希望你点赞！

最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！

喵喵喵，你对我真的很重要！

目录

前言

表格课后练习

网页标题：域标签的使用

网页标题：美家装饰联系我们

网页标题：登录界面

网页标题：问卷调查

总结

前言

上一章的配套练习题~

表格课后练习

  • 网页标题：域标签的使用

  • 利用行内或内部样式表设置表单<form>的宽度为280px
  • 其中输入手机的文本框设置为number类型（该类型只能输入数字），输入邮箱的文本框设置为email类型（该类型能够识别邮箱格式是否正确）

  1.  
  2. <!doctype html>
  3. <html>
  4. <head>
  5. <meta charset="utf-8">
  6. <title>域标签的使用</title>
  7. <style type="text/css">
  8. 	input{
  9. 		font-family:"MS Serif", "New York", serif;
  10. 	}
  11. </style>
  12. </head>
  13.  
  14. <body>
  15. <h1>域标签fieldset的应用</h1>
  16. <hr>
  17. <form name="field" method="post" style="width:280px">
  18. <fieldset>
  19. 	<legend>账户信息</legend>
  20.     用户名：<input type="text" name="username"><br/>
  21.     密&emsp;码：<input type="password1" name="password"><br/>
  22.     确&emsp;认：<input type="password" name="password2">
  23. </fieldset>
  24. <br>
  25. <fieldset>
  26. 	<legend>个人信息</legend>
  27.     姓&emsp;名：<input type="text" name="name"><br/>
  28.     单&emsp;位：<input type="text" name="company"><br/>
  29.     职&emsp;位：<input type="text" name="position"><br/>
  30.     职&emsp;称：<input type="text" name="title"><br/>
  31.     手&emsp;机：<input type="number" name="phone"><br/>
  32.     邮&emsp;箱：<input type="email" name="email"><br/>
  33. </fieldset>
  34. <p style="width:280px" align="center"><input type="submit" value="提交">&emsp;<input type="reset" value="重置"></p>
  35. </form>
  36. </body>
  37. </html>

  • 网页标题：美家装饰联系我们

  • 主体部分的框架可参照如下代码：

<div id="container">

<h2></h2>

<p></p>

<form>

<table></table>

</form>

</div>

  • 利用css+表单+表格完成该网页的制作
  • 使用css将网页中外层盒子的宽度可设置为600px，相对于页面居中显示，1px 虚线黑色边框，内边距5px。
  • 表单名为connect，表单的提交方式设置为post，表单提交的网址设置为：http://localhost/testform
  • 其中有*标准的为必填内容
  • 咨询产品列表有：家庭家具、办公家具、酒店家具
  • 咨询类型默认选中“供求查询”
  • 发送按钮使用submit.gif图片为图片提交按钮
  • 其余效果参照效果图可自行设定
  • 表格格式可参考下图所示（其中红色虚线部分代表表单form的范围,内部黑色虚线代表表格及单元格边框线）

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>美家装饰联系我们</title>
  6. <style>
  7. #container{
  8. 	width:600px;
  9. 	margin:5px auto;
  10. 	padding:5px;
  11. 	border:1px dashed #000;
  12. }
  13. .tex{
  14. 	width:200px;
  15. }
  16. </style>
  17. </head>
  18.  
  19. <body>
  20. <div id="container">
  21. <h2>联系我们</h2>
  22. <p>&emsp;&emsp;美家装饰客户支持中心服务于全国的最终客户和授权服务商，他们提供在线技术支持，供求查询，投诉受理，信息咨询等全方位的一站式服务，请发送邮件联系我们。</p>
  23. <form name="connect" method="post" action="http://localhost/testform">
  24. <table>
  25. 	<tr>
  26.     	<th>发送邮件</th>
  27.         <th colspan="2">&nbsp;</th>
  28.     </tr>
  29.     <tr>
  30.     	<td>&nbsp;</td>
  31.         <td>姓名：</td>
  32.         <td><input type="text" name="name" class="tex">*</td>
  33.     </tr>
  34.     <tr>
  35.     	<td>&nbsp;</td>
  36.         <td>邮箱：</td>
  37.         <td><input type="text" name="name" class="tex">*</td>
  38.     </tr>
  39.     <tr>
  40.     	<td>&nbsp;</td>
  41.         <td>网址：</td>
  42.         <td><input type="text" name="name" value="http://" class="tex"></td>
  43.     </tr>
  44.     <tr>
  45.     	<td>&nbsp;</td>
  46.         <td>咨询产品：</td>
  47.         <td>
  48.         	<select>
  49.             	<option value="jiating">家庭家具</option>
  50.                 <option value="bangong">办公家具</option>
  51.                 <option value="jiudian">酒店家具</option>
  52.             </select>
  53.         </td>
  54.     </tr>
  55.     <tr>
  56.     	<td>&nbsp;</td>
  57.         <td>咨询类型：</td>
  58.         <td><input type="radio" value="tousu" name="leixing">投诉 <input type="radio" value="gx" name="leixing" checked>供求查询 <input type="radio" value="js" name="leixing">技术咨询 <input type="radio" value="other" name="leixing">其他</td>
  59.     </tr>
  60.    <tr>
  61.    		<td>&nbsp;</td>
  62.     	<td>咨询内容：</td>
  63.     	<td>
  64.     		<textarea cols="30" rows="3">请输入您咨询的问题……</textarea>
  65.     	</td>
  66.    </tr>
  67.    <tr>
  68.    		<td>&nbsp;</td>
  69.         <td><input type="image" src="images/submit.gif"></td>
  70.         <td>&nbsp;</td>
  71.    </tr>
  72. </table>
  73. </form> 
  74. </body>
  75. <div>
  76. </html>

  • 网页标题：登录界面

  • 要求使用CSS布局该登录表单界面，不能使用表格。
  • 全局格式可设置为：内外边距为0，宋体 12px，行高1.5em。
  • 外层盒子：相对于页面居中显示，宽280px，内边距14px边框线2px 虚线 #b7ddf2，背景颜色#ebf4fb。
  • 文本框和密码中的图片，可以设置为背景图像，不平铺显示在左侧中部的位置。文本框和密码的左内边距可设置为和图像的宽度值相等。
  • 注册按钮使用普通按钮类型。

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>无标题文档</title>
  6. <style>
  7. 	* {
  8. 	margin:0;
  9. 	padding:0;
  10. 	font-family:"宋体";
  11. 	font-size:12px;
  12. 	line-height:1.5em;
  13. }
  14. 	.login {
  15. 	margin:0 auto;
  16. 	width:280px;
  17. 	padding:14px;
  18. 	border: dashed 2px #b7ddf2;
  19. 	background:#ebf4fb;
  20. }
  21.  
  22. .login h2 {
  23. 	text-align:center;
  24. 	font-size:18px;
  25. 	font-weight:bold;
  26. 	margin-bottom:10px;
  27. 	padding-bottom:5px;
  28. 	border-bottom:solid 1px #b7ddf2;
  29. }
  30.  
  31. .login .content {
  32. 	padding:5px;
  33. }
  34. .login .frm_cont {
  35. 	margin-bottom:8px;
  36. 	font-size:14px;
  37. }
  38.  
  39. .login .username input, .login .password input {
  40. 	width:180px;
  41. 	height:18px;
  42. 	padding:2px 0px 2px 18px;
  43. 	border:solid 1px #aacfe4;
  44. }
  45.  
  46. .login .username input {
  47. 	background:#FFF url(images/username_bg.jpg) no-repeat left center;
  48. }
  49.  
  50. .login .password input {
  51. 	background:#FFF url(images/password_bg.jpg) no-repeat left center;
  52. }
  53.  
  54. .login .btns {
  55. 	text-align:center;
  56. }
  57. #button1,#button2{
  58. 	font-size:14px;
  59. 	width:50px;
  60. }
  61. </style>
  62. </head>
  63.  
  64. <body>
  65. <div class="login">
  66.   <h2>用户登录</h2>
  67.   <div class="content">
  68.     <form action="" method="post">
  69.       <div class="frm_cont username">用户名：
  70.         <label for="username"></label>
  71.         <input type="text" name="username" id="username" />
  72.       </div>
  73.       <div class="frm_cont password">密&emsp;码：
  74.         <label for="password"></label>
  75.         <input type="password" name="password" id="password" />
  76.       </div>
  77.       <div class="btns">
  78.         <input type="submit" name="button1" id="button1" value="登录" />
  79.         <input type="button" name="button2"id="button2" value="注册" />
  80.       </div>
  81.     </form>
  82.  </div>
  83. </div>
  84. </body>
  85. </html>

1. 用户可以根据调查问题进行单选、多选以及在结尾处填写姓名、职位和联系电话等信息。

2. 用户在点击按钮提交信息时可以验证姓名、职业和联系电话是必填项。

  • 界面设计
  • 使用<div>划分区域
  • 使用CSS外部样式表定义样式question.css
    • 设置阴影的关键属性：box-shadow（P249）: 10px 10px 15px black;
    • 姓名、职业和练习电话后面的横线为文本框，设置文本框只有下框线，其余框线宽度均为0。
  • 表单设计
  • 使用<form>形成表单区域
  • 使用有序列表标签<ol>设计问题样式
  • 使用<input>标签的required属性实现单选框的非空验证

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>问卷调查</title>
  6. <link rel="stylesheet" href="CSS/question.css">
  7. </head>
  8.  
  9. <body>
  10. <div id="container">
  11. 	<h1>手机移动支付业务问卷调查</h1>
  12.     <hr/>
  13.     <form method="post" action="#">
  14.     <ol>
  15.         <li>您的教育程度是？</li>
  16.         <input type="radio" id="gz" name="education" value="gz"><label for="gz">高中</label>
  17.         <input type="radio" id="dz" name="education" value="dz"><label for="dz">大专</label>
  18.         <input type="radio" id="bk" name="education" value="bk"><label for="bk">本科</label>
  19.         <input type="radio" id="sy" name="education" value="sy"><label for="sy">硕士研究生</label>
  20.         <input type="radio" id="bs" name="education" value="bs"><label for="bs">博士及以上</label>
  21.        
  22.         <li>您的年龄段是？</li>
  23.         <input type="radio" id="18" name="age" value="18"><label for="18">18岁以下</label>
  24.         <input type="radio" id="25" name="age" value="25"><label for="25">18-25岁</label>
  25.         <input type="radio" id="30" name="age" value="30"><label for="30">26-30岁</label>
  26.         <input type="radio" id="35" name="age" value="35"><label for="35">31-35岁</label>
  27.         <input type="radio" id="36" name="age" value="36"><label for="36">35岁以上</label>
  28.         <li>您是否使用过手机移动支付业务？</li>
  29.         <input type="radio" id="no" name="use" value="no"><label for="no">从未听说过</label>
  30.         <input type="radio" id="no1" name="use" value="no1"><label for="no1">听说过，但未使用过</label>
  31.         <input type="radio" id="st" name="use" value="st"><label for="st">偶尔使用</label>
  32.         <input type="radio" id="jc" name="use" value="jc"><label for="jc">经常使用</label>
  33.         
  34.         <li>您了解以下哪些手机移动支付业务？（可多选）</li>
  35.         <input type="checkbox" name="zfb" id="zfb" value="zfb"><label for="zfb">支付宝</label>
  36.         <input type="checkbox" name="wx" id="wx" value="wx"><label for="wx">微信支付</label>
  37.         <input type="checkbox" name="dx" id="dx" value="dx"><label for="dx">电信翼支付</label>
  38.         <input type="checkbox" name="app" id="app" value="app"><label for="app">Apple Pay</label>
  39.         <input type="checkbox" name="ne" id="ne" value="ne"><label for="ne">以上均不是</label>
  40.         <li>您看中以下哪些支付功能？（可多选）</li>
  41.         <p>
  42.               <input type="checkbox" name="hf" id="hf" value="hf">
  43.               <label for="hf">话费/游戏币充值</label>
  44.               <br>
  45.               <input type="checkbox" name="sj" id="sj" value="sj">
  46.               <label for="sj">刷手机加油</label>
  47.               <br>
  48.               <input type="checkbox" name="gw" id="gw" value="gw">
  49.               <label for="gw">刷手机购物</label>
  50.               <br>
  51.               <input type="checkbox" name="gj" id="gj" value="gj">
  52.               <label for="gj">刷手机乘坐公交/轻轨/地铁</label>
  53.               <br>
  54.               <input type="checkbox" name="sd" id="sd" value="ne">
  55.               <label for="sd">水电煤/有线电视/宽带远程缴费</label>
  56.               <br>
  57.               <input type="checkbox" name="yh" id="yh" value="sd">
  58.               <label for="yh">享受联盟商户的优惠折扣</label>
  59.               <br>
  60.               <input type="checkbox" name="ns" id="ns" value="ns">
  61.               <label for="ns">以上均不感兴趣</label>
  62.         </p>
  63.     </ol>
  64.     <label for="name">您的姓名</label>
  65.     <input type="text" name="name" id="name" class="text" required>
  66.      <label for="zy">您的职业</label>
  67.     <input type="text" name="zy" id="zy" class="text" required>
  68.      <label for="tel">联系电话</label>
  69.     <input type="text" name="tel" id="tel"  class="text" required>
  70.     <div id="btn">
  71.     	<input type="submit" value="提交问卷" name="sub" class="subt">
  72.     </div>
  73.     </form> 
  74. </div>
  75. </body>
  76. </html>

总结

完啦，建立自信的最好方法就是多多练习~

希望你开心，希望你健康，希望你幸福，希望你点赞！

最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！

喵喵喵，你对我真的很重要！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/93570
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号