期末大作业纯前端技术实现个人简历模板

Posted 2022-05-27 肥学

演示部分

期末作业——纯前端的网站页面

源码部分

主html

说实话没什么技术，就不展示了

css

部分展示

/*引入字体*/
@font-face 
  font-family: "Pacifico";
  src: url('../font/PACIFICO.ttf');

@font-face 
  font-family: "Quicksand";
  src: url('../font/Quicksand-Bold.ttf');

@font-face 
  font-family: "Quicksand_light";
  src: url('../font/Quicksand-Light.ttf');

/*引入字体小图标*/
@font-face 
  font-family: 'iconfont';
  src: url('../font/icons/iconfont.eot');
  src: url('../font/icons/iconfont.eot?#iefix') format('embedded-opentype'), url('../font/icons/iconfont.woff2') format('woff2'), url('../font/icons/iconfont.woff') format('woff'), url('../font/icons/iconfont.ttf') format('truetype'), url('../font/icons/iconfont.svg#iconfont') format('svg');

div#bg 
  position: fixed;
  z-index: -1;
  width: 100%;
  height: 100%;

div#bg div.bg1 
  position: absolute;
  top: 0;
  left: 0;
  width: 758px;
  height: 519px;
  background: url("../img/bgimg/bg-left.png") no-repeat;

div#bg div.bg2 
  position: absolute;
  top: 0;
  right: -200px;
  width: 633px;
  height: 536px;
  background: url("../img/bgimg/bg-right.png") no-repeat top right;

@media screen and (max-width: 980px) 
  div#bg div.bg1,
  div#bg div.bg2 
    background: #F3F3F3;
  

div#header 
  width: 100%;
  max-width: 1240px;
  height: 90px;
  margin: 0 auto;
  position: relative;

@media screen and (max-width: 980px) 
  div#header 
    background-color: white;
  

div#header .logo 
  width: 165px;
  height: 32px;
  position: absolute;
  top: 29px;
  left: 35%;
  transform: translateX(-50%);

@media screen and (max-width: 980px) 
  div#header .logo 
    left: 130px;
  

div#header .logo img 
  display: block;
  float: left;
  height: 32px;
  width: 32px;

div#header .logo span 
  float: left;
  font-family: "Pacifico";
  font-size: 26px;
  line-height: 32px;
  letter-spacing: 3px;
  font-weight: 700;

div#header .btn 
  width: 50px;
  height: 50px;
  float: right;
  margin: 20px 80px 0 0;
  border-radius: 50%;
  box-shadow: -1px 1px 5px #999;
  font-size: 26px;
  text-align: center;
  line-height: 50px;
  background-color: white;
  cursor: pointer;
  transition: box-shadow 0.3s;
  font-family: "iconfont" !important;

点击直接资料领取

发送 0013
如果你在学习python或者Java哪怕是C遇到问题都可以来给我留言，因为在学习初期新手总会走很多弯路，这个时候如果没有有个人来帮一把的话很容易就放弃了。身边很多这样的例子许多人学着学着就转了专业换了方向，不仅是自身问题还是没有正确的学习。所以作为一个过来人我希望有问题给我留言，说不上是帮助就是顺手敲几行字的事情。

这里有python，Java学习资料还有有有趣好玩的编程项目，更有难寻的各种资源。反正看看也不亏。