当前位置: 首页 > 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

相关文章:

html+CSS部分基础运用9

项目1 参会注册表 1.设计参会注册表页面&#xff0c;效果如图9-1所示。 图9-1 参会注册表页面 项目2 设计《大学生暑期社会实践调查问卷》 1.设计“大学生暑期社会实践调查问卷”页面&#xff0c;如图9-2所示。 图9-2 大学生暑期社会调查表页面 2&#xff0e;调查表前导语的…...

五大元素之一,累不累——Java内部类

目录 简略版&#xff1a; 详解版&#xff1a; 使用场景&#xff1a; 内部类的优点&#xff1a; 内部类的分类&#xff1a; 一. 成员内部类 1.创建对象 2.访问方法 3. 外部类名.this. 二. 静态内部类 1. 创建对象 2. 访问特点 三. 局部内部类 四. 匿名内部类 …...

YAML快速编写示例

一、案例 1.1 自主式创建service关联上方的pod 资源名称my-nginx-kkk命名空间my-kkk容器镜像nginx:1.21容器端口80标签njzb:my-kkk 1.1.1 创建一个demo文件夹 1.1.2 创建并获取模版文件 1.1.3 查看服务并编写yaml文件 1.1.4 编写yaml文件并部署&#xff0c;查看服务是否运行成…...

2024 江苏省大学生程序设计大赛 2024 Jiangsu Collegiate Programming Contest(FGKI)

题目来源&#xff1a;https://codeforces.com/gym/105161 文章目录 F - Download Speed Monitor题意思路编程 G - Download Time Monitor题意思路编程 K - Number Deletion Game题意思路编程 I - Integer Reaction题意思路编程 写在前面&#xff1a;今天打的训练赛打的很水&…...

【C语言】基于C语言实现的贪吃蛇游戏

【C语言】基于C语言实现的贪吃蛇游戏 &#x1f525;个人主页&#xff1a;大白的编程日记 &#x1f525;专栏&#xff1a;C语言学习之路 文章目录 【C语言】基于C语言实现的贪吃蛇游戏前言一.最终实现效果一.Win32 API介绍1.1Win32 API1.2控制台程序1.3控制台屏幕上的坐标COORD…...

代码审计(工具Fortify 、Seay审计系统安装及漏洞验证)

源代码审计 代码安全测试简介 代码安全测试是从安全的角度对代码进行的安全测试评估。&#xff08;白盒测试&#xff1b;可看到源代码&#xff09; 结合丰富的安全知识、编程经验、测试技术&#xff0c;利用静态分析和人工审核的方法寻找代码在架构和编码上的安全缺陷&#xf…...

cocos creator 3.x 手搓背包拖拽装备

项目背景&#xff1a; 游戏背包 需要手动 拖拽游戏装备到 装备卡槽中&#xff0c;看了下网上资料很少。手搓了一个下午搞定&#xff0c;现在来记录下实现步骤&#xff1b; 功能拆分&#xff1a; 一个完整需求&#xff0c;我们一般会把它拆分成 几个小步骤分别造零件。等都造好了…...

运维开发.Kubernetes探针与应用

运维系列 Kubernetes探针与应用 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite&#xff1a;http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress of this article:https://blog.csdn.net/qq_28550263…...

Spring 框架:Java 企业级开发的基石

文章目录 序言Spring 框架的核心概念Spring 框架的主要模块Spring Boot&#xff1a;简化 Spring 开发Spring Cloud&#xff1a;构建微服务架构实际案例分析结论 序言 Spring 框架自 2002 年发布以来&#xff0c;已经成为 Java 企业级开发的标准之一。它通过提供全面的基础设施…...

在Docker中使用GPU

一、安装nvidia-container-toolkit 总之一句话&#xff1a;nvidia-docker和nvidia-docker2&#xff0c;nvidia-container-runtime 已经被英伟达迭代了&#xff0c;可以认为nvidia-container-toolkit是nvidia-docker和nvidia-docker2&#xff0c; nvidia-container-runtime 的替…...

vue3 前端实现导出下载pdf文件

