1.第一题
用H5C3完成下列表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<h1 align="center" style="background-color: #0099ff" font-size="32px">第一题</h1>
<body style="background-color: #FFE4C4 ">
<table border="1" cellspacing="0" width="800" align="center">
<!-- align的意思是：规定表格相对周围元素的对齐方式（默认 left），注意指的是整个表格的对齐方式（表格是在父盒子中默认往左靠，还是居中或是往右靠），而不是指单元格内容的对齐方式（单元格内容对齐可以通过：`style="text-align: center;"` 设置） -->
<!-- (基本信息) -->
<tr height="50">
<td colspan="3" width="100" style="color:#0000FF">(基本信息)</td>
<td width="250" style="color:#FF0000"><i>简历更新日期：2009-04-30</i></td>
</tr>
<tr height="40">
<td width="150" align="right"><strong>姓名：</strong></td>
<td colspan="2">张三</td>
<td width="200" rowspan="4">
<div align="center">
<img src="https://img-blog.csdnimg.cn/5b9e905ca17e42ef899b7e6d15c32721.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5aW977yM5ZG15ZG1,size_20,color_FFFFFF,t_70,g_se,x_16 , width=" 300px " , height="160px " />
</div></td>
</tr>
<tr height="40 ">
<td align="right "><strong>身份证号码:</strong></td>
<td colspan="2 ">320235432543x</td>
</tr>
<tr height="40 ">
<td align="right "><strong>性别:</strong></td>
<td colspan="2 ">男</td>
</tr>
<tr height="40 ">
<td align="right "><strong>出生年月:</strong></td>
<td colspan="2 ">19780506</td>
</tr>
<tr height="40 ">
<td width="200px " align="right "><strong>民族:</strong></td>
<td width="200px ">汉族</td>
<td width="200px " align="right "><strong>政治面貌:</strong></td>
<td width="200px ">共青团员</td>
</tr>
<tr height="40 ">
<td align="right "><strong>婚姻状况：</strong></td>
<td>未婚</td>
<td align="right "><strong>视力：</strong></td>
<td width="200 "></td>
</tr>
<tr height="40 ">
<td align="right "><strong>户籍所在地：</strong></td>
<td>南京市秦淮区</td>
<td align="right "><strong>身高：</strong></td>
<td>0(cm)</td>
</tr>
<tr height="40 ">
<td align="right "><strong>现居住地：</strong></td>
<td colspan="3 "></td>
</tr>
<!-- (目前从事工作情况) -->
<tr height="40 ">
<td colspan="4 " style="color:#0000FF ">(目前从事工作情况)</td>
</tr>
<tr height="40 ">
<td align="right "><strong>现工作单位：</strong></td>
<td>***</td>
<td align="right "><strong>参加工作年度：</strong></td>
<td>1998年</td>
</tr>
<tr height="40 ">
<td align="right "><strong>目前从事岗位：</strong></td>
<td>信息工程</td>
<td align="right "><strong>从事现岗位时间：</strong></td>
<td>8年</td>
</tr>
<tr height="40 ">
<td align="right "><strong>现职称级别：</strong></td>
<td colspan="3 "></td>
</tr>
<!-- 受教育情况 -->
<tr height="40 ">
<td colspan="4 " style="color:#0000FF ">(受教育情况)</td>
</tr>
<tr height="40 ">
<td align="right "><strong>学历：</strong></td>
<td>本科</td>
<td align="right "><strong>毕业年度：</strong></td>
<td>1998</td>
</tr>
<tr height="40 ">
<td align="right "><strong>所学专业：</strong></td>
<td colspan="3 ">涉外会计</td>
</tr>
<tr height="40 ">
<td align="right "><strong>毕业院校：</strong></td>
<td colspan="3 ">金陵科技学院</td>
</tr>
<tr height="40 ">
<td align="right "><strong>外语及水平：</strong></td>
<td colspan="3 ">英语，普通英语六级；法语，一般</td>
</tr>
<tr height="40 ">
<td align="right "><strong>学习简历：</strong></td>
<td colspan="3 ">1995/1--1998/9金陵科技学院金融学</td>
</tr>
<tr height="40 ">
<td align="right "><strong>继续教育情况：</strong></td>
<td colspan="3 "></td>
</tr>
<tr height="400 ">
<td align="right "><strong>工作简历：</strong></td>
<td colspan="3 ">
2000/3--2008：南京嘉腾科技有限公司<br />
所属行业：计算机软件<br />
EximbillsEnterprise项目经理<br />
1.负责产品国际市场发展环境的分析,包括区域电信发展环境，重点运营商经营发展战略、投资方向和客户需求的分析；侧重海外高端运营商的市场培育、机会挖掘；<br /><br />
2.负责海外片区市场投资空间的中长期预测以及进行所辖区域市场竞争格局的分析.参与市场规划，定期输出所辖区域的市场策略（市场目标选择，市场竞争策略，产品策略以及合作策略等）；为产品的市场规划和重大市场营销活动提供支持<br /><br />
3.在IBMWebsphere平台上用Java设计并开发国际结算系统EximBills企业级版本，参与系统设计过程，并撰写英文系统文档。用MSProject编写项目计划，沟通各项目经理，海外市场销售团队与公司管理层，控制项目目标与公司整体战略之间的平衡。<br /><br />
4.协调渣塔银行StandardCharteredBankMegellan项目，协助项目经理沟通银行客户，保持中东公司实施团队与南京研发中心系统开发版本的一致。为银行提供系统技术咨询服务并分五个阶段将整个项目<br />
</td>
</tr>
<tr height="250 ">
<td align="right "><strong>个人技能及特长：</strong></td>
<td colspan="3 ">
1.金融业务理论
2.Java软件开发
3.精通SQLServer开发
3.英语,法语流利
4.有较强的国际视野和跨文化沟通能力。
</td>
</tr>
<tr height="40 ">
<td align="right "><strong>成果及获奖情况：</strong></td>
<td colspan="3 "></td>
</tr>
<!-- 求职意向 -->
<tr height="40 ">
<td colspan="4 " style="color:#0000FF ">(求职意向)</td>
</tr>
<tr height="40 ">
<td align="right "><strong>求职意向：</strong></td>
<td colspan="3 ">信息技术经理/主管，科研人员，科研管理人员</td>
</tr>
<tr height="40 ">
<td align="right "><strong>期望工作地点：</strong></td>
<td colspan="3 ">南京市</td>
</tr>
<tr height="40 ">
<td align="right "><strong>薪酬要求：</strong></td>
<td>面议</td>
<td align="right "><strong>工作方式：</strong></td>
<td>全/兼职</td>
</tr>
<tr height="40 ">
<td align="right "><strong>对新工作的期望：</strong></td>
<td colspan="3 "></td>
</tr>
<!-- 其他资料 -->
<tr height="40 ">
<td colspan="4 " style="color:#0000FF ">(其它资料)</td>
</tr>
<tr height="40 ">
<td align="right "><strong>兴趣爱好：</strong></td>
<td colspan="3 "></td>
</tr>
<tr height="40 ">
<td align="right "><strong>自我评价：</strong></td>
<td colspan="3 ">多年Java软件开发经验，英语，法语流利，有较强的国际视野和跨文化沟通能力.MCSE，MCDBA，MCSD</td>
</tr>
<!-- 联系方式 -->
<tr height="40 ">
<td colspan="4 " style="color:#0000FF ">(联系方式)</td>
</tr>
<tr height="40 ">
<td align="right "><strong>联系电话：</strong></td>
<td >025-84589702</td>
<td align="right "><strong>住宅电话：</strong></td>
<td >025-84589702</td>
</tr>
<tr height="40 ">
<td align="right "><strong>移动电话：</strong></td>
<td >13951725880</td>
<td align="right "><strong>联系人：</strong></td>
<td ></td>
</tr>
<tr height="40 ">
<td align="right "><strong>E-MAIL：</strong></td>
<td >xxxxxx@hotnai1. com</td>
<td align="right "><strong>个人主页：</strong></td>
<td ></td>
</tr>
<tr height="40 ">
<td align="right "> <strong>聊天帐号：</strong></td>
<td colspan="3 "></td>
</tr>
<tr height="40 ">
<td align="right "><strong>通讯地址：</strong></td>
<td colspan="3 ">（）</td>
</tr>
</table>
</body>
</html>
2.第二题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<h1 align="center" style="background-color: #0099ff" font-size="32px" >第二题</h1>
<body style="background-color: #FFE4C4 ">
<style>
label:before {
content: '* ';
color: red;
}
.span1{
font-weight: 100;
font-size:8px;
}
.span2{
font-weight: 700;
font-size:8px;
}
</style>
<form>
<table border="1"
cellspacing="0"
width="800" style="background-color:#F2F2F2;" align="center">
<tr height="60">
<td align="right" width="200"><label >姓名 : </label></td>
<td>
<input name = "username" type="text" size="5">
 <label >出生日期:</label>
