当前位置: 首页 > news >正文

html+CSS部分基础运用9

项目1  参会注册表

1.设计参会注册表页面,效果如图9-1所示。

9-1 参会注册表页面

项目2  设计《大学生暑期社会实践调查问卷

1.设计“大学生暑期社会实践调查问卷”页面,如图9-2所示。

9-2 大学生暑期社会调查表页面

2.调查表前导语的内容如下所示:

大学生暑期社会实践调查问卷

亲爱的同学:大家好!

    为了更好的了解人们对近年来计算机类专业填报火热现象的看法,特制定本问卷,希望得到您的配合,请认真阅读并回答以下问题,您的回答将直接影响本调查的可信度和有效性,真诚感谢您的支持,祝您天天愉快,谢谢!

3.调查表中其它内容:

1. 您的性别:男、女。

2. 您的学校:

3. 您的年级:6个选项,分别为“请用选择您的年级、大一、大二、大三、大四、大专”。

4. 报考该专业的原因: 7个复选框,复选框的内容分别为“自己感兴趣、对将来发展有利、适应社会、父母主张、老师建议、学校调剂、其他”。

5.您对该专业的建议: 5个复选框,复选框的内容分别为“招收时重质不重量、师资力量要改进、要更适应社会需要、加强专业实验室建设、其他”。

6.您认为该专业学生有必要参加社会实践: 3个单选按钮,单选按钮的内容分别为“有必要、没有必要、无所谓”。

7.您的父母是否赞成您读该专业: 3个单选按钮,单选按钮的内容分别为“很赞成,希望如此、一般,不是很高兴、不了解”。

8. 您对学校的建议: 1个5行100列的多选文本域,多选文本域初始内容为“请您提出宝贵的建议”。

版权区域的内容为“版权所有:计算机科学与技术系软件工程教研室copy right©2021-2025”。

项目1

<!DOCTYPE html>

<html lang="en">

    <head>

        <title>参会注册表</title>

        <meta charset="utf-8">

        <style>

            p{

                text-align: center;

            }

            table{

                text-align: left;

               

            }

            #a{

                text-align: center;

            }

        </style>

    </head>

    <body>

        <form name="">

           

            <table   align="center" border="1" width="60%">

                <caption>参会注册表</caption>

                <tr>

                      <td>姓名:<input type="text" maxlength="10" size="10"/></td>

                      <td>单位:<input type="text" maxlength="50" size="45"/></td>

                </tr>

                <tr>

                     <td>性别: <input name="sex" value="male" checked="checked" type="radio"/>男性

                                <input name="sex" value="female" checked="checked" type="radio"/>女性</td>

                     <td>手机:<input type="text" size="18"/></td>

                </tr>

                <tr>

                     <td >酒店:<input type="radio" name="c1" value="male" checked="checked" >天山大酒店

                              <input type="radio" name="c1" value="female" checked="checked" >昆仑大酒店</td>

                     <td>预定房间数:<input type="text" maxlength="8"></td>

                </tr>

                <tr>

                    <td colspan="4">

                        房间类型:<input type="radio" name="c2" value="female" checked="checked">单人间(320元)

                                  <input type="radio" name="c2" value="female" checked="checked">标价双人间(380元)

                                  <input type="radio" name="c2" value="female" checked="checked">家庭套间(450元)

                    </td>

                </tr>

                <tr>

                    <td colspan="2" id="a"> <input type="reset" name="reset" value="重置"/>

                         <input type="submit" name="submit" value="提交"/>

                    </td>

                </tr>

            </table>

        </form>

    </body>

</html>

项目2

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>大学生暑期社会实践调查问卷</title>

    <style>

        #div0{background-color: white; width: 50%;margin: auto; }

        ul{list-style: none;padding: 0;color: black;}

        h1{text-align: center;}

        form{ background: url(bgimags.jpg); padding-right: 10px; padding-left: 10px;}

        body{font-family: "楷体";color: blue;font-size: 18px}

    </style>

</head>

