h5网站炫酷简历模板第一篇,共9篇

发布于 2021-10-12 08:03


   


           

           

为了使您能够更及时的更快的

获得前端自学坊文章推送

设为星标，设为星标，设为星标  

今天来讲一个

完整的个人简历网站

（其实也不能说是完整吧，这篇讲h5）

下期再讲css和js

可以先点原文链接预览一些效果

学习使我快乐

来来来，学点新知识， lang=“en” 表示语言是英语，但是中文的缩写是"zh",而不是“ch”。<meta> 标签提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。META元素通常用于指定网页的描述（description），关键词（keyname），文件的最后修改时间，作者（author）及网站字符编码的方式（charset）

name=“keyname”是浏览器搜索引擎的关键字，content表示浏览器搜出来网站的描述内容。name=“viewport”是网页为适应移动端优化，content表示浏览器搜出来网站的描述内容。里面提到 6 个属性：

width设置layout viewport  的宽度，为一个正整数，或字符串"width-device"（移动设备宽度）
initial-scale设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale允许用户的最大缩放值，为一个数字，可以带小数
height设置layout viewport  的高度，这个属性对我们并不重要，很少使用
user-scalable是否允许用户进行缩放，值为 "no" 或 "yes", no 代表不允许，yes 代表允许
  1. <html lang="en">
  2. <head>
  3. <meta charset="UTF-8">
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <meta name="keyname" content="前端自学坊，html5，css，js">
    <meta name="author" content="鹧鸪菜">
  6. </head>

下面是Nav导航栏，header__burger是控制左上角两条杠的div。header__menu是菜单绿盒子，header__menu-exit是控制菜单栏的x键，然后是一个ul无序列表分别提供跳转9个页码的链接。然后后面那个header__logo的div是放logo的里面没有放跳转链接那么默认是跳转最初页面。然后又一个ul重点跳转work和contact。

  1. <header class="header">
  2. <div class="header__wrapper">
  3. <div class="header__burger"><span> </span> </div>  
  4. <div class="header__menu">                
  5. <a class="header__menu-logo" href="">RK</a>    
  6. <div class="header__menu-exit"></div>  
  7. <div class="header__menu-content">      
  8.     <ul class="header__menu-list" id="myMenu">  
  9.         <li class="header__menu-item" data-menuanchor="home" data-anchor=".section_home"><a class="header__menu-link" href="#home">Home</a></li>
  10.         <li class="header__menu-item" data-menuanchor="about" data-anchor=".section__about"><a class="header__menu-link" href="#about">About</a></li>
  11.         <li class="header__menu-item" data-menuanchor="experience" data-anchor=".section__experience"><a class="header__menu-link" href="#experience">Experience</a></li>
  12.         <li class="header__menu-item" data-menuanchor="works" data-anchor=".section__works"><a class="header__menu-link" href="#works">Works</a></li>
  13.         <li class="header__menu-item" data-menuanchor="services" data-anchor=".section__services"><a class="header__menu-link" href="#services">Services</a></li>
  14.         <li class="header__menu-item" data-menuanchor="recognition" data-anchor=".section__recognition"><a class="header__menu-link" href="#recognition">Recognition</a></li>
  15.         <li class="header__menu-item" data-menuanchor="testimonials" data-anchor=".section__testimonials"><a class="header__menu-link" href="#testimonials">Testimonials</a></li>
  16.         <li class="header__menu-item" data-menuanchor="blog" data-anchor=".section__blog"><a class="header__menu-link" href="#blog">Blog</a></li>
  17.         <li class="header__menu-item" data-menuanchor="contacts" data-anchor=".section__contacts"><a class="header__menu-link" href="#contacts">Contacts </a></li>
  18.     </ul>
  19. </div>
  20. </div><a class="header__logo" href="">RK</a>
  21. <ul class="header__links">
  22.     <li><a href="#works">Work</a></li>
  23.     <li><a href="#contacts">Contacts</a></li>
  24. </ul>
  25. </div>
  26. </header>

.header__wrapper采用了-webkit-box-orient:horizontal;（指定子元素在一个水平线上从左至右排列）-webkit-box-direction:reverse;（盒子中子元素反向显示，及div中按代码顺序有<h1><h2><h3>,那显示的顺序是<h3><h2><h1>）-ms-flex-direction:row-reverse;flex-direction:row-reverse。

新知识：使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。

pointer是鼠标放在该元素上时是出现手型。

