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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/665802.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

C/C++中互斥量(锁)的实现原理探究

C/C++中互斥量(锁)的实现原理探究

互斥量的实现原理探究 文章目录 互斥量的实现原理探究互斥量的概念何为原子性操作原理探究 互斥量的概念 ​ 互斥量&#xff08;mutex&#xff09;是一种同步原语&#xff0c;用于保护多个线程同时访问共享数据。互斥量提供独占的、非递归的所有权语义&#xff1a;一个线程从成…
阅读更多...
LeetCode374猜数字大小

LeetCode374猜数字大小

题目描述 我们正在玩猜数字游戏。猜数字游戏的规则如下&#xff1a;我会从 1 到 n 随机选择一个数字。 请你猜选出的是哪个数字。如果你猜错了&#xff0c;我会告诉你&#xff0c;我选出的数字比你猜测的数字大了还是小了。你可以通过调用一个预先定义好的接口 int guess(int n…
阅读更多...
代码随想录算法训练营第四十四天 | 01背包问题 二维、 01背包问题 一维、416. 分割等和子集

代码随想录算法训练营第四十四天 | 01背包问题 二维、 01背包问题 一维、416. 分割等和子集

01背包问题 二维 代码随想录 视频讲解&#xff1a;带你学透0-1背包问题&#xff01;| 关于背包问题&#xff0c;你不清楚的地方&#xff0c;这里都讲了&#xff01;| 动态规划经典问题 | 数据结构与算法_哔哩哔哩_bilibili 1.dp数组定义 dp[i][j] 下标为[0,i]之间的物品&…
阅读更多...
2024盘古石初赛（服务器部分）

2024盘古石初赛（服务器部分）

赛后总结 这次初赛就有20道服务器部分赛题&#xff0c;做的情况一般&#xff0c;错了5道题这样&#xff0c;主要原因就是出在第二个网站服务器没有重构起来 今天来复现一下 这次的服务器部分我直接用仿真仿起来就开找了 第一台IM前期配置 先把网配置好&#xff0c;然后ssh…
阅读更多...
搭载算能 BM1684 芯片，面向AI推理计算加速卡

搭载算能 BM1684 芯片，面向AI推理计算加速卡

搭载算能 BM1684 芯片&#xff0c;是面向AI推理的算力卡。可集成于服务器、工控机中&#xff0c;高效适配市场上所有AI算法&#xff0c;实现视频结构化、人脸识别、行为分析、状态监测等应用&#xff0c;为智慧城市、智慧交通、智慧能源、智慧金融、智慧电信、智慧工业等领域进…
阅读更多...
Django Celery技术详解

Django Celery技术详解

文章目录 简介安装和配置创建并调度任务启动Celery Worker在视图中调用异步任务拓展功能 简介 Django Celery 是一个为Django应用程序提供异步任务处理能力的强大工具。它通过与消息代理&#xff08;如RabbitMQ、Redis&#xff09;集成&#xff0c;可以轻松地处理需要长时间运…
阅读更多...
QT5:调用qt键盘组件实现文本框输入

QT5:调用qt键盘组件实现文本框输入

目录 一、环境与目标 二、Qt VirtualKeyboard 1.勾选Qt VirtualKeyboard 2.ui设计流程 3.注意事项及问题点 三、参考代码 参考博客 一、环境与目标 qt版本&#xff1a;5.12.7 windows 11 下的 Qt Designer &#xff08;已搭建&#xff09; 目标&#xff1a;创建一个窗…
阅读更多...
系统架构设计师【第8章】: 系统质量属性与架构评估 (核心总结)

系统架构设计师【第8章】: 系统质量属性与架构评估 (核心总结)

文章目录 8.1　软件系统质量属性8.1.1　质量属性概念8.1.2　面向架构评估的质量属性8.1.3　质量属性场景描述 8.2　系统架构评估8.2.1　系统架构评估中的重要概念8.2.2　系统架构评估方法 8.3　ATAM方法架构评估实践8.3.1　阶段1—演示&#xff08;Presentation&#xff09;8.3…
阅读更多...
微信小程序教程DAY3

微信小程序教程DAY3

box标签 第二种方法 绿色第一种 第一种更好 效果一样 完成这个项目 先写循环
阅读更多...
失之毫厘差之千里之load和loads

失之毫厘差之千里之load和loads

起源 最近在读pandas库的一些文档的时候&#xff0c;顺便也会将文档上的一些demo在编辑器中进行运行测试&#xff0c;其中在读到pandas处理Json数据这一节的时候&#xff0c;我还是像往常一样&#xff0c;将文档提供的demo写一遍&#xff0c;结果在运行的时候&#xff0c;直接…
阅读更多...
AI边缘计算盒子在智慧交通的应用