<body background="bgimags.jpg">

    <div id="div0">

        <form action="">

            <table align="center" border="1px" frame="void">

                <tr>

                    <td><h1>大学生暑期社会实践调查问卷</h1></td>

                </tr>

                <tr>

                    <td>

                        <p>&nbsp;&nbsp;&nbsp;&nbsp;亲爱的同学:大家好! <br>

                           &nbsp;&nbsp;&nbsp;&nbsp;为了更好的了解人们对近年来计算机类专业填报火热现象的看法,特制定本问卷,希望得到您的配合,请认真阅读并回答以下问题,您的回答将直接影响本调查的可信度和有效性,真诚感谢您的支持,祝您天天愉快,谢谢!</p>

                    </td>

                </tr>

                <tr>

                    <td>1.您的性别:<input type="radio"  name="c0" >&nbsp;&nbsp;<input type="radio" name="c0">&nbsp;</td>

                </tr>

                <tr>

                    <td>2.您的学校:<input type="text" width="40%" ></td>

                </tr>

                <tr>

                    <td>3.您的年级:

                        <select name="nian" >

                            <option value="请选择您的年级">请选择您的年级</option>

                            <option value="18">18</option>

                            <option value="19">19</option>

                            <option value="20">20</option>

                            <option value="21">21</option>

                        </select>

                    </td>

                </tr>

                <tr>

                    <td>4.报考该专业的原因:

                       <ul>

                           <li><input type="checkbox" >自己感兴趣</li>

                           <li><input type="checkbox">对将来发展有利</li>

                           <li><input type="checkbox">适应社会</li>

                           <li><input type="checkbox">父母主张</li>

                           <li><input type="checkbox">老师建议</li>

                           <li><input type="checkbox">学校调剂</li>

                           <li><input type="checkbox">其他</li>

                       </ul>

                    </td>

                </tr>

                <tr>

                    <td>5.您对该专业的建议:

                        <ul>

                            <li><input type="checkbox" >招收时重质不重量</li>

                            <li><input type="checkbox">师资力量要改进</li>

                            <li><input type="checkbox">要更适应社会需要</li>

                            <li><input type="checkbox">加强专业实验室建设</li>

                            <li><input type="checkbox">其他</li>

                        </ul>

                    </td>

                </tr>

                <tr>

                    <td style="color: black;"><span style="color: blue;"> 6.您认为该专业学生有必要参加社会实践:</span> <br> <br>

                        <input type="radio" name="c1" value="">有必要

                        <input type="radio" name="c1">没有必要

                        <input type="radio" name="c1">无所谓

                    </td>

                </tr>

                <tr>

                    <td>7.您的父母是否赞成您读该专业:

                        <ul>

                            <li><input type="radio" name="c2">很赞成,希望如此</li>

                            <li><input type="radio" name="c2">一般,不是很高兴</li>

                            <li><input type="radio" name="c2">不了解</li>

                        </ul>

                    </td>

                </tr>

                <tr>

                    <td>8. 您对学校的建议:

                        <textarea name="" id="" cols="100" rows="5">请您提出宝贵的建议:</textarea>

                    </td>

                </tr>

                <tr>

                    <td style="text-align: center;"><input type="submit" value="提交答案">&nbsp;&nbsp;<input type="reset" value="清空"></td>

                </tr>

                <tr>

                    <td style="text-align: center;">版权所有:计算机科学与技术系软件工程教研室copy right&copy;2021-2025</td>

                </tr>

            </table>

        </form>

    </div>

</body>

</html>

项目1

项目2

http://www.lryc.cn/news/358971.html

相关文章:

  • 五大元素之一,累不累——Java内部类
  • YAML快速编写示例
  • 2024 江苏省大学生程序设计大赛 2024 Jiangsu Collegiate Programming Contest(FGKI)
  • 【C语言】基于C语言实现的贪吃蛇游戏
  • 代码审计(工具Fortify 、Seay审计系统安装及漏洞验证)
  • cocos creator 3.x 手搓背包拖拽装备
  • 运维开发.Kubernetes探针与应用
  • Spring 框架:Java 企业级开发的基石
  • 在Docker中使用GPU
  • vue3 前端实现导出下载pdf文件
  • AI智能体研发之路-模型篇(五):pytorch vs tensorflow框架DNN网络结构源码级对比
  • 电商物流查询解决方案助力提升消费者体验
  • 【深度密码】神经网络算法在机器学习中的前沿探索
  • 搭载算能 BM1684 芯片,面向AI推理计算加速卡
  • Python开发 我的世界 Painting-the-World: Minecraft 像素图片生成器
  • 【经验分享】盘点“食用“的写文素材
  • 实习碰到的问题w1
  • c#实现BPM系统网络传输接口,http协议,post
  • 如何修改开源项目中发现的bug?
  • 结构设计模式 - 代理设计模式 - JAVA
  • 企业了解这些cad图纸加密方法,再也不怕图纸被盗了!
  • # 详解 JS 中的事件循环、宏/微任务、Primise对象、定时器函数,以及其在工作中的应用和注意事项
  • 神经网络与深度学习——第14章 深度强化学习
  • centOS 编译C/C++
  • java——网络原理初识
  • js怎么判断是否为手机号?js格式校验方法
  • 深入理解Java中的方法重载:让代码更灵活的秘籍
  • 鸿蒙ArkTS声明式开发:跨平台支持列表【显隐控制】 通用属性
  • 每日一题——Java编程练习题
  • java编辑器中如何调试程序?