HTML5+CSS——个人在线简历

期末作品用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>互联网+比赛:&emsp;&emsp;获得省级铜奖一项、校级银奖一项、校级优秀奖两项</div><br /><div>电子设计竞赛:&emsp;&emsp;获得省级二等奖一项</div><br /><div>校内所获奖项:&emsp;&emsp;获得国家励志奖学金一项，校级优秀奖学金一项，三好学生一项</div><br /><div>其它奖项:&emsp;&emsp;&emsp;&ensp;全国计算机二级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>&nbsp;&nbsp;吃苦耐劳，可以接受中等强度的加班和出差工作</p><p>&nbsp;&nbsp;有较好的理性逻辑思维，乐于交友，善于利用团队协作的力量从多角度分析问题</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;}

HTML5+CSS——个人在线简历相关推荐

HTML5,CSS制作个人简历
先建立index页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
html5 css 响应式_在HTML5 / CSS3中编写响应式简历
本文是我们的" Web响应式设计系列"的一部分,该系列由工具,资源和教程组成,可帮助您为所有平台的用户创建网站. 单击此处查看同一系列的更多文章. 业务部分的几乎每个人都在某个时间 ...
html简单个人网页制作 HTML5+CSS大作业——程序员个人简历设计(5页)
HTML5+CSS大作业--程序员个人简历设计(5页) 常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. ...
HTML5+CSS大作业——响应式个人简历介绍(5页)-模板下载
HTML5+CSS大作业--响应式个人简历介绍(5页)-模板下载常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. ...
HTML5+CSS大作业——个人简历设计(5页)
HTML5+CSS大作业--个人简历设计(5页) 常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. ...
HTML5+CSS大作业——IT技术个人简历(1页)
HTML5+CSS大作业--IT技术个人简历(1页) 常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体 ...
HTML5+CSS大作业——程序员个人简历设计(5页)
HTML5+CSS大作业--程序员个人简历设计(5页) 常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. ...
网页规划与设计HTML5+CSS大作业——响应式个人简历介绍(5页)-模板下载
HTML5+CSS大作业--响应式个人简历介绍(5页)-模板下载常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. ...
html做空白简历,第二天：给自己做一个在线简历吧-IFE
第二天:给自己做一个在线简历吧日期总用时学习目标 2018.07.31 4h 了解HTML 学习目标 HTML5是什么.学习基本的HTML标签,理解HTML语义化概念制作简历学习内容学习笔 ...
为提高访问速度建立本地文件服务器,html5 Application Cache——加快简历二次访问速度...
上篇博客(在github上写个人简历--最简单却又不容易的内容罗列)介绍了我在github上放的一个个人在线简历,有朋友看了后告诉我一个很大缺陷,使用github挺慢的,每次看的时候都很慢,第一反应这 ...

HTML5+CSS——个人在线简历

HTML5+CSS——个人在线简历相关推荐

最新文章

热门文章