AI边缘计算盒子在智慧交通的应用

方案背景 随着经济增长&#xff0c;交通出行需求大幅增长&#xff0c;但道路建设增长缓慢&#xff0c;交通供需矛盾日益显著&#xff0c;中心城区主要道路高峰时段交通拥堵严重&#xff0c;道路交通拥堵逐渐常态化&#xff0c;成为制约城市可持续发展的重要因素之一。 痛点问题…
阅读更多...
前端Vue小兔鲜儿电商项目实战Day05

前端Vue小兔鲜儿电商项目实战Day05

一、登录 - 整体认识和路由配置 1. 整体认识 登录页面的主要功能就是表单校验和登录退出业务 ①src/views/Login/index.vue <script setup></script><template><div><header class"login-header"><div class"container m-…
阅读更多...
未来已来， AI将作为超级工具？

未来已来， AI将作为超级工具？

人工智能时代已来 1.AI将作为超级工具&#xff1a;AI是推动全产业数字化转型的高效工具&#xff0c;机遇比互联网时代大10倍&#xff0c;但只有1/3的机会留给初创企业。 2.硅谷AI市场分类中&#xff0c;特别看好开源平台&#xff0c;其将为初创企业和大企业提供更多选择。 3.…
阅读更多...
封装了一个iOS对号成功动画

封装了一个iOS对号成功动画

基本思路其实很简单&#xff0c;就是通过贝塞尔曲线画出路径&#xff0c;然后 使用CAShapeLayer 渲染路径&#xff0c;然后通过strokeEnd 动画实现 路径的效果&#xff0c;这里注意&#xff0c;这个过程中过遇到过一个问题&#xff0c;就是 对号动画完成之后&#xff0c;整个对…
阅读更多...
Presto 从提交SQL到获取结果 源码详解(3)

Presto 从提交SQL到获取结果 源码详解(3)

物理执行计划 回到SqlQueryExecution.startExecution() &#xff0c;执行计划划分以后&#xff0c; // 初始化连接&#xff0c;获取Connect 元数据&#xff0c;添加会话&#xff0c;初始ConnectId metadata.beginQuery(getSession(), plan.getConnectors()); // 构建物理执行…
阅读更多...
数据结构与算法笔记：基础篇 - 栈：如何实现浏览器的前进和后退功能？

数据结构与算法笔记：基础篇 - 栈：如何实现浏览器的前进和后退功能？

概述 浏览器的前进、后退功能&#xff0c;你肯定很熟悉吧&#xff1f; 当依次访问完一串页面 a-b-c 之后&#xff0c;点击浏览器的后退按钮&#xff0c;就可以查看之前浏览过的页面 b 和 a。当后退到页面 a&#xff0c;点击前进按钮&#xff0c;就可以重新查看页面 b 和 c。但…
阅读更多...
Linux编程基础 8.4：epoll工作模式

Linux编程基础 8.4：epoll工作模式

1 简介 poll机制的工作原理及流程与select类似&#xff0c;但poll可监控的进程数量不受select中第二个因素——fd_set集合容量的限制&#xff0c;用户可在程序中自行设置被监测的文件描述符集的容量&#xff0c;当然poll在阻塞模式下也采用轮询的方式监测文件描述符集&#xf…
阅读更多...
【React】封装一个好用方便的消息框（Hooks Bootstrap 实践）

【React】封装一个好用方便的消息框（Hooks Bootstrap 实践）

引言 以 Bootstrap 为例&#xff0c;使用模态框编写一个简单的消息框&#xff1a; import { useState } from "react"; import { Modal } from "react-bootstrap"; import Button from "react-bootstrap/Button"; import bootstrap/dist/css/b…
阅读更多...
【LeetCode】38.外观数列

【LeetCode】38.外观数列

外观数列 题目描述&#xff1a; 「外观数列」是一个数位字符串序列&#xff0c;由递归公式定义&#xff1a; countAndSay(1) "1"countAndSay(n) 是 countAndSay(n-1) 的行程长度编码。 行程长度编码&#xff08;RLE&#xff09;是一种字符串压缩方法&#xff0c…
阅读更多...
STL中list的模拟实现

STL中list的模拟实现

目录 list模拟实现 list节点 list的push_back()函数 list的迭代器操作&#xff08;非const&#xff09; list的迭代器操作&#xff08;const&#xff09; list迭代器const 非const优化 list的insert()函数 list的erase()函数 list的pop_back() push_front() pop_front(…
阅读更多...
最新文章

Copyright @ 2022~2023