用html和CSS做个人简历
最新推荐文章于 2024-05-12 03:14:35 发布
zsyabcd
最新推荐文章于 2024-05-12 03:14:35 发布
阅读量6.8k
收藏
118
点赞数
12
最新推荐文章于 2024-05-12 03:14:35 发布
阅读量6.8k
收藏
118
点赞数
12
很多刚学web的同学第一个项目应该都是做一个个人简历，这个是查了多方资料的刚刚写出来的一个简历，所以可能会参考网上的一些代码，兄弟们拿去复制就可以。里面有的注释可能不太对劲，不要太在意，毕竟我也是一个刚学一周的小菜鸟。也希望大佬们多来指正。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>我的简历</title>
<style >
*{
box-sizing: border-box;/* 将所有的box-sizing换成border-box */
}
body {
background: #eee;
margin: 30px 0;
}
article {
width: 21cm;
min-height: 29.7cm;/* A4纸的大小 */
background: white;
margin: 0 auto;/* 左右居中 */
overflow: auto;/* 如果内容被修剪，则浏览器会显示滚动条，以便查看其余内容 */
padding: 1em;/* 内边距 */
}
</style>
<style>
body{}
article{padding-top: 20px;}
p{margin: .3em 0;}/* p的行间距 */
h1{font-size: 25px;
margin-top: 0;}
ol,ul{list-style: none;}/* 不要ol和ul之前的数字，因为它会影响到后面的宽度*/
h3,h4,h5,h6{margin: 0;}
h4,h5,h6{font-weight: normal;}/* 取消这几个标题的加粗 */
.bio{position: relative;}
.bio img{
position: absolute;/* 让图片顶上去和文字保持水平 */
top:0;
right: 0;
}
ul{
margin: 0;
padding: 0;/* 使ul标签和li标签文字能够对齐 */
}
</style>
<style>
.work{}
.work>h2{}/* >选择器 */
.work>ol{
list-style-position: inside;
margin-top: 0;
padding: 0;}
.work>ol>li{margin: 12px 0;}
.work header{
display: flex;
color: #666;
margin-bottom: 12px;
}
.work header>h3{
font-size: 18px;
color: #333;
}
.work header>h4{
margin-left: 1em;
font-size: 18px;
}
.work header>span{
font-size: 18px;
margin-left: auto;
}
.work li{color: #666;}
.work strong{color: #F60;}/* strong标签里的字的颜色 */
</style>
<style>
.projects{}
.projects p{color: #666;}/* p段字体的颜色 */
.projects strong{color: #f60;}
.projects > ol{
list-style-position: inside;
margin-top: 0;/* 使li标签和ol标签的文字能够对齐 */
padding: 0;
}
.projects >ol >li{
margin-bottom: 24px;/* ol标签和li标签之前的间距 */
}
.projects > ol > li > header{
display: flex;/* 把链接和文案分开 */
justify-content: space-between;
}
.projects > ol > li h3{
display: inline-block;
color: #333;
}
</style>
<style>
.major{
}
.major > ol{
list-style-position: inside;
margin-top: 0;
padding: 0;
}
.major > ol > li > header{
display: flex;
justify-content: space-between;
}
.major > ol > li h2{
display: inline-block;
}
.major h4{
font-weight: normal;
color: #666;
}
.major strong{color: #f60;}
.tupian img{
position: relative;
bottom: 5px;
left: 500px;
}
.major >.wrapper{
display: flex;
justify-content: space-between;/* 使两个盒子并列分布 */
}
.major >.wrapper:first-child{
margin-right: 24px;/* 两个盒子之间的间距，first-child是第一个元素，因为我们不确定哪个盒子是第一个 */
}
.major >.wrapper>#tupian{
margin-bottom: 18px;
}
.major >.wrapper>ul>li{
line-height: 1.5;
margin-bottom: 8px;
}
</style>
<style>
.huojiang{
}/* 基本和上面都是一样的 */
.huojiang > ol{
list-style-position: inside;
margin-top: 0;
padding: 0;
}
.huojiang > ol > li > header{
display: flex;
justify-content: space-between;
}
.huojiang > ol > li h2{
display: inline-block;
}
.huojiang h4{
font-weight: normal;
color: #666;
}
.huojiang strong{color: #f60;}
</style>
</head>
<body>
<article>
<section class="bio">
<h1>*</h1>
<img src="images/zheng.jpg" alt="" width="150" height="200"/>
<p>女| 21岁 | web前端开发工程师 | 地址</p>
<p>手机：* | 微信：* | 邮箱：8</p>
</section>
<section>
<h2>教育经历</h2>
<p>
<span><time>2018年</time>~<time>2022年</time></span>
*大学   计算机与信息工程学院   计算机科学与技术   本科
</p>
</section>
<hr /><!-- 画个横线 -->
<section class="work"><!-- 给他设个名字，方便css中调用 -->
<h2>工作经历</h2>
<ol>
<li>
<header>
<h3>**集团</h3>
<h4>财务助理</h4>
<span><time>2018年12月</time>~<time>2019年2月</time></span>
</header>
<ul>
<li>负责每天汇总分店营业额，整理财务报表。</li>
</ul>
</li>
<li>
<header>
<h3>*文化有限公司</h3>
<h4>助理</h4>
<span><time>2019年7月</time>~<time>2020年8月</time></span>
</header>
<ul>
<li>负责监<strong>*软件</strong>工作是否异常，<strong>做一些简单修改</strong>。</li><!-- strong是加粗 -->
<li>如果出现重大异常需要及时和*的人交流，<strong>并协助修改代码</strong>。</li>
</ul>
</li>
<li>
<header>
<h3>***</h3>
<h4>***<strong>***</strong></h4>
<span><time>2019年8月</time>~<time>2019年9月</time></span>
</header>
<ul>
<li>***</li>
</ul>
</li>
</ol>
</section>
<hr />
<section class="projects">
<h2>项目经历</h2>
<ol>
<li>
<header>
<h3>遇见匠音</h3>
<a href="#">项目预览</a>
</header>
<p>
一款针对提高大学生音乐素养的一个<strong>大创项目</strong>
</p>
</li>
<li>
<header>
<h3>弦上音乐</h3>
<a href="#">项目预览</a>
</header>
<p>
一个以私人订制展开的音乐课程班的<strong>大创项目</strong>
</p>
</li>
</ol>
</section>
<hr />
<section class="huojiang">
<h2>获奖经历</h2>
<ol>
<li>
<header>
<h4>挑战杯大赛<strong>校级三等奖</strong></h4>
</header>
</li>
<li>
<header>
<h4>大学生创业项目<strong>自治区级</strong></h4>
</header>
</li>
<li>
<header>
<h4>一篇期刊论文<strong>国家级</strong>（普刊）</h4>
<a href="#">论文预览</a>
</header>
</li>
</ol>
</section>
<section class="major">
<hr />
<h2>专业技能</h2>
<div class="wrapper">
<ul>
<li>
<header>
<h4>钢琴社会<strong>8级</strong>证书</h4>
</header>
</li>
<li>
<header>
<h4>声乐社会<strong>8级</strong>证书</h4>
</header>
</li>
<li>
<header>
<h4>*<strong>签约作者</strong></h4>
</header>
</li>
<li>
<header>
<h4><strong>雅思</strong>六分</h4>
</header>
</li>
</ul>
<div id="tupian" style="width: 500px; height: 270px;"><!-- 为了使这个表格在文案的后面所以这个盒子要放在这里 -->
<table width="250" height="200" border="1" cellspacing="0" cellpadding="10" align="center" /><!-- 表格的一些属性 -->
<!--表格标题-->
<caption>证书时间表</caption>
<thead><!--只是表示结构，表格中的特有标签-->
<tr><!--行-->
<th>证书1</th><!--单元格-->
<th>级别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr><!--行-->
<td>钢琴8级</td><!--单元格-->
<td>国家级</td>
<td>12</td>
</tr>
<tr><!--行-->
<td>声乐8级</td><!--单元格-->
<td>国家级</td>
<td>15</td>
</tr>
</tbody>
</table></div>
</div>
</section>
</article>
</body>
</html>
这个是做出来的效果，可以参考一下。
1万+
暂无认证
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