.header__burger span::after,.header__burger span::before{

content:'';position:absolute;width:50px;height:2px;background-color:#fffcf9}这段代码是显示两条杠（采用了伪类）

@media only screen and (max-width:450px){

.header__burger span::after,.header__burger span::before{

width:30px}这个就是在宽度为450的设备上.header__burger span的宽度变为50px。

.header__links li鼠标放上去字体颜色变成绿色。

.header__menu菜单在页面上所以采用了z-index为100.

  1. .header{
  2. position:fixed;top:0;left:0;z-index:100;width:100%}
  3. .header__wrapper{
  4. display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;align-items:center;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:35px 70px;background-color:#000}
  5. @media only screen and (max-width:1200px){
  6. .header__wrapper{
  7. padding:20px 45px}
  8. }
  9. @media only screen and (max-width:768px){
  10. .header__wrapper{
  11. -webkit-box-orient:horizontal;
  12. -webkit-box-direction:reverse;
  13. -ms-flex-direction:row-reverse;
  14. flex-direction:row-reverse}
  15. }
  16. @media only screen and (max-width:450px){
  17. .header__wrapper{
  18. padding:12px 10px 10px 6px}
  19. }
  20. .header__logo{
  21. font-size:24px;line-height:120%;-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}
  22. @media only screen and (max-width:1440px){
  23. .header__logo{
  24. margin-right:31%;margin-left:auto}
  25. }
  26. @media only screen and (max-width:1400px){
  27. .header__logo{
  28. margin-right:29%;margin-left:auto}
  29. }
  30. @media only screen and (max-width:1350px){
  31. .header__logo{
  32. margin-right:26%;margin-left:auto}
  33. }
  34. @media only screen and (max-width:1200px){
  35. .header__logo{
  36. margin-right:23%;margin-left:auto}
  37. }
  38. @media only screen and (max-width:1024px){
  39. .header__logo{
  40. margin-right:auto;margin-left:auto}
  41. }
  42. @media only screen and (max-width:450px){
  43. .header__logo{
  44. font-size:18px}
  45. }
  46. .header__burger{
  47. position:relative;width:50px;height:14px;cursor:pointer}
  48. @media only screen and (max-width:450px){
  49. .header__burger{
  50. width:30px}
  51. }
  52. .header__burger span{
  53. width:100%;height:100%}
  54. .header__burger span::after,.header__burger span::before{
  55. content:'';position:absolute;width:50px;height:2px;background-color:#fffcf9}
  56. @media only screen and (max-width:450px){
  57. .header__burger span::after,.header__burger span::before{
  58. width:30px}
  59. }
  60. .header__burger span:after{
  61. top:0}
  62. .header__burger span::before{
  63. bottom:0}
  64. .header__links{
  65. display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;align-items:center;-ms-flex-align:center;font-size:24px;line-height:120%}
  66. @media only screen and (max-width:768px){
  67. .header__links{
  68. display:none}
  69. }
  70. .header__links li:not(:last-child){
  71. margin-right:150px}
  72. @media only screen and (min-width:993px){
  73. .header__links li{
  74. -webkit-transition:all ease-out .3s;transition:all ease-out .3s}
  75. .header__links li:hover{
  76. color:#99e836;-webkit-transition:all ease-out .3s;transition:all ease-out .3s}
  77. }
  78. .header__menu{
  79. position:absolute;top:0;left:0;
  80.     z-index:100;
  81.     width:758px;height:100vh;
  82.     font-size:40px;
  83.     line-height:120%;background:#99e836;
  84.     opacity:0;
  85.     -webkit-transition:.3s;transition:.3s;
  86.     -webkit-transform:translateX(-100%);transform:translateX(-100%);overflow-y:auto}
  87. @media only screen and (max-width:768px){
  88. .header__menu{
  89. right:0;left:auto;width:369px;-webkit-transform:translateX(100%);transform:translateX(100%)}
  90. }
  91. @media only screen and (max-width:413px){
  92. .header__menu{
  93. width:100vw}
  94. }
  95. .header__menu-list{
  96. opacity:0;-webkit-transition:opacity .5s ease;transition:opacity .5s ease;-webkit-transition-delay:.2s;transition-delay:.2s}
  97. .header__menu.active{
  98. opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}
  99. .header__menu.active .header__menu-list{
  100. opacity:1}
  101. .header__menu-content{
  102. position:relative;padding-top:178px;padding-bottom:136px;padding-left:250px}
  103. @media only screen and (max-width:768px){
  104. .header__menu-content{
  105. padding-top:99px;padding-bottom:90px;padding-left:118px;font-size:24px;line-height:120%}
  106. }
  107. @media only screen and (max-width:620px){
  108. .header__menu-content{
  109. padding-top:68px;padding-bottom:60px;padding-left:60px;font-size:18px;line-height:140%;font-weight:500}
  110. }
  111. .header__menu-exit{
  112. position:absolute;top:30px;left:67px;z-index:3;width:40px;height:40px;-webkit-transition:.3s ease;transition:.3s ease;cursor:pointer}
  113. @media only screen and (max-width:768px){
  114. .header__menu-exit{
  115. right:45px;left:auto}
  116. }
  117. @media only screen and (max-width:767px){
  118. .header__menu-exit{
  119. top:8px;right:16px;width:30px;height:30px}
  120. }
  121. .header__menu-exit:hover{
  122. opacity:.7}
  123. .header__menu-exit::after,.header__menu-exit::before{
  124. content:'';position:absolute;left:20px;display:block;width:2px;height:40px;background-color:#0d0d0c}
  125. @media only screen and (max-width:768px){
  126. .header__menu-exit::after,.header__menu-exit::before{
  127. height:30px}
  128. }
  129. .header__menu-exit::after{
  130. -webkit-transform:rotate(45deg);transform:rotate(45deg)}
  131. .header__menu-exit::before{
  132. -webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
  133. .header__menu-item.active a::after{
  134. right:0;background-color:#0d0d0c}
  135. .header__menu-item:not(:first-child){
  136. margin-top:31px}
  137. @media only screen and (max-width:768px){
  138. .header__menu-item:not(:first-child){
  139. margin-top:21px}
  140. }
  141. @media only screen and (max-width:620px){
  142. .header__menu-item:not(:first-child){
  143. margin-top:11px}
  144. }
  145. .header__menu-link{
  146. position:relative;display:inline-block;padding-bottom:11px;color:#0d0d0c;-webkit-transition:padding-left .3s ease;transition:padding-left .3s ease;transition:padding-left .3s ease;transition:padding-left .3s ease}
  147. @media only screen and (max-width:620px){
  148. .header__menu-link{
  149. padding-bottom:10px}
  150. }
  151. .header__menu-link::after{
  152. content:'';position:absolute;bottom:0;left:0;height:2px;background-color:transparent;-webkit-transition:.3s ease;transition:.3s ease}
  153. .header__menu-item:not(.active) .header__menu-link:hover{
  154. padding-left:25px}
  155. .header__menu-logo{
  156. position:absolute;top:12px;left:3px;display:none;text-transform:uppercase;color:#0d0d0c;font-size:18px;line-height:120%;font-weight:500;font-style:normal;-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}
  157. @media only screen and (max-width:767px){
  158. .header__menu-logo{
  159. display:block}
  160. }

这个是用于页面预加载的图标，就是三个绿圆弧旋转。

  1. <div class="wrapper" id="preloader">      
  2. <div class="main-circle">
  3. <div class="green-circle">
  4. <div class="brown-circle"></div>
  5. </div>
  6. </div>
  7. </div>

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。（配合position一起才有用）

如果不对元素设定 position 属性或不是设置位置为static，位于文档流后面的节点会遮盖前面。（及代码顺序排序）

如果将 position 设为 relative (相对定位)，absolute (绝对定位) 或者 fixed (固定定位)，这样的节点会覆盖没有设置 position 属性或者属性值为 static 的节点。（定位排序）

在没有 z-index 属性干扰的情况下, 根据这顺序规则和定位规则, 我们可以做出更加复杂的结构. 这里我们对 A 和 B 都不设定 position, 但对 A 的子节点 A-1 设定 position:relative. 根据顺序规则, B 会覆盖 A, 又根据定位规则 A-1 会覆盖 B.

  1.     <div id="a">
  2.       <div id="a-1" style="position: relative"></div>
  3.     </div>
  4.     <div id="b"></div>

当z-index为0时与同级元素在定位排序中是一样大的，只能通过顺序排序。再设置了position和z-index的情况下，先定位排序后顺序排序

  1.     <div id="a" style="position: fixed; z-index: 1"></div>
  2.      <div id="b" style="position: fixed; z-index: 0"></div>
  3.     <div id="c" style="position: fixed;"></div>
  4.     <div id="d" style="position: fixed; z-index: 0"></div>

上面的顺序从上到下为adcb。

盒子wrapper为弹性布局。linear-gradient是线性渐变这里渐变轴为180度（由上到下相反，0deg及由下到上），颜色从黑到白，黑色在高度50%时开始变白。对于360，谷歌，QQ浏览器采用-webkit-box-align

-webkit-box-pack属性指定box的子元素如何对齐，微软edge浏览器采用-ms-flex-align;-ms-flex-pack属性指定box的子元素如何对齐。

justify-content也是盒子里的子元素居中。.main-circle是一个圆没设置颜色就是透明，然后边框是绿色，但是上部和右部是设置了透明所以是半圆弧，然后设置了一个动画360度rotate旋转，infinite表示动画循环播放。而且三个圆弧旋转度数是不同的。
  1. .wrapper{
  2.     position:fixed;
  3.     top:0;right:0;bottom:0;
  4.     left:0;z-index:1000000;
  5.     display:-webkit-box;display:-ms-flexbox;display:flex;
  6.     -webkit-box-align:center;
  7.     align-items:center;-ms-flex-align:center;
  8.     -webkit-box-pack:center;
  9.     -ms-flex-pack:center;justify-content:center;height:100vh;
    background:-webkit-gradient( linear,left top,left bottom,color-stop(50%,#000) );background:linear-gradient(180deg,#000 50%
 ，#fff )
  1. }
  2. .main-circle{
  3. position:relative;display:-webkit-box;display:-ms-flexbox;
  4.     display:flex;
  5.     -webkit-box-align:center;
  6.     align-items:center;
  7.     -ms-flex-align:center;
  8.     -webkit-box-pack:center;
  9.     -ms-flex-pack:center;justify-content:center;width:150px;
  10.     height:150px;border:4px solid #99e836;border-top:4px solid transparent;
  11.     border-right:4px solid transparent;
  12.     border-radius:50%;
  13.     -webkit-animation:rotate 2s infinite;animation:rotate 2s infinite
  14. }
  15. .main-circle:before{
  16. content:'';position:absolute;width:100%;height:100%;border:4px solid transparent;border-right:4px solid #99e836;border-radius:50%;-webkit-transform:rotate(40deg);transform:rotate(40deg)}
  17. .green-circle{
  18. position:relative;display:-webkit-box;display:-ms-flexbox;
  19.     display:flex;-webkit-box-align:center;align-items:center;-ms-flex-align:center;
  20.     -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  21.     width:120px;
  22.     height:120px;border:4px solid #99e836;
  23.     border-top:4px solid transparent;
  24.     border-right:4px solid transparent;
  25.     border-radius:50%;
  26.     -webkit-transform:rotate(-20deg);transform:rotate(-20deg);
  27.     -webkit-animation:rotate 2s infinite .4s;animation:rotate 2s infinite .4s
  28. }
  29. .green-circle:before{
  30. content:'';position:absolute;width:100%;height:100%;border:4px solid transparent;border-right:4px solid #99e836;border-radius:50%;-webkit-transform:rotate(60deg);transform:rotate(60deg)}
  31. .brown-circle{
  32. width:80px;height:80px;border:4px solid #99e836;border-top:4px solid transparent;border-right:4px solid transparent;border-radius:50%;-webkit-transform:rotate(-20deg);transform:rotate(-20deg);-webkit-animation:rotate 2s infinite .6s;animation:rotate 2s infinite .6s}
  33. @-webkit-keyframes rotate{
  34. to{
  35. -webkit-transform:rotate(360deg);transform:rotate(360deg)}
  36. }
  37. @keyframes rotate{
  38. to{
  39. -webkit-transform:rotate(360deg);transform:rotate(360deg)}
  40. }

这个是右下角的进度栏和页码。

  1. <div class="nav-widget__wrapper">
  2. <div class="nav-widget">
  3. <div class="nav-widget__line">  
  4. <div class="nav-widget__line-active progress-line-js"></div>
  5. </div>
  6. <div class="nav-widget__page-number js-page-number">1/9</div>  
  7. </div>
  8. </div>

.nav-widget__line是进度栏底部灰线，.nav-widget__line中

margin-right:17px;是空出1/9页码的位置.nav-widget__line-active是短绿线，有一个width长度的变换。
  1. .nav-widget{
  2. display:-webkit-box;
  3.     display:-ms-flexbox;
  4.     display:flex;-webkit-box-align:center;
  5.     align-items:center;-ms-flex-align:center;
  6.     -webkit-box-pack:center;
  7.     -ms-flex-pack:center;
  8.     justify-content:center
  9. }
  10. .nav-widget__wrapper{
  11. position:fixed;right:70px;
  12.     bottom:50px;z-index:100;
  13.     width:350px
  14. }
  15. @media only screen and (max-width:1000px){
  16. .nav-widget__wrapper{
  17. display:none}
  18. }
  19. .nav-widget__line{
  20. position:relative;width:100%;
  21.     max-width:273px;height:2px;
  22.     margin-right:17px;background-color:#484848
  23. }
  24. .nav-widget__line-active{
  25. position:absolute;top:0;
  26.     left:0;width:100%;height:100%;
  27.     background-color:#99e836;-webkit-transition:width .3s ease;
  28.     transition:width .3s ease}
  29. .nav-widget__page-number{
  30. color:#fff
  31. }

home-author__button home-button这个a标签是显示旋转的绿色圆，链接的是联系的页面，h1，p这个是右边的文字。neue neue-headline2 home-ticker__text这两个p是游走的弹幕类似的动态文字。

  1. <div class="section section_home pp-scrollable">
  2. <div class="home js-section" id="home">
  3. <div class="home-container"><img class="home-image home-image--desktop home__image js-img-home" src="static/picture/king.jpg" alt="Author's photo"><img class="home-image home-image--mobile home__image js-img-home-adapt" src="static/picture/home.jpg" alt="Author's photo">
  4. <div class="home-container__info home-author">
  5. <h1 class="neue neue-headline1 home-author__name js-author-home">我是鹧鸪菜</h1>
  6. <p class="manrope manrope-text2 home-author__description">鹧鸪菜不是我的菜</p>
  7. <a class="home-author__button home-button" href="#contacts"><div class="home-button__item"></div></a>  
  8. </div>
  9. <div class="home-ticker js-ticker">
  10. <div class="home-ticker__wrapper">  
  11. <p class="neue neue-headline2 home-ticker__text">a digital designer //&nbsp;a digital designer //&nbsp;a digital designer //&nbsp;a digital designer //&nbsp;a digital designer //&nbsp;a digital designer //&nbsp;a digital designer //&nbsp;a digital designer //&nbsp;</p>
  12. <p class="neue neue-headline2 home-ticker__text">a digital designer //&nbsp;a digital designer //&nbsp;a digital designer //&nbsp;a digital designer //&nbsp;a digital designer //&nbsp;a digital designer //&nbsp;a digital designer //&nbsp;a digital designer //&nbsp;</p>
  13. </div>
  14. </div>
  15. </div>
  16. </div>
  17. </div>

这个没什么好解释的，看一下应该能懂。

  1. .home-author__name{
  2. -webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;max-width:400px;opacity:0;-webkit-transition:opacity .6s ease;transition:opacity .6s ease;-webkit-transition-delay:.6s;transition-delay:.6s}
  3. @media only screen and (max-width:1559px){
  4. .home-author__name{
  5. max-width:300px;font-size:100px}
  6. }
  7. @media only screen and (max-width:1200px){
  8. .home-author__name{
  9. max-width:300px;font-size:90px}
  10. }
  11. @media only screen and (max-width:992px){
  12. .home-author__name{
  13. -webkit-box-ordinal-group:1;-ms-flex-order:0;order:0;margin-top:-8px;font-size:70px;line-height:110%}
  14. }
  15. @media only screen and (max-width:620px){
  16. .home-author__name{
  17. max-width:200px;margin-top:-4px;font-size:60px;line-height:90%}
  18. }
  19. @media only screen and (max-width:450px){
  20. .home-author__name{
  21. margin:0 0 28px}
  22. }
  23. .home-author__description{
  24. max-width:324px;margin-bottom:auto;margin-left:auto}
  25. @media only screen and (max-width:992px){
  26. .home-author__description{
  27. max-width:206px}
  28. }
  29. @media only screen and (max-width:450px){
  30. .home-author__description{
  31. max-width:132px;margin:0}
  32. }
  33. .home-author__button{
  34. position:absolute;right:290px;bottom:282px;width:200px;height:200px;overflow:hidden}
  35. @media only screen and (max-width:1900px){
  36. .home-author__button{
  37. right:5%;bottom:10%}
  38. }
  39. @media only screen and (max-width:1200px){
  40. .home-author__button{
  41. width:150px;height:150px}
  42. }
  43. @media only screen and (max-width:992px){
  44. .home-author__button{
  45. right:95px;bottom:90px}
  46. }
  47. @media only screen and (max-width:620px){
  48. .home-author__button{
  49. right:25px;bottom:60px}
  50. }
  51. @media only screen and (max-width:450px){
  52. .home-author__button{
  53. width:120px;height:120px}
  54. }

呕心沥血者：鹧鸪菜


END

免责声明：

点原文链接查看源码演示！

前端自学坊
快乐学习前端h5，css，js \(^o^)/~
4篇原创内容
意境盒子 ，
#意境#人间美景 极光和流星雨从高楼大厦中经过……

本文来自网络或网友投稿，如有侵犯您的权益，请发邮件至：aisoutu@outlook.com 我们将第一时间删除。

相关素材

彩色炫酷H5背景
彩色炫酷H5背景
酷炫多彩简历
酷炫多彩简历
第一背景
第一背景