NET第一次大作业
题目1：应聘面试登记表
- 使用技术：html和css
- 大致内容：代码里面运用div，style,table,input
代码分解
head部分
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>homework1</title>
<style >
table {
border-collapse: collapse;
border-spacing: 0;/*使表单边界线重合*/
}
</style>
</head>
body部分
运用多个div将代码进行分块，方便进行管理与查看
- 首先描述table的样式
<table border="1" width="60%" align="center">
- 实现最上面的部分
<div id="head">
<tr height="50" style="background-color:rgb(116, 174, 207);">
<th colspan="7">应聘面试登记表</th>
</tr>
<tr style="border:none">
<td colspan="7" height="20"></td>
</tr>
</div>
- 将表格内容分成六个部分，逐步实现
<div id="part1">
<tr height="30">
<td colspan="7" style="background-color:rgb(116, 174, 207);"><strong>基本信息</strong></td>
</tr>
<tr height="20" align="center">
<td>姓名</td>
<td>张小朵</td>
<td>性别</td>
<td>女</td>
<td>出生日期</td>
<td>1998/12/9</td>
<td rowspan="5" cellpadding="0" width="100">
<img src="images/杨倩.jpg" width="70" height="100" alt="张小朵" />
</td>
</tr>
<tr height="20" align="center">
<td>政治面貌</td>
<td>党员</td>
<td>籍贯</td>
<td>安徽合肥</td>
<td>民族</td>
<td>汉族</td>
</tr>
<tr height="20" align="center">
<td>婚姻状况</td>
<td>未婚</td>
<td>学历</td>
<td>本科</td>
<td>专业</td>
<td>财务管理</td>
</tr>
<tr height="20" align="center">
<td>联系电话</td>
<td colspan="2">18888888888</td>
<td>邮箱</td>
<td colspan="2">zhangxiaoduo@qq.com</td>
</tr>
<tr height="20" align="center">
<td>身份证号</td>
<td colspan="2">88888888888</td>
<td>通讯地址</td>
<td colspan="2">安徽省合肥市宿松路</td>
</tr>
<tr height="20" align="center">
<td rowspan="2">相关证书</td>
<td colspan="2">获取时间</td>
<td colspan="3">证书名称</td>
<td>发放单位</td>
</tr>
<tr height="20" align="center">
<td colspan="2"></td>
<td colspan="3"></td>
<td colspan="3"></td>
</tr>
</div>
<div id="part2">
<tr height="30">
<td colspan="7" style="background-color:rgb(116, 174, 207);"><strong>教育经历</strong></td>
</tr>
<tr height="20" align="center">
<td colspan="2">起止时间</td>
<td colspan="2">学校名称</td>
<td colspan="2">学历/专业</td>
<td>证明人</td>
</tr>
<tr height="20" align="center">
<td colspan="2">20xx.xx.xx-20xx.xx.xx</td>
<td colspan="2">安徽财经大学</td>
<td colspan="2">本科/财务管理</td>
<td>张老师</td>
</tr>
</div>
<div id="part3">
<tr height="30">
<td colspan="7" style="background-color:rgb(116, 174, 207);"><strong>工作经历</strong></td>
</tr>
<tr height="20" align="center">
<td colspan="2">起止时间</td>
<td colspan="2">公司名称</td>
<td colspan="2">部门/岗位</td>
<td>证明人</td>
</tr>
<tr height="20" align="center">
<td colspan="2">20xx.xx.xx-20xx.xx.xx</td>
<td colspan="2">大星科技有限公司</td>
<td colspan="2">财务部/财务专员</td>
<td>王晓丽</td>
</tr>
<tr height="20" align="center">
<td colspan="2">20xx.xx.xx-20xx.xx.xx</td>
<td colspan="2">华美贸易有限公司</td>
<td colspan="2">财务部/财务专员</td>
<td colspan="2">刘晓东</td>
</tr>
<tr height="20" align="center">
<td rowspan="2">离职原因</td>
<td colspan="6"></td>
</tr>
<tr height="20" align="center">
<th colspan="6"></th>
</tr>
</div>
<div id="part4">
<tr height="30">
<td colspan="7" style="background-color:rgb(116, 174, 207);"><strong>家庭信息</strong></td>
</tr>
<tr height="20" align="center">
<td>姓名</td>
<td>称谓</td>
<td>年龄</td>
<td colspan="3">工作单位</td>
<td>联系方式</td>
</tr>
<tr height="20" align="center">
<td>张明</td>
<td>妇女</td>
<td>52</td>
<td colspan="3">xxxxxxxxxxx</td>
<td>158*****369</td>
</tr>
<tr height="20" align="center">
<td>王红</td>
<td>母女</td>
<td>50</td>
<td colspan="3">xxxxxxxxxx</td>
<td>158*****370</td>
</tr>
<tr>
<td>紧急联系人</td>
<td colspan="2"></td>
<td colspan="2">与紧急联系人关系</td>
<td colspan="2"></td>
</tr>
</div>
<div id="prat5">
<tr height="30">
<td colspan="7" style="background-color:rgb(116, 174, 207);"><strong>录用情况</strong></td>
</tr>
<tr height="20" align="center">
<td>所属部门</td>
<td>职务</td>
<td>到岗时间</td>
<td>试用期薪资</td>
<td>转账薪资</td>
<td>上级领导</td>
<td>部门负责人</td>
</tr>
<tr height="40">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr height="20" align="center">
<td>人事经理意见：</td>
<td colspan="3"></td>
<td>总经理意见：</td>
<td colspan="2"></td>
</tr>
</div>
- 将结尾的边接线设置成none，完成空白效果
<div id="part6" >
<tr style="border: none;">
<td colspan="4" >
是否因违法犯罪受过处罚：
<input type="radio" name="cimmit" value="yes">是
<input type="radio" name="cimmit" value="no">否
</td>
<td colspan="3">是否有数额过万的未尝清债务：
<input type="radio" name="debt" value="yes">是
<input type="radio" name="debt" value="no">否
</td>
</tr>
<tr style="border: none;">
<td colspan="7">
本人承诺以上信息均为真实有效，如果造假或情况不实，自愿承担一切后果。
</td>
</tr>
<tr style="border:none">
<td colspan="3"></td>
<td colspan="2" align="center"> 本人签名：</td>
<td colspan="2" align="center"> 日期：</td>
</tr>
</div>
完整代码的效果展示
题目2：欢迎注册会员
-
使用技术：html，css，js
-
大致内容：代码里面运用div，style,form,input，laber,span，select
代码分解
head部分 -
使用css创建一个指定大小的盒子，以及一些字体的颜色，大小与位置
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>homework1</title>
<style>
.all{
font-weight: bolder;
line-height: 20px;
width: 350px;
padding: 16px;
background-color: white;
margin: 0 auto;
margin-top: 10px;
border: 1px solid black;
border-radius: 4px;
}
input[type=text] {
height: 20px;
}
.top span {
font-size: 10px;
color: red;
}
.start{
color: blue;
}
.note{
display: flex;
align-items: center;
}
.foot{
text-align: center;
}
laber .iamge {
display: flex;
text-align: center;
}
div .notee {
font-weight: normal;
}
.part {
font-weight: normal;
}
</style>
</head>
body部分
首先使用p创造最上面部分
<p class="start">欢迎注册会员</p>
接着使用from创造后面内容
<form method="post" action="#" enctype="multipart/form-data" >
将前面相似的内容写一起
- 使用laber优化
- 使用palceholder显示提升文字
<div class="top">
<label> 手机号码：<input type="text" placeholder="11位手机号" /></label>
<span>必填</span>
<p>
<label> 创建密码：<input type="text" placeholder="8位密码" /></label>
<span>必填</span>
</p>
<p>
<label
> 注册邮箱：<input type="text" placeholder="例如：wustzz@sina.com"
/></label>
<span>必填</span>
</p>
</div>
验证码的实现
- 使用js写出验证码和验证码的刷新
<p>
<label class="image" > 验证码：<input type="text" /></label>
<canvas id="captcha" width="100" height="40"></canvas>
<button onclick="generateCaptcha()" type="button" style="text-align: end;"><span >刷新验证码</span></button>
<br>
</p>
<script>
function generateCaptcha() {
var canvas = document.getElementById('captcha');
var ctx = canvas.getContext('2d');
var chars = '0123456789';
var captchaLength = 4;
var captcha = '';
for (var i = 0; i < captchaLength; i++) {
captcha += chars[Math.floor(Math.random() * chars.length)];
}
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.font = '30px Arial';
ctx.fillText(captcha, 25, 35);
document.getElementById('captchaImage').src = canvas.toDataURL();
}
generateCaptcha();
</script>
性别生日年龄的实现
- input的使用
<p>
性别：
<label><input type="radio" name="sex" value="male" checked="checkked"/><span class="part">男</span></label>
<label><input type="radio" name="sex" value="female" /><span class="part">女</span></label>
</p>
<p>
生日：<input type="date" name="mydate" /></p>
<p>
<label> 年龄:<input type="text" name="age" /> </label>
</p>
籍贯学历的实现
- 使用select进行选择
<p>
籍贯：
<select name="place1" size="1">
<option value="0">湖北省</option>
<option value="1">其他</option>
</select>
<select name="place2" size="1">
<option value="0">武汉</option>
<option value="1">其他</option>
</select>
</p>
<p>
个人学历：
<select name="study" size="1">
<option value="0">本科</option>
<option value="1">其他</option>
</select>
</p>
月薪的实现
- 使用type=“range”实现进度条的拖拉
- 再利用js实现数字的显示
<p>
月薪：
<input
id="score"
type="range"
name="money"
min="0"
max="20000"
value="5000"
step="10"
/>
<span id="msg" ></span>
</p>
<script>
var msg = document.getElementById("msg"); // 根据id值找到span元素
window.onload = function () {
msg.innerHTML = document.getElementById("score").value; // 获取区间域初始value值
}
document.getElementById("score").onchange = function () {
msg.innerHTML = this.value; // 将当前区间域的value作为span元素的内容
}
</script>
爱好的实现
-checkbox进行多选择
<p >
个人爱好：
<label>
<input type="checkbox" name="hobby" value="sing" /> <span class="part">唱歌</span>
</label>
<label>
<input type="checkbox" name="hobby" value="run" /> <span class="part">跑步</span>
</label>
<label>
<input type="checkbox" name="hobby" value="swim" /><span class="part">游泳</span>
</label>
</p>
照片的实现
- 利用input传入file
- 再用js读取和显示
<p>个人照片： </p>
<p></p>
<div id="test-image-preview"
style="border: 1px solid silver;
width: 100%; height: 200px; background-repeat: no-repeat;
background-position: center;">
</div>
<p></p>
<p>
<input type="file" id="test-image-file" name="test">
</p>
<p id="test-file-info" class="notee"></p>
<script>
var fileInput = document.getElementById('test-image-file');
var info = document.getElementById('test-file-info');
var preview = document.getElementById('test-image-preview');
fileInput.addEventListener('change', function () { // 监听change事件
preview.style.backgroundImage = ''; // 清除背景图片
if (!fileInput.value) {
info.innerHTML = '没有选择文件';
return;
}
var file = fileInput.files[0]; // 获取File引用
// 获取File信息:
info.innerHTML = '文件: ' + file.name + '<br>' + '大小: ' + file.size + '<br>' + '修改: ' + file.lastModifiedDate;
if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
alert('不是有效的图片文件!');
return;
}
var reader = new FileReader(); // 读取文件
reader.onload = function (e) { // 发起一个异步操作来读取文件内容
var data = e.target.result; // data串形如： 'data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...'
preview.style.backgroundImage = 'url(' + data + ')';
};
reader.readAsDataURL(file); // 以DataURL的形式读取文件
});
</script>
最后对简历和提交实现
个人简历：
<textarea name="notes" class="notee" cols="30" rows="10"></textarea>
</div>
<p class="foot">
<input type="submit" name="submit" value="提交" />
<input type="reset" name="reset" value="重填" />
</p>
完整代码实现展示
5660
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