<select name = "year" >
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
</select>年
<select name = "month">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>月
<select name = "day">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>日
</td>
</tr>
<tr height="60">
<td align="right"><label>身份证号码：</label></td>
<td><input name = "username" type="text" size="18"> <span class="span1">长度15位或18位，必须和出生日期、性别相对应</span></td>
<!-- size代表可见的字符数。 -->
</tr>
<tr height="60">
<td align="right"><label>性别：</label></td>
<td >
<select name = "sex" >
<option value="男" >男</option>
<option value="女" >女</option>
</select>
  民族：
<select name = "minzu" >
<option value="汉" >汉</option>
<option value="其他" >其他</option>
</select>
</td>
</tr>
<tr height="60">
<td align="right">婚姻状况：</td>
<td>
<select name = "select" >
<option value="未婚" size="5">未婚</option>
<option value="已婚" size="5">已婚</option>
</select>
  政治面貌：
<select name = "a" >
<option value="共青团员" >共青团员</option>
<option value="中共党员" >中共党员</option>
</select>
</td>
</tr>
<tr height="60">
<td align="right">户口所在地：</td>
<td>
<select name = "address" >
<option value="南京市秦淮" >南京市秦淮</option>
<option value="南京市秦淮" >南京市秦淮</option>
</select>
  现居住地：
