创新大会报名网站前端（一）

最新推荐文章于 2022-08-04 11:18:32 发布
最新推荐文章于 2022-08-04 11:18:32 发布
阅读量611 收藏 2
点赞数 1
分类专栏： 创新大会网站 文章标签： html 前端 css3 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45084002/article/details/119784789
版权

在这里插入图片描述

文章目录

前言

现在要制作一个大会的宣传网站以供用户自行注册报名。这一篇blog先来实现报名注册表格的组成和页面主题的构建。使用HBuilder创建

一、界面

在这里插入图片描述

二、代码

报名.html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大会报名</title>
		<link rel="stylesheet" href="css/报名样式表.css" />
	</head>
	<body>
		<!--顶部-->
		<div class="bg-toubu style">
				星际学院
		</div>
		<!--logo div-->
		<div class="type">
			<img src="img/eleps.png" style="width: 9.375rem; height: 3.125rem;"/>
			<ul class="nav">
				<li><a href="" >学院概况</a></li>
				<li class="split">|</li>
				<li><a href="" class="titleColor">网站首页</a></li>
			    <li class="split">|</li>
				<li><a href="">院系介绍</a></li>
				<li class="split">|</li>
				<li><a href="">师资介绍</a></li>
				<li class="split">|</li>
				<li><a href="">校友网</a></li>
				<li class="split">|</li>
				<li><a href="">快速通道</a></li>
				<li class="split">|</li>
			</ul>
		</div>	
	    </div>
		<div>
			<form action="index.html" method="get" enctype="multipart/form-data" >
					<table border="1" cellpadding="0" cellspacing="0" width="900px"">
						<caption>程序创新大会报名表</caption>
						<thead style="background-color: aquamarine;">
							<tr align="center">
								<td colspan="7">个人信息</td>
							</tr>
						</thead>
						<tbody style="background-color: antiquewhite;">
							<tr>
								<th style="width: 200px;">姓名</th>
								<td style="width: 180px;"><input name="name" style="border: -webkit-link; background-color: antiquewhite; height:35px" /></td>
								<th style="width: 170px;">年龄</th>
								<td style="width: 150px;"><input name="age" style="border: -webkit-link; background-color: antiquewhite; height:35px" /></td>
								<th style="width: 150px;">性别</th>
								<th style="width: 170px;">
									<input type="radio" name="gender" value="男性"/>男
									<input type="radio" name="gender" value="女性"/>女</th>
								<td style="width: 140px;" rowspan="3">照片<input type="file" name="photo" multiple="multiple"/></td>
							</tr>
							<tr>
								<th>学院</th>
								<td style="width: 180px;"><input name="college" style="border: -webkit-link; background-color: antiquewhite; height:35px" /></td>
								<th>专业班级</th>
								<td style="width: 180px;"  colspan="3"><input name="class" style="border: -webkit-link; background-color: antiquewhite; width:250px; height:35px" /></td>
							</tr>
							<tr>
								<th>出生日期</th>
								<th><input style="border: -webkit-link; background-color: antiquewhite; height:35px" type="date" name="birthday"/></th>
								<th>强项</th>
								<th colspan="3">
									<input type="checkbox" name="major" value="web前端"/>前端
									<input type="checkbox" name="major" value="java后端"/>后端
									<input type="checkbox" name="major" value="数据库"/>数据库
								</th>
							</tr>
							<tr>
								<th>电话号码</th>
								<td style="width: 180px;"><input name="phoneNumber" style="border: -webkit-link; background-color: antiquewhite; height:35px" /></td>
								<th>qq号码</th>
								<td style="width: 180px;"><input name="qqNumber" style="border: -webkit-link; background-color: antiquewhite; height:35px" /></td>
								<th>邮箱地址</th>
								<td colspan="2" style="width: 180px;"><input name="email" style="border: -webkit-link; background-color: antiquewhite; height:35px" /></td>
							</tr>
							<tr>
								<th>宿舍地址</th>
								<td colspan="3"><input name="dormitoryAdress" placeholder="精确到宿舍号" style="border: -webkit-link; background-color: antiquewhite; height:35px;"/></td>
								<th>项目经验</th>
								<th colspan="2">
									<input type="radio" name="expercience" value="少"/>较少
									<input type="radio" name="expercience" value="2-5"/>2-5个
									<input type="radio" name="expercience" value="熟练"/>6-10个
									<input type="radio" name="expercience" value="大神"/>以上
								</th>
							</tr>
						</tbody>
						<tfoot style="background-color: azure;">
							<tr>
								<th colspan="7">
								    <textarea rows="8" cols="115" readonly="readonly" style="border: -webkit-link; background-color: azure;  font-size: x-large;">
			本次程序创新大会由计算机与通信学院主办，旨在借大会开展多种形式的活动，包括技术讲座、算法比赛、程序开发大赛等推动全校软件技术能力的提升，塑造向学氛围，培养技术人才。大赛不以任何商业收益为目的，最终解释权归大会组委会所有！参会期间需服从大会要求，若同意，在下面输入姓名。
								    </textarea>
									<input type="text" align="right" placeholder="请在此输入姓名" name="sign" style="border: -webkit-link; background-color:azure; font-size: x-large; width: auto; color: black;"/>
									<button style="border: -webkit-activelink; background-color: #d2f6f6; width: 80px; height: 38px; border:0; box-sizing: content-box;  border-radius: 30px;" type="submit" value="提交">点此提交</button>
									<p>建议用Edge浏览器打开</p>
								</th>
							</tr>
						</tfoot>
					</table>
				</form>
				<iframe name="meeting" src="大会流程.html" width="90%" height="600px"></iframe>
		</div>
	</body>
