HTML5+CSS——个人在线简历
求学者_
帮助1人
期末作品用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="https://blog.csdn.net/qq_51608866/article/details/125711386" 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="https://blog.csdn.net/qq_51608866/article/details/125711386" 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;
}
这篇好文章是转载于：学新通技术网
- 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
- 本站站名： 学新通技术网
- 本文地址： /boutique/detail/tanhgfegge
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储，并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01