这样的数据实现导出 yourArrayBufferOrByteArray 就是后端返回数据 // 创建Blob对象const blob new Blob([new Uint8Array(res)], { type: application/pdf })// 创建一个表示该Blob的URLconst url URL.createObjectURL(blob);// 创建一个a标签用于下载const a document.cr…...

AI智能体研发之路-模型篇(五):pytorch vs tensorflow框架DNN网络结构源码级对比

博客导读&#xff1a; 《AI—工程篇》 AI智能体研发之路-工程篇&#xff08;一&#xff09;&#xff1a;Docker助力AI智能体开发提效 AI智能体研发之路-工程篇&#xff08;二&#xff09;&#xff1a;Dify智能体开发平台一键部署 AI智能体研发之路-工程篇&#xff08;三&am…...

电商物流查询解决方案助力提升消费者体验

截至2023年12月&#xff0c;中国网络购物用户规模达9.15亿人&#xff0c;占网民整体的83.8%。这一庞大的数字不仅展现了电子商务的蓬勃发展&#xff0c;也标志着数字零售企业营销战略的转变——从以产品和流量为核心&#xff0c;到用户为王的新阶段。因此&#xff0c;提升消费者…...

【深度密码】神经网络算法在机器学习中的前沿探索

目录 &#x1f69d;前言 &#x1f68d;什么是机器学习 1. 基本概念 2. 类型 3. 关键算法 4. 应用领域 5. 工作流程 &#x1f68b;什么是神经网络 基本结构 &#x1f682;神经网络的工作原理 前向传播&#xff08;Forward Propagation&#xff09;&#xff1a; 损失函…...

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

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

Python开发 我的世界 Painting-the-World: Minecraft 像素图片生成器

简介 Painting-the-World 是一款创新的工具&#xff0c;专为《我的世界》(Minecraft) 玩家及创作者设计&#xff0c;旨在将数字图片转变为游戏内的像素艺术。通过利用 RCON (Remote Console) 协议&#xff0c;本项目可以直接与《我的世界》服务器对话&#xff0c;根据输入的图…...

【经验分享】盘点“食用“的写文素材

一、构建框架 简介 1. 身份 擅长领域 2. 博客内容 3. 目前示例&#xff1a; 阿里云专家博主&#xff0c;华为云-云享专家&#xff0c;专注前、后端开发 博客内容&#xff1a;前后端实战教学、源码剖析、常见面试知识解析、算法题解与心得、日常考研总结等 目前正在备战考研&…...

实习碰到的问题w1

1.vueelementUI在输入框中按回车键会刷新页面 当一个 form 元素中只有一个输入框时&#xff0c;在该输入框中按下回车应提交该表单。如果希望阻止这一默认 行为&#xff0c;可以在 <el-form> 标签上添加 submit.native.prevent 。 参考&#xff1a;element-ui 表单 form …...

c#实现BPM系统网络传输接口,http协议,post

BPM通过http协议实现网络传输&#xff0c;语言使用.net(c#)&#xff0c;在这里只提供一个接口&#xff0c;具体代码如下,请参照&#xff1a; public string MakeRequest(string parameters) { ServicePointManager.ServerCertificateValidationCallback new Syst…...

如何修改开源项目中发现的bug?

如何修改开源项目中发现的bug&#xff1f; 目录 如何修改开源项目中发现的bug&#xff1f;第一步&#xff1a;找到开源项目并建立分支第二步&#xff1a;克隆分支到本地仓库第三步&#xff1a;在本地对项目进行修改第四步&#xff1a;依次使用命令行进行操作注意&#xff1a;Gi…...

三维点云到二维图像投影的实战指南:从原理到代码实现

1. 三维点云投影二维图像的核心原理 第一次接触三维点云投影时&#xff0c;我也被各种坐标系转换绕得头晕。后来发现只要抓住一个核心&#xff1a;三维到二维的投影本质上是坐标系转换的接力赛。想象你拿着手机拍照&#xff0c;物体从现实世界到手机屏幕的旅程&#xff0c;就是…...

Phi-4-reasoning-vision-15B企业案例:银行客户经理用截图快速生成信贷摘要