<select name = "address" >
<option value="南京市秦淮" >南京市秦淮</option>
<option value="其他" >其他</option>
</select>
</td>
</tr>
<tr height="60">
<td align="right">身高：</td>
<td><input type="text" size=5 /> <span class="span1">单位：厘米</span></td>
</tr>
<tr height="60">
<td align="right">视力状况：</td>
<td><input type="text" size=5 /> <span class="span1">请用文字描述你的情况</span></td>
</tr>
<tr height="80">
<td align="right">现工作单位名称：</td>
<td><input type="text" /><br /><br /><input type="checkbox" /> <span>申请职位（发送简历）时发送现工作单位名称（不推荐选择）</span> </td>
</tr>
<tr height="60">
<td align="right"><label>现从事工作职位名称：</label></td>
<td><input name = "username" type="text" size="5"> <span class="span1">如：公司部门经理</span></td>
</tr>
<tr height="60">
<td align="right">现职称级别：</td>
<td>
<select name="" id="">
<option value="">--请选择--</option>
</select>
</td>
</tr>
<tr height="60">
<td align="right">现从事工作级别：</td>
<td>
<select name="" id="">
<option value="">高级职位（非管理类）</option>
</select>
<span style=" color:red" class="span2">N</span>
<span style="color:orange" class="span2">E</span>
<span style="color:orange" class="span2">W</span>
<span style="color:green" class="span2">!</span>
</td>
</tr>
<tr height="60">
<td align="right"><label>现从事职位类别：</label></td>
<td>
<select name="" id=""><option value="">IT-管理</option></select>
<select name="" id="" ><option value="" >IT-管理 </option></select>
<input type="text" value="0100,计算机软件"/>
<input type="text" value="0700" />
<input type="text" />
</td>
</tr>
<tr height="60">
<td align="right">从事现职位年限：</td>
<td>
<select name="" id="">
<option value=""> 8年 </option>
</select>
</td>
</tr>
<tr height="100">
<td colspan="2" align="center"><input type="submit" name="" id="" value="保存以上修改"/></td>
</tr>
</table>
</form>
</body>
</html>
3.第三题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table{
border: 1px dashed;
}
td{
border: 1px dashed;
}/*设置单元格边框纵向虚线*/
tr{
border: 1px dashed;
}/*设置单元格边框横向虚线*/
label::before{
content: '*';
color:red;
}
.font1{
font-weight: 100;
}
</style>
</head>
<h1 align="center" style="background-color: #0099ff" font-size="32px" >第三题</h1>
<body style="background-color: #FFE4C4 ">
<form>
<table cellspacing="1"
width="800" height="300" align="center">
<!-- ·····························个人基本信息························ -->
<tr><td colspan="4" align="center" style="background-color:#F2F2F2;"> 个人基本信息</td></tr>
<tr>
<td align="right"><label>姓 名</label></td>
<td><input type="text" /></td>
<td align="right"><label>性 别</label></td>
<td>
<input type="radio"/>男
<input type="radio"/>女
</td>
</tr>
<tr>
<td align="right"><label>籍 贯</label></td>
<td><input type="text" /></td>
<td align="right">出生日期</td>
<td>
<select name="" id="">
<option value="">--选择--</option>
</select>年
<select name="" id="">
<option value="">--选择--</option>
</select>月
<select name="" id="">
<option value="">--选择--</option>
</select>日
</td>
</tr>
<tr >
<td rowspan="2" align="align">个人照片</td>
<td colspan="3"><input type="text" size="50"/></td>
</tr>
<tr >
<td colspan="3">注：照片大小请控制在200K以内。</td>
</tr>
<tr>
<td align="right">身份证号码</td>
<td><input type="text" /></td>
<td align="right"><label>毕业院校</label></td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td align="right"><label>最后学历</label></td>
<td><input type="text" /></td>
<td align="right"><label>专 业</label></td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td align="right"><label>毕业时间</label></td>
<td><input type="text" /></td>
<td align="right">学位证书</td>
<td>
<input type="text" />
</td>
</tr>
<!-- ·····························个人能力························ -->
<tr><td colspan="4" align="center" style="background-color:#F2F2F2;"> 个人能力</td></tr>
<tr>
<td rowspan="3" align="center">语言能力</td>
<td align="right"><label>英语能力水平</label></td>
<td colspan="2">
<input name = "select0" type="radio" value="四级">四级
<input name = "select0" type="radio" >六级
<input name = "select0" type="radio">其他
</td>
</tr>
<tr>
<td align="right">日语能力水平</td>
<td colspan="2">
<input name = "select" type="radio" value="1">1
<input name = "select" type="radio" >2
<input name = "select" type="radio">3
<input name = "select" type="radio">4
<input name = "select" type="radio" >5
<input name = "select" type="radio">其他
</td>
</tr>
<tr>
<td align="right">其他语言能力水平</td>
<td colspan="2"><input name = "lever" type="text"></td>
</tr>
<tr>
<td rowspan="3" align="center">专业技能</td>
<td align="right">计算机语言</td>
<td colspan="2">
<input name = "select1" type="checkbox" value="java">java
<input name = "select1" type="checkbox" >.NET
<input name = "select1" type="checkbox">c/c++
<input name = "select1" type="checkbox">其他
</td>
</tr>
<tr>
<td align="right">使用平台</td>
<td colspan="2">
<input name = "select2" type="checkbox" value="win">WINDOWS系列
<input name = "select2" type="checkbox" >UNIX系列
<input name = "select2" type="checkbox">其他
</td>
</tr>
<tr>
<td align="right">使用数据库</td>
<td colspan="2">
<input name = "select3" type="checkbox" value="ORACLE">ORACLE
<input name = "select3" type="checkbox" >DB2
<input name = "select3" type="checkbox">SYBASE/SQL-SEVER
<input name = "select3" type="checkbox">其他
</td>
</tr>
<tr>
<td colspan="2" align="center" >所获证书（国家标准考试）</td>
<td colspan="2">
<input type="checkbox" /> 系统分析员
<input type="checkbox" /> 高级程序员
<input type="checkbox" /> 程序员
<input type="checkbox" /> 其它
</td>
</tr>
<tr>
<td align="center">工作经验</td>
<td colspan="3">
<p style="color:#D7D4D2;">格式：工作单位（或项目名称），担任职位，时间，工作内容描述</p>
<textarea rows="4" cols="40" style="overflow:scroll" wrap="off"></textarea>
</td>
<tr>
<td align="center">备注</td>
<td colspan="3">
<p style="color:#D7D4D2;">格式：工作单位（或项目名称），担任职位，时间，工作内容描述</p>
<textarea rows="4" cols="40" style="overflow:scroll" wrap="off"></textarea>
</td>
</tr>
<!-- ·····························联系方法························ -->
<tr><td colspan="4" align="center" style="background-color:#F2F2F2;"> 联系方法</td></tr>
<tr>
<td align="right"><label>电 话</label></td>
<td><input type="text" /></td>
<td align="right"><label>手 机</label></td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td align="right"><label>E-mail</label></td>
<td colspan="3"><input type="text" /></td>
</tr>
<tr>
<td align="right">通讯地址</td>
<td colspan="3"><input type="text" /></td>
</tr>
<tr>
<td align="right">邮 编</td>
<td colspan="3"><input type="text" /></td>
</tr>
<!-- ·····························其他························ -->
<tr><td colspan="4" align="center" style="background-color:#F2F2F2;">其他</td></tr>
<tr height="80">
<td align="right"><label>调 查</label></td>
<td colspan="3">
<p class="font1">你是如何理解本站的：</p>
<input type="checkbox" />海报
<input type="checkbox" />报纸
<input type="checkbox" />电视
<input type="checkbox" />朋友介绍
<input type="checkbox" />搜索引擎
</td>
</tr>
<tr>
<td colspan="4" align="center"><input name = "re" type="reset" value="提交报名信息"><input name = "sub" type="submit" value="取消重新填写"></td>
</tr>
</table>
</form>
</body>
</html>
4.利用css对网页文件1.html做如下设置
(1)h1标题字体颜色为白色、背景颜色为蓝色、居中、四个方向的填充值15px
(2)使文字环绕在图片周围，图片边线：粗细1px,颜色#9999cc，虚线，与周围元素的边界5px
(3)段落格式：字体大小12px，首行缩进两字符、行高1.5倍行距、填充值5px
(4)消除网页内容与浏览器窗口边界间的空白、并设置背景色#ccccff
(5)给两个段落加不同颜色的右边线：3px double red和3px double orange
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/* (4)消除网页内容与浏览器窗口边界间的空白、并设置背景色#ccccff */
body {
margin: 0;
background-color: #ccccff;
}
/* （1）h1标题字体颜色为白色、背景颜色为蓝色、居中、四个方向的填充值15px */
.p1 {
text-align: center;
}
.p1>.h1 {
color: #fff;
background-color: blue;
padding: 15px;
display: inline-block;
}
/* (2)使文字环绕在图片周围，图片边线：粗细1px,颜色#9999cc，虚线，与周围元素的边界5px */
.p2>img {
border: 1px dashed #9999cc;
margin: 5px;
float: left;
}
/* (3)段落格式：字体大小12px，首行缩进两字符、行高1.5倍行距、填充值5px */
/* (5)给两个段落加不同颜色的右边线：3px double red和3px double orange */
.p2>p {
border-right: 3px double red;
}
.p3>p {
font-size: 12px;
text-indent: 20px;
line-height: 150%;
padding: 5px;
border-right: 3px double orange;
}
</style>
</head>
<body>
<div class="p1">
<h1 class="h1">标题1</h1>
</div>
<div class="p2">
<img src="img/002.jpg" alt="">
<p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
<div class="p3" style="clear: both;">
<p>标题1XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxx
</p>
</div>
</body>
</html>
5.Javascript做如下题目
设计一个表单，该表单有姓名和某种卡号两个文本输入框，其中这种卡号的格式为 XXXX-XXXX-XXXX-XXXX位数字 ，要求在用户单击提交按钮 “ 发送 ” 之前验证这两个输入数据的有效性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="">
<input type="text" name="name">
<input type="text" name="cardId">
<button id="btn" type="button">发送</button>
</form>
<script type="text/javascript">
var btn = document.querySelector("#btn");
btn.addEventListener("click", function() {//添加点击事件，鼠标一点击就触发
var name = document.querySelector("[name=name]");
var nameVal = name.value;
if (nameVal.length > 6 && nameVal.length < 12) {
//合法
} else {
alert("不合法的用户名");
return;
}
var cardId = document.querySelector("[name=cardId]");
var cardIdVal = cardId.value;
/* var pattern = /^\w{4}-\w{4}-\w{4}-\w{4}$/;
var pass = pattern.test(cardIdVal);
console.log(pass); */
var array = cardIdVal.split("-");
if (array.length != 4) {
//不合法
return;
}
if (array[0].length != 4 || array[1].length != 4 || array[2].length != 4 || array[3].length != 4) {
//不合法
}
});
</script>
</body>
</html>
194
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
