本文内容选自《Web前端开发技术实验与实践》--储久良著
项目18+项目21
前提：有两个文件名为html的文件，分别记为prj_6_1.html和prj_7_2.html以及一张bgimage.jpg（蓝色蝴蝶材料图）
prj_6_1.html正文部分：
html
<!-- prj---6.1.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>实训6</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
p {
text-indent: 2em;
}
h2 {
text-align: center;
}
table {
font-size: 12px;
width: 720px;
height: 420px;
border-collapse: collapse;
margin: 0 auto;
}
#div0 {
position: relative;
width: 720px;
height: 626px;
margin: 0 auto;
}
#div1 {
height: 174px;
}
#div2 {
width: 200px;
height: 40px;
background-color: #0000CC;
color: white;
position: absolute;
text-align: center;
top: 215px;/* #div1(174px)+#td1(82px/2)=215px */
left: -35PX;
transform: translateY(-50%);/*自身一半*/
display: flex;
justify-content: center;
align-items: center;
}
table #td1 {
height: 82px;
}
h3 {
font-size: 20px;
color: white;
padding: 10px 20px;
font-family: 微软雅黑;
}
table .row1,
table #td1 {
background-color: #E1E1E1;
text-align: center;
}
table tr:nth-child(2) {
height: 35px;
}
</style>
</head>
<body>
<div id="div0">
<div id="div1">
<h2>TF43:前端的发展和未来论坛</h2>
<p>前端是互联网技术的重要一环，自上世纪80年代万维网技术创立以来，Web成就了大量成功的商业公司，也诞生了诸多优秀的技术解决方案。因其标准性和开放性，前端技术社区非常活跃。前端技术虽然起步较晚，但是发展速度非常快。
</p>
<p>今天的Web前端在各个公司都是不可或缺的岗位，职能也从纯粹的Web前端，扩展到小程序、与客户端混合编程、loT等诸多领域，此次TF邀请到各个顶级互联网公司的前端最高负责人，旨在分享前端团队的管理和发展思路。
</p>
</div>
<div id="div2">
<h3>CCF TF技术前线</h3>
</div>
<table align="center" border="1" cellspacing="0px">
<tr id="td1">
<th colspan="3">
<p>只为技术专家</p>
<p>CCF TF第43期</p>
<p>主题 前端的发展与未来</p>
<p>2021年7月31日 9:00-17:30</p>
<p>中科院计算所 四层报告厅(北京海淀区科学院南路6号)</p>
</th>
</tr>
<tr id="row2">
<th>会议时间</th>
<th>演讲人</th>
<th>会议名称</th>
</tr>
<tr>
<td>09:00-09:10</td>
<td>张高CCFTF前端SIG主席</td>
<td>开场致词</td>
</tr>
<tr>
<td>09:10-10:05</td>
<td>姜凡淘系技术部前端团队负贵人,阿里巴巴经济体前端技术委员会主席</td>
<td>《淘系前端价值体系的思考》</td>
</tr>
<tr>
<td>10:05-11:00</td>
<td>月影字节跳动技术中台前端团队负麦人</td>
<td>《技术社区与职业成长》</td>
</tr>
<tr class="row1">
<td>11:05-11:10</td>
<td colspan="2">Break</td>
</tr>
<tr>
<td>11:10-12:05</td>
<td>贺师俊(hax)开放原子开源基金会TOC成员,Ecma-TC39特邀专家</td>
<td>《我们如何参与JS语言标准的制定》</td>
</tr>
<tr class="row1">
<td>12:05-13:30</td>
<td colspan="2">午餐</td>
</tr>
<tr>
<td>13:30-14:25</td>
<td>赵锦江Shopee新加坡前端委员会负责人</td>
<td>《从海外视角看前端团队的组织与发展》</td>
</tr>
<tr>
<td>14:25-15:20</td>
<td>杨永林贝壳如视技术中心负麦人</td>
<td>《前端三维技术的应用前景》</td>
</tr>
<tr class="row1">
<td>15:20-15:30</td>
<td colspan="2">Break</td>
</tr>
<tr>
<td>15:30-16:25</td>
<td>周鹏软件与体验部高级前端工程师/小米集团技术委前端技术委员会委员</td>
<td>《前端在"手机xAloT"领域的探索》</td>
</tr>
<tr class="row1">
<td>15:30-16:25</td>
<td colspan="2">圆桌论坛</td>
</tr>
</table>
</div>
</body>
</html>prj_6_1.html图片显示部分：
prj_7_2.html正文部分：
html
<!-- prj---7.2.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>实训7</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body {
background-color: #BBDCFF;
border: 20px solid #BBDCFF;
}
form {
width: 850px;
height: 100%;
margin: 0 auto;
border: 14px solid #ffffff;
}
table {
background: url(bgimage.jpg);
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
.bt1 {
font-size: 35px;
line-height: 100px;
font-family: 黑体;
color: #0033FF;
text-align: center;
}
#p1 {
padding: 10px 0px;
text-indent: 2em;
font-size: 18px;
font-weight: bold;
color: #3366FF;
}
table tr {
border-top: 1px solid #fff;
}
table .text {
padding: 1px;
padding-left: 5px;
}
table .select {
padding: 3px 1px;
}
table .no {
border: none;
padding-bottom: 10px;
display: block;
}
table .td1 {
display: block;
font-weight: bold;
font-size: 18px;
color: #3300CC;
padding: 5px 10px;
line-height: 28px;
}
table tr .some {
padding-left: 10px;
}
table .last {
text-align: center;
height: 50px;
}
table button {
padding: 2px 3px;
}
table font {
color: #1219ff;
font-weight: bold;
}
</style>
</head>
<body>
<form method="post" action="//提交页面的URL">
<table>
<tr>
<td colspan="2">
<h2 class="bt1">大学生暑期社会实践调查问卷</h2>
</td>
</tr>
<tr>
<td colspan="2">
<p id="p1">亲爱的同学:大家好!</p>
<p id="p1">
为了更好的了解人们对近年来计算机类专业填报火热现象的看法，特制定本问卷，希望得到您的配合，请认真阅读并回答以下问题，您的回答将直接影响本调查的可信度和有效性，真诚感谢您的支持，祝您天天愉快，谢谢!
</p>
</td>
</tr>
<tr class="td1">
<td><span>1、您的性别：</span></td>
<td>
<input type="radio" name="sex" id="sex1" value="男">
<label for="sex1">男</label>
<input type="radio" name="sex" id="sex2" value="女">
<label for="sex2">女</label>
</td>
</tr>
<tr class="td1">
<td><span>2、您的学校：</span></td>
<td><input required class="text" type="text" name="school" size="40"></td>
</tr>
<tr class="td1">
<td><span>3、您的年级：</span></td>
<td>
<select required class="select" name="age">
<!-- 默认显示不可选择 -->
<option value="" disabled selected>请选择您的年级：</option>
<option value="one">大一</option>
<option value="two">大二</option>
<option value="three">大三</option>
<option value="four">大四</option>
<option value="five">大专</option>
</select>
</td>
</tr>
<tr class="td1">
<td colspan="2">
<div>4、报考该专业的原因：</div>
</td>
</tr>
<tr class="no">
<td class="some" colspan="2">
<input type="checkbox" name="why" id="one_4" />
<label for="one_4">自己感兴趣</label><br>
<input type="checkbox" name="why" id="two_4" />
<label for="two_4">对将来发展有利</label><br>
<input type="checkbox" name="why" id="three_4" />
<label for="three_4">适应社会</label><br>
<input type="checkbox" name="why" id="four_4" />
<label for="four_4">父母主张</label><br>
<input type="checkbox" name="why" id="five_4" />
<label for="five_4">老师建议</label><br>
<input type="checkbox" name="why" id="six_4" />
<label for="six_4">学校调剂</label><br>
<input type="checkbox" name="why" id="seven_4" />
<label for="seven_4">其他</label><br>
</td>
</tr>
<tr class="td1">
<td colspan="2">
<div>5、您对专业的建议</div>
</td>
</tr>
<tr class="no">
<td class="some" colspan="2">
<input type="checkbox" name="some" id="one_5" />
<label for="one_5">招收时重质不重量</label><br>
<input type="checkbox" name="some" id="two_5" />
<label for="two_5">师资力量要改进</label><br>
<input type="checkbox" name="some" id="three_5" />
<label for="three_5">变更适应社会需要</label><br>
<input type="checkbox" name="some" id="four_5" />
<label for="four_5">加强专业实验室建设</label><br>
<input type="checkbox" name="some" id="five_5" />
<label for="five_5">其他</label><br>
</td>
</tr>
<tr class="td1">
<td colspan="2">
<div>6、您认为该专业学生有必要参加社会实践:</div>
</td>
</tr>
<tr class="no">
<td class="some" colspan="2">
<input type="radio" name="goto" id="yes_6">
<label for="yes_6">有必要</label>
<input type="radio" name="goto" id="no_6">
<label for="no_6">没有必要</label>
<input type="radio" name="goto" id="or_6">
<label for="or_6">无所谓</label>
</td>
</tr>
<tr class="td1">
<td colspan="2">
<div>7、您的父母是否赞成您读该专业:</div>
</td>
</tr>
<tr class="no">
<td class="some" colspan="2">
<input type="radio" name="happy" id="yes_7" />
<label for="yes_7">很赞成,希望如此</label><br>
<input type="radio" name="happy" id="no_7" />
<label for="no_7">一般，不是很高兴</label><br>
<input type="radio" name="happy" id="or_7" />
<label for="or_7">不了解</label><br>
</td>
</tr>
<tr class="td1">
<td>
<div>8、您对学校的建议:</div>
</td>
</tr>
<tr class="no">
<td class="some">
<textarea required name="for" rows="5" cols="100" placeholder="请您提出宝贵的建议："></textarea>
</td>
</tr>
</td>
<tr class="last">
<td>
<button type="submit" value="submit">提交答案</button>
<span> </span>
<button type="reset" value="reset">清空</button>
</td>
</tr>
<tr class="last">
<td colspan="2">
<font>版权所有:计算机科学与工程学院软件工程教研室Copyright©2020-2025</font>
</td>
</tr>
</table>
</form>
</body>
</html>prj_7_2.html图片显示部分：
