前言
现在要制作一个大会的宣传网站以供用户自行注册报名。这一篇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的。
还不赶快敲起来???