</html>

样式表.css

*{
	margin: 0;
	padding: 0;
}

.bg-toubu{
	background-color: #FFA133;
	padding: 5px 5px;
	height: 35px;
	line-height: 30px;
	font-size: 14px;
}

.style{
	font-size: 16px;
	font-weight: bold;
	font-family: "微软雅黑";
}

.titleColor{
		color:#ffa133;
		}
.nav{
	list-style: none;
	float: left;
	}
.nav a{
	font-size: 12px;
	}
.nav li{
	float: left;
	padding: 13px;
	}
.split{
	color: #ccc;
	}
	
.type{
	background-color: bisque;
	color: white;
	height: 60px;
	font-size: 12px;
	font-weight: bold;
	box-sizing: border-box;
	}
input{
	border: -webkit-link;
	background-color: antiquewhite;
	height: 35px;
}
	
a{
	text-decoration: none;
	color: #000000;
   }
a:link{
	 color: white;/*默认颜色是白色*/	
	}
a:hover{
	color: #ffa133;/*鼠标悬浮是黄色*/	
	font-size: 14px;/*字体变大*/
	}
img{
	float: left;
	padding: 5px 15px;
}
table{
	padding: 5px 10px;
}

Logo图及iframe可自行编辑，任意皆可。

总结

这仅仅是一个简单的页面，但用来练手前端还是很nice的。
还不赶快敲起来？？？

