期末作品用DW软件结合HTML和css来制作一个在线简历，成果图如下：
HTML代码如下：主要使用表格
<!DOCTYPE html>
<html>
<head><title>我的简历</title><meta charset="utf-8"><link href="../CSS/JL_c.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--<h1 align="center">个人简历</h1>-->
<div class="box">
<table width="100%" height="100%" cellpadding="5px" cellspacing="0" align="center" border="0" ><tr align="center"><th colspan="7" bgcolor="#06B5F0" class="wl2">基本信息</th></tr><tr><td width="32" align="left"><img src="../img/个人头像_o.png"></td><td width="100" align="left">姓名</td><td width="100" align="left">求学者—</td><td width="32" align="left"><img src="../img/地址 (1).png"/></td><td width="100" align="left">现居</td><td width="100" align="left">广西南宁</td>
<!-- <td width="150" rowspan="3" colspan="2" align="center"><a href="#" target="_blank">证件照</a> </td>--><td width="150" rowspan="3" colspan="2" align="center"><img id="tx" width="140" src="../img/头像 女孩.png"/></td> </td></tr><tr><td width="32" align="left"><img src="../img/学校.png"/></td><td width="100" align="left">毕业院校</td><td width="150" align="left" >广西****学院</td><td width="32" align="left"><img src="../img/专业权威.png"/></td><td width="50" align="left">所学专业</td><td width="150" align="left">物联网工程</td></tr><tr><td width="32" align="left"><img src="../img/职位.png"/></td><td width="32" align="left">意向职位</td><td width="100" align="center" >嵌入式工程师助理</td><td width="32" align="left"><img src="../img/电话.png"/></td><td width="100" align="left">电话</td><td width="100" align="left">1930210401**</td></tr><tr align="center"><th colspan="7" bgcolor="#06B5F0" class="wl2" >教育背景</th></tr><tr><td width="100" colspan="2" align="center">起止时间</td><td width="100" colspan="2" align="center">毕业院校</td><td width="100" colspan="2" align="center">专业</td><td width="100" align="center">学历</td></tr><tr><td width="100" height="18" colspan="2" align="center">2019.09-2023.06</td><td width="100" height="18" colspan="2" align="center"><a href="http://www.gxnun.edu.cn/" target="_blank">广西****学院</a></td><td width="100" height="18" colspan="2" align="center">物联网工程专业</td><td width="100" height="18" align="center">本科</td></tr><tr><td width="100" height="18" colspan="2" align="center">主修课程</td><td width="100" height="18" colspan="5" align="center">HTML、STM32、linux、LORa、窄带物联网、计算机网络、通信电子电路等</td></tr><tr align="center"><th colspan="7" bgcolor="#06B5F0" class="wl2">项目经验</th></tr><tr><td width="16" colspan="1" height="35" align="center"><img src="../img/风筝.png"/></td><td width="100" colspan="2" align="left">物联网智能家居系统</td><td width="100" colspan="2" align="left">程序设计</td><td width="100" height="35" colspan="2" align="center"><a href="智能家居超链接页面.html" target="_blank">该项目是制作一款基于物联网技术的智能家居系统</a></td></tr><tr><td width="16" colspan="1" align="center"><img src="../img/风筝.png"/></td><td width="100" height="35" colspan="2" align="left">基于云端的操控小车</td><td width="100" height="18" colspan="2" align="left" >程序设计、硬件设计</td><td width="100" height="18" colspan="2" align="center" ><a href="云端操控小车超链接页面.html" target="_blank">该项目是通过web端操控与四驱小车的行使</a></td></tr><tr><td width="16" colspan="1" align="center"><img src="../img/风筝.png"/></td><td width="100" height="35" colspan="2" align="left">基于STM32的室内定位系统</td><td width="100" height="18" colspan="2" align="left">程序设计</td>
<!-- <td width="100" height="18" colspan="2"align="center"><a href="#" target="_blank">这是一款能够在室内环境下进行定位的系统，这款室内定位系统 </a></td>--><td width="100" height="18" colspan="2" align="center" ><a href="#" target="_blank">这是一款能够在室内环境下进行定位的系统，这款室内定位系统</a></td></tr><tr><td width="16" colspan="1" align="center"><img src="../img/风筝.png"/></td><td width="100" height="18" colspan="2" align="left">全国大学生电子设计竞赛</td><td width="100" height="18" colspan="2" align="left">程序设计、硬件设计</td><td width="100" height="18" colspan="2" align="center"><a href="#" target="_blank">该项目是研究简单无接触温度测量与身份识别装置</a></td></tr><tr><td width="100" height="150" colspan="2" align="center" bgcolor="#7EB3FB" class="wl"><b>技能</b></td><td colspan="5"><img id="jn" src="../img/QQ截图20220605143255.png" class="item"/></td></tr><tr><td width="100" height="120" colspan="2" align="center" bgcolor="#6CA8F9" class="wl"><b>荣誉</b></td><td colspan="5"><div>互联网+比赛:  获得省级铜奖一项、校级银奖一项、校级优秀奖两项</div><br /><div>电子设计竞赛:  获得省级二等奖一项</div><br /><div>校内所获奖项:  获得国家励志奖学金一项，校级优秀奖学金一项，三好学生一项</div><br /><div>其它奖项:    全国计算机二级C语言合格，发表省级论文一篇</div><br /></td></tr><tr><td width="100" height="80" colspan="2" align="center" bgcolor="#7EB3FB" class="wl"><b>自我评价</b></td><td colspan="5"><p> 吃苦耐劳，可以接受中等强度的加班和出差工作</p><p> 有较好的理性逻辑思维，乐于交友，善于利用团队协作的力量从多角度分析问题</p></td></tr></table></div> </body>
</html>
在CSS样式中主要有用伪选择器实现了鼠标滑动的效果，比如划过标题或者头像可以变大或者实现图片透明效果，还有一些字体大小颜色的设计、图片设计的样式等。代码如下：
@charset "utf-8";
/* CSS Document *//**{padding: 0;margin: 0;
}
*//*h1{color:blue}*/.box{width: 750px;height: 1100px;margin: auto; /*外边距：居中对齐*/ background-color:#F7F8FB; /*背景颜色*/border: solid 2px #0CF;/*设置边框样式*/
}.wl:hover{ /*伪类选择器，当鼠标滑过时执行效果*/
/* background:#F2CB51;*/
opacity: 0.5;/* 透明度0.5 */}
.wl2:hover{
/* background:#D52FE5;*/
opacity: 0.5;/* 透明度0.5 */}.item:hover{opacity: 0.5;/* 透明度0.5 */}#tx:hover{opacity: 0.5;/* 透明度0.5 */transform: scale(1.2,1.2);/*鼠标滑过变大1.2倍 */
}a{display: block; /*转成块状元素*/ width: 150px; /*设置固定显示的宽度*/white-space: nowrap; /*不换行，强制在一行内显示*/ text-overflow: ellipsis;/*文本溢出是显示省略标记……*/overflow: hidden; /*设置溢出内容为隐藏*/text-decoration: none;/*取消超链接的下划线效果 */}#jn {
/* 技能原图片大小：981*324 ，现在 等比例缩放0.5倍 */width: 491px;height: 162px;}
