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

本文链接： https://blog.csdn.net/jiang12138/article/details/100176607

今天闲着无聊做了个简单的小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做一个简单的个人简历

猜你喜欢