学习犯法吗
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
程序创新大会报名表
weixin_46440209的博客
08-09 986
实现效果 目录 主页面 bootstrap的使用 css渲染 body js 次页面 流程页面 提交成功页面 背景 background1 ​ background2​background3​ 主页面 bootstrap的使用 <!--boostrap的使用： 1、必须先引入bootstrap的支持 ，包括js、css、font文件 2、引入的文件必须先有jQuery的核心文件，再引入bootstrap的js文件，再引入自己...
html5 报名页面,h5报名页性能优化总结
weixin_42499201的博客
06-04 840
最近做了报名页的第三期，就顺手对该项目进行了一些优化。先看h5报名页优化前后性能的对比吧：优化后优化前。优化前首屏的秒出率大概是30%左右，优化后的首屏秒出率大概是70%左右。ps:因为主要是对个人想法的一些验证，所以没并没有使用客户端的use304cache和龙哥做的service worker缓存。项目背景该页面位于虎牙直播，虎牙助手，虎牙手游的活动中心中。由 运营同学在管理后台配置所需要的表...
报名页面提交与报名列表的展示
06-10
该项目实现了用户的表单数据信息的提交，以及存入到数据库，适合初级开发者进行学习
HTML作业-程序创新大会报名表制作
逍遥游的博客
11-10 2541
HTML作业-程序创新大会报名表制作 文章目录HTML作业-程序创新大会报名表制作1. 描述2. 代码结构和资源3. 代码4. 效果展示 1. 描述 我们即将要举办第一届的程序创新大会，为了让更多的小伙伴参与进来，现在要制作一个大会的宣传网站以供用户自行注册报名。要求报名表中的选项越详细越好哦（例如来自的院校、专业、联系电话、邮箱等等），方便后续的资质审核。 那么现在开始学习 HTML，完成报名表的制作吧！ 完成报名表的制作，掌握 HTML 中的常用标签 使用frame完成以及表单项表等完成报名表的制作
程序创新大会报名表1.0（html）
weixin_42688085的博客
02-25 838
写再前面的话 1，本文为Java学习五部分第二部分所有项目回顾（前端练习系列-对应Java体系第二部分第二阶段内容）这些再前面的博客里有，再写会重复的。但是一想到我设计的第五部分第一阶段本来就要把那些值得记录的项目练习单独整理一遍。所以，理应如此，我会写的更好的。 2，整体项目系列博客（包括整体快递e站系列，数据库练习系列，前端练习系列，Javaweb系列，SSM系列，微服务系列，实战系列，等） 3，完整的Java体系链接（比你想的更多的Java内容），感谢一下开课吧。 需求介绍： 代码运行成功截图：
程序创新大会报名表2.0（html+css）
weixin_42688085的博客
02-25 328
写再前面的话 1，本文为Java学习五部分第二部分所有项目回顾（前端练习系列-对应Java体系第二部分第二阶段内容）这些再前面的博客里有，再写会重复的。但是一想到我设计的第五部分第一阶段本来就要把那些值得记录的项目练习单独整理一遍。所以，理应如此，我会写的更好的。 2，整体项目系列博客（包括整体快递e站系列，数据库练习系列，前端练习系列，Javaweb系列，SSM系列，微服务系列，实战系列，等） 3，完整的Java体系链接（比你想的更多的Java内容），感谢一下开课吧。 需求介绍： 代码运行成功截图：
程序创新大会报名表3.0（html+css+javaScript）
weixin_42688085的博客
02-25 250
写再前面的话 1，本文为Java学习五部分第二部分所有项目回顾（前端练习系列-对应Java体系第二部分第二阶段内容）这些再前面的博客里有，再写会重复的。但是一想到我设计的第五部分第一阶段本来就要把那些值得记录的项目练习单独整理一遍。所以，理应如此，我会写的更好的。 2，整体项目系列博客（包括整体快递e站系列，数据库练习系列，前端练习系列，Javaweb系列，SSM系列，微服务系列，实战系列，等） 3，完整的Java体系链接（比你想的更多的Java内容），感谢一下开课吧。 需求介绍： 代码运行成功截图： 思
程序创新大会报名表5.0（html+css+javaScript+jQuery+bootstrap）
weixin_42688085的博客
02-26 214
写再前面的话 1，本文为Java学习五部分第二部分所有项目回顾（前端练习系列-对应Java体系第二部分第二阶段内容）这些再前面的博客里有，再写会重复的。但是一想到我设计的第五部分第一阶段本来就要把那些值得记录的项目练习单独整理一遍。所以，理应如此，我会写的更好的。 2，整体项目系列博客（包括整体快递e站系列，数据库练习系列，程序创新大会报名表系列，Javaweb系列，SSM系列，微服务系列，实战系列，等） 3，完整的Java体系链接（比你想的更多的Java内容），感谢一下开课吧。 需求介绍： 代码运行成功
程序创新大会报名表4.0（html+css+javaScript+jQuery）
weixin_42688085的博客
02-26 180
写再前面的话 1，本文为Java学习五部分第二部分所有项目回顾（前端练习系列-对应Java体系第二部分第二阶段内容）这些再前面的博客里有，再写会重复的。但是一想到我设计的第五部分第一阶段本来就要把那些值得记录的项目练习单独整理一遍。所以，理应如此，我会写的更好的。 2，整体项目系列博客（包括整体快递e站系列，数据库练习系列，程序创新大会报名表系列，Javaweb系列，SSM系列，微服务系列，实战系列，等） 3，完整的Java体系链接（比你想的更多的Java内容），感谢一下开课吧。 需求介绍： 代码运行成功
H5报名系统模板
03-07
好看的H5报名系统前端页面....适合没有前端的报名系统，好看简单大方
【网页设计】基于HTML+CSS+JavaScript学生网上报到系统响应式网站
HTML网页设计
08-04 650
🧑‍🎓 学生管理系统网页设计 、OA管理系统、后台管理模板、智能停车系统、等网站的设计与制作。🏷️HTML网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新......
JSP志愿者在线报名系统
QQ860234001的专栏
06-08 1320
随着我国国民经济的发展，教育水平也在不断地发展，大学生的数量每年也在不断的递增，如此多的大学生在学校肯定是要参加一些自愿者活动中然后丰富自己业余生活的同时也不断的积攒社会经验和精神水平，我通过研究长期的研究和分析一些现有的网站结合自己的学校，本校建立了这个支教志愿者在线报名，旨在提高大学生的精神生活和在即将毕业之际给母校做点小小的贡献。 JSP志愿者在线报名系统通过JAVA语言来进行开发，开发工具是MyEclipse，数据库采用的是MYSQL，服务器是TomCat JSP志愿者在线报名系统功能.
html5报名页面设计
web前端攻城狮
09-09 9031
html5报名页面设计
HTML使用CSS美化表格
美奇软件开发工作室
03-11 3万+
效果图： 示例代码： <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> /*表格样式*/ table { width: 90%; background: #ccc; mar...
报名网站html代码,考试报名系统 附源码
weixin_34431256的博客
06-17 3688
【实例简介】考试报名系统做毕业设计，课程设计或者正在学习相关技术知识的朋友可以下载资源学习。想继续学习相关知识的可以关注我。【实例截图】【核心代码】报名系统└── OnlineExamEntrySystem-branch-1.0.0├── exam-entry-system-aggregate│ ├── exam-entry-system-launcher│ │ ├── pom.xml...
漂亮的表格样式(使用CSS样式表控制表格样式)
热门推荐
kongwei521的专栏
10-10 3万+
转载地址：http://blog.csdn.net/wallimn/article/details/2212916 感谢原作者 依照WEB2.0风格，设计了几个表格样式，希望大家喜欢。 WEB2.0提倡使用div开布局，但不是要完全放弃使用表格，表格在数据展现方面还是不错的选择。 现在使用介绍使用CSS样式表来控制、美化表格的方法。 精美
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值