期末作品用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; }
