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

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

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

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

目录

前言

表格课后练习

网页标题：域标签的使用

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

网页标题：登录界面

网页标题：问卷调查

总结

---

前言

上一章的配套练习题~

---

表格课后练习

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

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

域标签fieldset的应用



	
账户信息
    用户名：

    密 码：

    确 认：




	
个人信息
    姓 名：

    单 位：

    职 位：

    职 称：

    手 机：

    邮 箱：


 

---

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

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

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

联系我们
  美家装饰客户支持中心服务于全国的最终客户和授权服务商，他们提供在线技术支持，供求查询，投诉受理，信息咨询等全方位的一站式服务，请发送邮件联系我们。


	

    	
发送邮件
        
 
    
    

    	
 
        
姓名：
        
*
    
    

    	
 
        
邮箱：
        
*
    
    

    	
 
        
网址：
        

    
    

    	
 
        
咨询产品：
        

        	
            	家庭家具
                办公家具
                酒店家具
            
        
    
    

    	
 
        
咨询类型：
        
投诉 供求查询 技术咨询 其他
    
   

   		
 
    	
咨询内容：
    	

    		请输入您咨询的问题……
    	
   
   

   		
 
        

        
 
   

 

---

• 网页标题：登录界面

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

  
用户登录
  

    

      
用户名：
        
        
      
      
密 码：
        
        
      
      

        
        
      
    
 

---

• 网页标题：问卷调查

• 功能要求：

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

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

• 界面设计

• 使用
  划分区域
• 使用CSS外部样式表定义样式question.css
  • 设置阴影的关键属性：box-shadow（P249）: 10px 10px 15px black;
  • 姓名、职业和练习电话后面的横线为文本框，设置文本框只有下框线，其余框线宽度均为0。

• 表单设计

• 使用
  形成表单区域
• 使用有序列表标签
  设计问题样式
  1. 使用标签的required属性实现单选框的非空验证

	
手机移动支付业务问卷调查
    

    
    

        
您的教育程度是？
        高中
        大专
        本科
        硕士研究生
        博士及以上
       
        
您的年龄段是？
        18岁以下
        18-25岁
        26-30岁
        31-35岁
        35岁以上
        
您是否使用过手机移动支付业务？
        从未听说过
        听说过，但未使用过
        偶尔使用
        经常使用
        
        
您了解以下哪些手机移动支付业务？（可多选）
        支付宝
        微信支付
        电信翼支付
        Apple Pay
        以上均不是
        
您看中以下哪些支付功能？（可多选）
        

              
              话费/游戏币充值
              

              
              刷手机加油
              

              
              刷手机购物
              

              
              刷手机乘坐公交/轻轨/地铁
              

              
              水电煤/有线电视/宽带远程缴费
              

              
              享受联盟商户的优惠折扣
              

              
              以上均不感兴趣
        
    
    您的姓名
    
     您的职业
    
     联系电话
    
    

    	
    
     

---

总结

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

---

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

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

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