html/css做一个简单的个人简历

今天闲着无聊做了个简单的小demo，做完了之后还是很无聊，就简单整理了下，写下了这篇文章。

话不多说，按照惯例先放效果图

上面是移动端的效果图，pc端布局一样，只是某些元素的大小略有不同

响应式主要是依靠媒体查询和vw，vh单位实现的

head标签里的代码如下

<title>个人简历</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />

还是简单介绍一下vw，vh单位吧，vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。但是它相对的不是父节点或者页面的根节点。而是视窗（Viewport）大小。简单的说，就是把视窗的宽高均分为100份，1vw就是1%的视窗宽度，同理1vh就是1%的视窗高度。

再来看看body部分的代码

<header><div class="rect" style="float:left"></div>Personal<div class="rect" style="float:right"></div><div class="title">个人简历</div>
</header>
<section>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名:<p>山藏</p><br><br>毕业院校:<p>家里蹲</p><br><br>所学专业:<p>你猜</p><br><br>联系电话:<p>010100101</p><br><br>电子邮箱:<p>shanzang</p><br><br>
</section>
<footer>希望有个平台可以让我展现自己的才华!
</footer>

还有css部分的代码

section p{border-bottom:1px solid #234064;display: inline-block;}.title{border:3px solid #243e5d;font-size: 2rem;margin:20vh 10vw 0 10vw;padding:10vh 0vw;}header{width:100%;text-align:center;font-size: 2em;background: #faf6f3;padding:20vh 0 20vh 0;
}section{background: #faf6f3;text-align:center;height:16em;}footer{background: #faf6f3;text-align: center;height:6vh;}

响应式主要改变了在不同的像素宽下，body占整个页面的的比例，像素宽低于500的时候，body部分所占比例是100%，但是如果屏幕宽度过宽的话，简历就显的很宽，所以像素宽大于640的话，将比例设置为了60%。

剩余css代码为

*{margin:0vw;padding:0vw;
}
@media screen and (max-width: 640px){body{color:#234064;max-width:100%;font-size:14px;}.rect{width:25vw;background:#243e5d;height: 8vh;border-radius: 10vw;}section p{width:45vw;
}
}
@media screen and (min-width:500px){body{max-width: 60%;color:#234064;margin:0 auto; border:6px groove #d4d4d4;}.rect{width:18vw;background:#243e5d;height: 8vh;border-radius: 0.8em;}section p{width:26vw;
}
}

好了，今天的分享就到这里了，如果你有任何不懂的地方，都可以私聊我。

html/css做一个简单的个人简历相关推荐

使用css做一个简单的车轮滚滚效果
学了css之后发现很多效果只要几行代码就能实现,这个车轮滚滚的效果也不例外. 首先设置个大盒子,设置他的宽度(随意多少,但是肯定要比车轮的宽度大),高度与车轮保持一致即可.跟我一起来做个简单的车轮滚滚 ...
用HTML+CSS做一个简单好看的环保网页
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 环境保护 | 保护地球 | 校园环保 | 垃圾分类 | 绿色家 ...
用HTML+CSS做一个简单好看的校园社团网页
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 校园班级网页设计 | 我的班级网页 | 我的学校 | 校园社团 ...
用HTML+CSS做一个简单的美食网页---web学生网页设计作业源码
Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业,精彩专栏推荐美食网页介绍 | 甜品蛋糕 | 地方美食小吃文化 | 餐饮文化 | 等网站的设计 ...
html+css——做一个简单的底部导航栏
ps:小项目由html和css实现目录项目设计效果图设计 html部分 css部分源代码项目设计效果图话不多说,先直接上一下完成后的效果图: 通过以上效果图可以大致想一下你的思路,以及 ...
只用html5与CSS做一个简单的页面,HTML+CSS基础训练之做一个简单页面的布局
下面进入正题:布局是网页设计的基础中的基础,一个好的布局可以让人一目了然,一个失败的布局会让协同人员抓狂.所以前端开发,从布局开始. 首先分析一下图片的布局 ,分析各个色块之间的嵌套关系如图所示:红 ...
用表格做一个简单地个人简历
有注释 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8& ...
用HTML和CSS做一个简单的静态京东手机端页面含源码分享
10分钟内的时间可以完成,具体完成效果如下: 百度链接:https://pan.baidu.com/s/11XGuDfeDZsY2xYYmq4KcRg 提取码:42jq 整体文件为: 代码部分: i ...
用HTML+CSS做一个简单好看的汽车网页

html/css做一个简单的个人简历

html/css做一个简单的个人简历相关推荐

最新文章

热门文章