位置: IT常识 - 正文

【Web前端基础】实验9 表单页面设计(web前端基本知识)

编辑:rootadmin
【Web前端基础】实验9 表单页面设计 项目1 参会注册表页面效果图:

推荐整理分享【Web前端基础】实验9 表单页面设计(web前端基本知识),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:web前端基础是什么,web前端快速入门,web前端基础知识点,web前端基础知识点总结,web前端基础知识点,web前端基础知识点总结,web前端零基础视频教学,web前端基础教程,内容如对您有帮助,希望把文章链接给更多的朋友!

要求:【Web前端基础】实验9 表单页面设计(web前端基本知识)

设计参会注册表页面。

HTML代码:<!DOCTYPE html><html lang='en'> <head> <meta charset="UTF-8"> <title>参会注册表</title> <style type="text/css"> body{text-align: center;} h1{ font-size: 25px; text-align: center; } .zhuce{ font-size: 14px; text-align: center; width: 550px; margin: 0 auto; background: #f7f7f7; } .zhuce td{ border: 1px solid #b4b4b4; padding:2px 3px; } .zhuce .ibg{ text-align: left; } .zhuce .bbg{ padding: 10px 0; font-size: 10px; } #bt{ width: 40px; height: 28px; } </style></head><body> <h1>参会注册表</h1> <form> <table class="zhuce"> <tr> <td colspan="4" class="ibg">姓名: <input name="txtName" type="text" > </td> <td colspan="4" class="ibg">单位: <input name="txtzhiwu" type="text" size="22"> </td> </tr> <tr> <td colspan="4" class="ibg">性别: <input type="radio" name="sex" value="male"/>男 <input type="radio" name="sex" value="female"/>女 </td> <td colspan="4" class="ibg">手机: <input name="txtshouji" type="text" size="10"> </td> </tr> <tr> <td colspan="4" class="ibg">酒店: <input type="radio" name="res" value="tianshan"/>天山大酒店 <input type="radio" name="res" value="kunlun"/>昆仑饭店 </td> <td class="ibg">预定酒店数: <input name="txtfangjianshu" type="text" size="1">套 </td> </tr> <tr> <td colspan="9" class="ibg"> 房间类型: <input type="radio" name="leixing" value="danren"/>单人间(320元) <input type="radio" name="leixing" value="shuangren"/>标准双人间(380元) <input type="radio" name="leixing" value="jiating"/>家庭套间(450元) </td> </tr> <tr> <td colspan="9" class="bbg"> <input id="bt" type="submit" name="btnOk" value="提交">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input id="bt" type="reset" ><br><br> </td> </tr> </table> </form></body></html>项目2 设计科技工作者建言页面页面效果图:

要求:

采用DIV、表格混合布局设计“留言板”页面。 其它两行的内容如下所示: 注:如果您的留言不便公开,请选择"保密"选项,提交后可凭系统反馈给您的留言编号、查询密码和您的姓名查询回复。 请遵守国家有关法律、法规,尊重网上道德,承担一切因您的行为而直接或间接引起的法律责任。 本网站拥有管理笔名和留言的一切权利。

HTML代码:<!DOCTYPE html><html lang='en'> <head> <meta charset="UTF-8"> <title>留言板设计</title> <style type="text/css"> *{ font-size:12px; } #div0{ width:800px; height:440px; border:5px solid #f3f3f2; margin:30px auto; padding:10px;} #div1{ background-color:#f2f9fd; color:#0000ff; width:100%; height:40px;} #div2{ background-color:#f2f9fd; color:#0000ff; width:100%; height:400px; margin-top: 3px;} #div2 .b1 {text-align: center;font-size: 12px;font-weight: bold;line-height: 22px;color: #339966;width: 100px;} #div1 .b1{ text-align: left; font-size: 26px; font-weight: bold; font-family: 黑体; color:#0033cc; width: 500px;} #div1 .b2{ text-align:left; font-size:12px; font-weight:bold; font-family: 黑体; color:#0033cc; width:200px;} </style></head><body> <div id="div0"> <div id="div1"> <table border="0" cellspacing="" cellpadding=""> <tr> <td class="b1">留言板</td> <td class="b2">科技工作者建言</td> </tr> </table> </div> <div id="div2"> <form action="" method=""> <table border="0" cellspacing="" cellpadding="" align="center" width="645px"> <tr> <td> <font size="" color="red">发表留言</font> </td> </tr> </table> <table border="" cellspacing="0" cellpadding="" align="center" bordercolor="white"> <tr> <td class="b1">姓&nbsp;&nbsp;&nbsp;&nbsp;名:</td> <td> <input type="text" id="" value="" name="name" size="10" /> </td> </tr> <tr> <td class="b1">电子邮件:</td> <td> <input type="text" id="" value="" name="e-mail" size="30" /> </td> </tr> <tr> <td class="b1">分&nbsp;&nbsp;&nbsp;&nbsp;类:</td> <td> <font size="" color="red"> 科技工作者建言 <input type="radio" name="bm" id="" value="" />不保密 <input type="radio" name="bbm" id="" value="" />保密 留言类型: </font> <select name="lx"> <option value="1" selected="selected"></option> <option value="2">投诉</option> <option value="3">咨询</option> <option value="4">建议</option> <option value="5">反馈</option> </select> </td> </tr> <tr> <td class="b1">留&nbsp;&nbsp;&nbsp;&nbsp;言:</td> <td> <textarea rows="6" cols="50"> </textarea> </td> </tr> <tr> <td colspan="2">注:如果您的留言不便公开,请选择"保密"选项,提交后可凭系统反馈给您的留言编号、查询密码和您的姓名查询回复。</td> </tr> <tr> <td colspan="2" align="center"> <input type="submit" name="" id="" value="提交" /> <input type="reset" name="" id="" value="清空" /> </td> </tr> <tr> <td colspan="2"> <ul> <li>请遵守国家有关法律、法规,尊重网上道德,承担一切因您的行为而直接或间接引起的法律责任。</li> <li>本网站拥有管理笔名和留言的一切权利。</li> </ul> </td> </tr> </table> </form> </div> </div></body></html>项目3 设计《大学生暑期社会实践调查问卷》页面效果图:

要求:

调查表前导语的内容如下所示: 大学生暑期社会实践调查问卷 亲爱的同学:大家好! 为了更好的了解人们对近年来计算机类专业填报火热现象的看法,特制定本问卷,希望得到您的配合,请认真阅读并回答以下问题,您的回答将直接影响本调查的可信度和有效性,真诚感谢您的支持,祝您天天愉快,谢谢!

调查表中其它内容: 1. 您的性别:男、女。 2. 您的学校: 3. 您的年级:6个选项,分别为“请用选择您的年级、大一、大二、大三、大四、大专”。 4. 报考该专业的原因: 7个复选框,复选框的内容分别为“自己感兴趣、对将来发展有利、适应社会、父母主张、老师建议、学校调剂、其他”。 5.您对该专业的建议: 5个复选框,复选框的内容分别为“招收时重质不重量、师资力量要改进、要更适应社会需要、加强专业实验室建设、其他”。 6.您认为该专业学生有必要参加社会实践: 3个单选按钮,单选按钮的内容分别为“有必要、没有必要、无所谓”。 7.您的父母是否赞成您读该专业: 3个单选按钮,单选按钮的内容分别为“很赞成,希望如此、一般,不是很高兴、不了解”。 8. 您对学校的建议: 1个5行100列的多选文本域,多选文本域初始内容为“请您提出宝贵的建议”。 版权区域的内容为“版权所有:计算机科学与技术系软件工程教研室copy right©2021-2025”。

HTML代码:<!DOCTYPE html><html lang='en'> <head> <meta charset="UTF-8"> <title>大学生暑期社会实践调查问卷</title> <style type="text/css"> body {background-color: #bbdcff;margin: 20px;}.bt1 {font-size: 35px;font-family: 黑体;color: #0033ff;line-height: 100px;text-align: center;}.td1 {font-size: 18px;font-weight: bold;color: #3300cc;}#p1 {text-indent: 2em;font-size: 16px;font-weight: bold;color: #3366ff;} </style></head><body background="#1054b9"> <form action="" method=""> <table border="14px" cellspacing="0" cellpadding="0" background="bgimags.jpg" width="850px" align="center" bordercolor="white"> <tr> <td class="bt1"> 大学生暑期社会实践调查问卷 </td> </tr> <tr> <td> <p id="p1">亲爱的同学:大家好!</p> <p id="p1">为了更好的了解人们对近年来计算机类专业填报火热现象的看法,特制定本问卷,希望得到您的配合,请认真阅读并回答以下问题,您的回答将直接影响本调查的可信度和有效性,真诚感谢您的支持,祝您天天愉快,谢谢!</p> </td> </tr> <tr> <td> <table border="0" cellspacing="" cellpadding=""> <tr> <td class="td1">1.您的性别:</td> <td> <input type="radio" name="sex" id="" value="" />男 <input type="radio" name="sex" id="" value="" />女 </td> </tr> </table> </td> </tr> <tr> <td> <table border="0" cellspacing="" cellpadding=""> <tr> <td class="td1">2.您的学校:</td> <td> <input type="text" id="" value="" size="40" /> </td> </tr> </table> </td> </tr> <tr> <td> <table border="0" cellspacing="" cellpadding=""> <tr> <td class="td1">3.您的年级:</td> <td> <select name="grade"> <option value="1">请选择您的年级:</option> <option value="2">大一</option> <option value="3">大二</option> <option value="4">大三</option> <option value="5">大四</option> <option value="6">大专</option> </select> </td> </tr> </table> </td> </tr> <tr> <td> <table border="0" cellspacing="" cellpadding=""> <tr> <td class="td1">4.报考该专业的原因:</td> </tr> <tr> <td> <input type="checkbox" name="" id="" value="" />自己感兴趣<br> <input type="checkbox" name="" id="" value="" />对将来发展有利<br> <input type="checkbox" name="" id="" value="" />适应社会<br> <input type="checkbox" name="" id="" value="" />父母主张<br> <input type="checkbox" name="" id="" value="" />老师建议<br> <input type="checkbox" name="" id="" value="" />学校调剂<br> <input type="checkbox" name="" id="" value="" />其他 </td> </tr> </table> </td> </tr> <tr> <td> <table border="0" cellspacing="" cellpadding=""> <tr> <td class="td1">5.您对该专业的建议: </td> </tr> <tr> <td> <input type="checkbox" name="" id="" value="" />招收时重质不重量<br> <input type="checkbox" name="" id="" value="" />师资力量要改进<br> <input type="checkbox" name="" id="" value="" />要更适应社会需要<br> <input type="checkbox" name="" id="" value="" />加强专业实验室建设<br> <input type="checkbox" name="" id="" value="" />其他 </td> </tr> </table> </td> </tr> <tr> <td> <table border="0" cellspacing="" cellpadding=""> <tr> <td class="td1">6.您认为该专业的学生有必要参加社会实践: </td> </tr> <tr> <td> <input type="radio" name="1" id="" value="" />有必要 <input type="radio" name="1" id="" value="" />没有必要 <input type="radio" name="1" id="" value="" />无所谓 </td> </tr> </table> </td> </tr> <tr> <td> <table border="0" cellspacing="" cellpadding=""> <tr> <td class="td1">7.您的父母是否赞成您读该专业: </td> </tr> <tr> <td> <input type="radio" name="2" id="" value="" />很赞成,希望如此 <input type="radio" name="2" id="" value="" />一般,不是很高兴 <input type="radio" name="2" id="" value="" />不了解 </td> </tr> </table> </td> </tr> <tr> <td> <table border="0" cellspacing="" cellpadding=""> <tr> <td class="td1">8.您对学校的建议:</td> </tr> <tr> <td><textarea rows="5" cols="100">请您提出宝贵的建议:</textarea></td> </tr> </table> </td> </tr> <tr height="50px"> <td align="center"> <input type="submit" id="" name="" value="提交答案" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="reset" name="" id="" value="清空" /> </td> </tr> <tr> <td height="40px" align="center" valign="middle"> <font size="" color="blue">版权区域的内容为“版权所有:计算机科学与技术系软件工程教研室copy right&copy;2015-2020</font> </td> </tr> </table> </form></body></html>
本文链接地址:https://www.jiuchutong.com/zhishi/290239.html 转载请保留说明!

上一篇:魁北克老城区的景色,加拿大 (© RENAULT Philippe/age fotostock)(魁北克老城区景点)

下一篇:基于Transformer的交通预测模型部分汇总【附源代码】(基于transformer的文本分类)

  • 怎么查看身份证绑定了几个qq(怎么查看身份证补办进度信息)

    怎么查看身份证绑定了几个qq(怎么查看身份证补办进度信息)

  • iphone11的微信锁怎么设置(苹果十一微信锁)

    iphone11的微信锁怎么设置(苹果十一微信锁)

  • vivoiqooz1指纹在哪里(vivoiq00z1指纹解锁)

    vivoiqooz1指纹在哪里(vivoiq00z1指纹解锁)

  • 微信支付密码如何修改(微信支付密码如何改成指纹密码)

    微信支付密码如何修改(微信支付密码如何改成指纹密码)

  • 微信的数据删除后有什么影响(微信的数据删除后有啥影响)

    微信的数据删除后有什么影响(微信的数据删除后有啥影响)

  • 新申请的微信号封了是什么情况(新申请的微信号一天可以加多少人)

    新申请的微信号封了是什么情况(新申请的微信号一天可以加多少人)

  • cpu的h是什么意思(cpu后缀字母h)

    cpu的h是什么意思(cpu后缀字母h)

  • 四代i7相当于几代i5(四代i7相当于几代i5 笔记本)

    四代i7相当于几代i5(四代i7相当于几代i5 笔记本)

  • 登别人美团会有提醒吗(登别人美团会有记录吗)

    登别人美团会有提醒吗(登别人美团会有记录吗)

  • commander能卸载吗(电脑commander可以卸载吗)

    commander能卸载吗(电脑commander可以卸载吗)

  • 怎样在文档里画横线(怎样在文档里画图)

    怎样在文档里画横线(怎样在文档里画图)

  • 怎么取消群待办(怎么取消群待办链接)

    怎么取消群待办(怎么取消群待办链接)

  • 屏幕总成不带框好换吗(屏幕总成不带框怎么解决边框问题)

    屏幕总成不带框好换吗(屏幕总成不带框怎么解决边框问题)

  • 512kbps等于多少兆(512kbps等于多少mb)

    512kbps等于多少兆(512kbps等于多少mb)

  • access数据库的结构层次(access数据库简介)

    access数据库的结构层次(access数据库简介)

  • 小米8可以使用双电信4g吗(小米8支持内存卡吗)

    小米8可以使用双电信4g吗(小米8支持内存卡吗)

  • 淘宝uv价值是什么意思(淘宝uv价值计算公式)

    淘宝uv价值是什么意思(淘宝uv价值计算公式)

  • 键盘上的锁屏键是哪个(键盘上的锁屏键怎么不管用)

    键盘上的锁屏键是哪个(键盘上的锁屏键怎么不管用)

  • 优活手环怎么打开充电(优活手环怎么打开蓝牙)

    优活手环怎么打开充电(优活手环怎么打开蓝牙)

  • 京东买家怎么撤销差评(京东怎么撤回退货申请)

    京东买家怎么撤销差评(京东怎么撤回退货申请)

  • 快手闪退怎么解决方法(快手闪退怎么解除)

    快手闪退怎么解决方法(快手闪退怎么解除)

  • 淘宝在哪填写入境身份证(淘宝宝贝信息填写)

    淘宝在哪填写入境身份证(淘宝宝贝信息填写)

  • 华为klw一tl00h是什么型号(华为kiw tl00h)

    华为klw一tl00h是什么型号(华为kiw tl00h)

  • s8+屏幕尺寸(s8是几寸屏幕)

    s8+屏幕尺寸(s8是几寸屏幕)

  • 互相宝是什么(互相宝都保什么)

    互相宝是什么(互相宝都保什么)

  • 抖音怎么挂小黄车(抖音怎么挂小黄车上链接)

    抖音怎么挂小黄车(抖音怎么挂小黄车上链接)

  • 微信删除评论对方知道吗(微信删除评论对方还能看到吗)

    微信删除评论对方知道吗(微信删除评论对方还能看到吗)

  • so-vits-svc3.0 中文详细安装、训练、推理使用教程(sovies)

    so-vits-svc3.0 中文详细安装、训练、推理使用教程(sovies)

  • 以旧换新销售商品
  • 个人所得税手续费返还要交企业所得税吗
  • 房产税土地使用税新政策消息2023
  • 个体工商户怎么注销
  • 企业代扣代缴个人所得税
  • 坏账准备需要计提成本吗
  • 未实际收到的投资收益要纳税调整吗
  • 本年利润结转在贷方表示什么意思
  • 其他综合收益损失
  • 汇算清缴期间费用社保填哪里
  • 递延收益是什么表
  • 开出银行汇票支付手续费
  • 企业清算时卖了车怎么办
  • 垫付了医药费保险报销时怎么办
  • 公司收到股东的投资款以后怎么处理
  • 从国外进口的免税商品
  • 商业汇票概念股票
  • 2018年建筑增值税税率表
  • 电子商务出纳的岗位职责
  • 企业所得税年报更正申报
  • 物业公司代收水费亏损谁承担
  • 企业转让无形资产要交增值税吗
  • 应付未付的营业收入
  • excel中在多个单原格中输入相同数据
  • 生育津贴的相关法律规定
  • win10系统如何禁用驱动强制签名
  • ipssvc.exe - ipssvc是什么进程 有什么作用
  • 局域网故障可能的原因
  • 进项税大于销项税怎么结转
  • 从国际空间站看木星
  • 珠穆朗玛峰的壮观
  • flex布局使用
  • coco2017数据集介绍
  • 股权投资准备的主要内容
  • 财政专户资金是专项资金吗
  • golang调用python代码
  • 前端技巧
  • 当月已入账可是未入账
  • 当月开的增值税发票当月能抵扣吗
  • redis的
  • mysql零基础入门教程完整
  • 企业研发费用可以抵税吗
  • 建筑企业营改增之前计税方法
  • 个人独资企业最新税收政策
  • sql优化的方法及思路
  • sql for in
  • 员工发放福利会计分录
  • 用库存现金支付职工医药费用69元,会计人员
  • 金税三期业务操作手册
  • 小公司没有财务软件怎么手工记账
  • 对公账户转私人账户
  • 新准则对企业的影响
  • 施工企业项目部发生的管理人员工资应计入
  • 注册公司认缴和实缴的风险区别
  • mysql数据加解密
  • window系统大全
  • 怎么取消win8.1开机密码
  • 2016年Win10 RedStone将重大改版 微软小娜可以浮动
  • win8查看已连接的wifi密码
  • win8.1无法关机怎么回事
  • 初学excel零基础教学视频
  • 有哪些好用的linux
  • 如何用python处理pdf
  • 简述jquery的实现原理
  • jquery移动端ui
  • node.js的安装方法
  • nodejs图片上传
  • js处理时间
  • 脚本 python
  • js 进阶
  • python os.walk遍历目录
  • 残疾人就业保障金什么时候申报缴纳
  • 国土局和地税局的区别
  • 固定资产评估增值的税务处理
  • 委托代销清单怎么写
  • 企业党支部怎么称呼
  • 小规模企业开通税务几天生效啊
  • 一手房有契税和个税吗
  • 城市维护建设税怎么算
  • 请问在哪里可以培训护工
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设