Phi-4-reasoning-vision-15B企业案例&#xff1a;银行客户经理用截图快速生成信贷摘要 1. 业务痛点与解决方案 1.1 银行信贷业务的效率瓶颈 在传统银行信贷审批流程中&#xff0c;客户经理需要花费大量时间整理客户资料、录入系统信息、撰写信贷报告。一个典型的信贷审批案例…...

如何实现ElasticHQ与ElasticSearch 8.x的完美兼容:未来就绪的监控解决方案

如何实现ElasticHQ与ElasticSearch 8.x的完美兼容&#xff1a;未来就绪的监控解决方案 【免费下载链接】elasticsearch-HQ Monitoring and Management Web Application for ElasticSearch instances and clusters. 项目地址: https://gitcode.com/gh_mirrors/el/elasticsearc…...

【学术干货免费领】200+学术海报模板免费领|科研展示零成本,高效出图不内耗 | 学术会议海报模板,适配国际国内各类学术场合 | 硕博研究生必需,全学科适配,助力科研成果高光出圈

重磅福利来袭&#xff01;200学术海报模板&#xff0c;全程免费领取&#xff0c;零成本解锁科研展示新方式&#xff01;适配以下各类科研相关人群&#xff1a;硕博研究生群体包括硕士研究生和博士研究生适用于不同研究阶段&#xff1a;从开题报告撰写到学位论文完成特别适合需要…...

用Rust还是JavaScript?Tauri 2.0系统托盘开发的两种姿势与选型建议

Tauri 2.0系统托盘开发&#xff1a;Rust与JavaScript的技术选型深度解析 当桌面应用需要常驻后台运行时&#xff0c;系统托盘功能便成为用户体验的关键组件。Tauri 2.0作为新一代跨平台桌面框架&#xff0c;允许开发者在前端JavaScript与后端Rust两种技术栈中实现这一功能。本文…...

LEDPatternLib:非阻塞LED动画库设计与嵌入式实践

1. 项目概述LEDPatternLib 是一款面向嵌入式 LED 动画控制的轻量级、模块化 Arduino 库&#xff0c;专为资源受限的微控制器平台设计。其核心目标并非替代底层驱动&#xff0c;而是构建在成熟硬件抽象层之上的非阻塞&#xff08;non-blocking&#xff09;模式动画调度框架。该库…...

开源AI助手竟能自主建频道、做视频?李宏毅深度解析“小龙虾”的神秘工作原理!

最近全网爆火的「养龙虾」到底是什么&#xff1f;为什么一个开源的 AI 助理项目&#xff0c;能让 AI 自己创建 YouTube 频道、自己做教学视频、24 小时自主干活&#xff1f; 台大李宏毅老师的这堂《解剖小龙虾 — 以 OpenClaw 为例介绍 AI Agent 的运作原理》&#xff0c;用最通…...

告别标注烦恼:用DINOv2自监督模型,在Intel Image数据集上3个epoch实现93%准确率

零标注成本实战&#xff1a;DINOv2自监督模型在Intel Image数据集上的高效迁移方案 当我在实验室第一次尝试用传统方法训练一个图像分类模型时&#xff0c;面对数千张需要手动标注的图片&#xff0c;几乎要放弃这个课题。直到发现了自监督学习这个宝藏领域——特别是DINOv2这样…...

脉冲雷达系统仿真:从理论建模到Matlab代码实现

1. 脉冲雷达系统仿真入门指南 第一次接触雷达系统仿真时&#xff0c;我和大多数初学者一样&#xff0c;面对满屏的数学公式和专业术语完全摸不着头脑。直到把实验室那台老式示波器玩坏了三次之后&#xff0c;我才真正理解脉冲雷达仿真的核心逻辑——它本质上就是在计算机里搭建…...

手把手教你用LVGL特殊符号打造炫酷UI界面

手把手教你用LVGL特殊符号打造炫酷UI界面 在嵌入式设备开发中&#xff0c;UI设计往往面临资源受限的挑战。LVGL&#xff08;Light and Versatile Graphics Library&#xff09;作为一款轻量级开源图形库&#xff0c;通过其丰富的特殊符号系统&#xff0c;让开发者能够在有限资…...