[趣味编程] 个人小站,自己的一个小作品把!

本着一个简约的风格和黄昏的效果! 写的这个页面 虽然只是单页! 但是整体看起来还是很不错的!

希望大佬 能二改 !

 

首先我先写了顶部的div 然后一块 一块的去实现! 新生 大佬勿喷!

html代码 :


    <!--导航栏开始-->
    
    <div id="tou">
        <div id="touzi">
            <ul>

                <!--
                    <div id="logo">
                            <img src="img/logo.png" alt="">
                        </div>
               -->

<p class="lan3"><a href="#zbj">主页</a></p>
                <p class="lan3"><a href="#jj">简介</a></p>
                <p class="lan3"><a href="#jn">技能</a></p>
                <p class="lan3"><a href="#zuopin">作品</a></p>
                <p class="lan3"><a href="#lxwm">联系我们</a></p>

 <!--
                -->
            </ul>
        </div>
    </div>
    <!--导航栏结束-->
<!--主页大图开始-->
    <div id="zbj">
        <div id="bz">
        <img src="img/wyz-1.png" alt="">
        </div>
        <div id="bj">
        <img src="img/bi-1.jpg" alt=""></div>
    </div>
    
    <!--主页大图结束-->
    <!--简介开始-->
<div id="jj">
    <div id="jjtou">
        <img src="img/jj.png" alt="">
    </div>
    <div id="touxiang">
        <img src="img/yue.jpg" alt="">
    </div>
<div id="jjzi">
    <div id="mingzi">
    <h2>谢谢</h2></div>
    <div id="jyx">
        <p>♂精于心简于行</p>
    </div>
    <div id="sf">
        <p>乔越博客|1999.00.00</p>
    </div><br><br>
<div id="chuzi">
    <p>个人简介为某人的简要介绍。个人简介可以是表格的形式,也可以是其他形式。一般用于初次见面时个人介绍中或者个人履历表中等。写法灵活
            忌硬套格式 安排结构、运用笔墨应遵循古人所说“定体则无,大体须有”的原则才是。也就是说,既要考虑一般规律,又要结合自身实际来确立重点、谋篇布局、组织材料,绝不可死搬硬套。</p>
</div>

<div id="tswyz">
    <img src="img/tswyz.png" alt="">
</div>
</div>

</div>
<!--简介结束-->
<!--技能开始-->
<div id="jn">
    <div id="jntou">
        <img src="img/jn.png" alt="">

    </div>
    <div id="jndh">
        <div class="ps" id="ps">
            <img src="img/ps.png" alt="">
            <div id="wenzi1">
            <p>
                    Adobe Photoshop CC 
            </p>
        </div>
        </div>
        <div class="gg" id="gg">
            <img src="img/gg.png" alt="">
            <div id="wenzi2">
           <P>Google浏览器</P> </div>
        </div><br><br><br><br>
        <div class="css" id="css">
            <img src="img/css.png" alt="">
            <div id="wenzi3">
            <p>Cascading Stylesheet</p></div>
        </div>
        <div class="vs" id="vs">
            <img src="img/vs.png" alt="">
            <div id="wenzi4">
            <p>Visual Studio Code</p></div>
        </div>
    </div>
</div>
<!--技能结束-->

<!--作品开始-->
<div id="zuopin">
        <div id="zuopintou">
                <img src="img/zp.png" alt="">
        </div>
</div>


        <div class="content">
                <a class="card" href="http://www.79bk.cn/">
                  <div class="front" style="background-image: url(https://ws3.sinaimg.cn/large/005BYqpgly1fxesj137tpj30ax0gt0tx.jpg);">
                    <p>乔越博客</p>
                  </div>
                  <div class="back">
                    <div>
                      <p>可以完美运行设计好看有美感 </p>
                      <p>反正就是各种的优秀吧!</p>
                      <button class="button">Future Gate</button>
                    </div>
                  </div></a>
                  
                  
                  
                  
                  <a class="card" href="http://www.79bk.cn/">
                  <div class="front" style="background-image: url(https://ws3.sinaimg.cn/large/005BYqpggy1fxj2nxpxrhj30j20mo0vo.jpg);">
                    <p>乔越博客</p>
                  </div>
                  <div class="back">
                    <div>
                      <p>乔越博客</p>
                      <p>乔越博客</p>
                      <button class="button">Future Gate</button>
                    </div>
                  </div></a>
                  
                  
                  
                  <a class="card" href="http://www.79bk.cn/">
                  <div class="front" style="background-image: url(https://ws3.sinaimg.cn/large/005BYqpgly1fxiwgeludqj30e70fymyj.jpg);">
                    <p>乔越博客</p>
                  </div>
                  <div class="back">
                    <div>
                      <p>乔越博客</p>
                      <p>乔越博客</p>
                      <button class="button">Future Gate</button>
                    </div>
                  </div></a>
                  

                  
                  <a class="card" href="http://www.79bk.cn/">
                  <div class="front" style="background-image: url(https://ws3.sinaimg.cn/large/005BYqpgly1fxiwr4giktj30bv0fa42s.jpg);">
                    <p> 乔越博客</p>
                  </div>
                  <div class="back">
                    <div>
                        <p>乔越博客</p>
                        <p>乔越博客</p>
                      <button class="button">乔越博客</button>
                    </div>
                  </div></a></div>
                  


<!--作品结束-->

<!--联系我们开始-->
<div id="lxwm">
    <div id="lxdbt">
            <div id="tutu">

                    <img src="img/sc123.jpg" alt="">
            </div>
       
        <div class="xinxi">
            <p>Contact Information</p>
            <h5>这个是我的一些联系方式希望能给你提供更好的服务!</h5><br>
            <h5>Here are some of my contacts in the hope of providing you with better service.</h5>
            <hr>
            </div>
            <div id="lt">
                <img src="img/1.png" alt="">
            
            </div>
            <div id="lt2">
                    <img src="img/2.png" alt="">
                   
                </div>
                <div id="lt3">
                        <img src="img/3.png" alt="">
                        
                    </div>

    </div>


             <div id="xiaxinxi">
                <h1>Leave A Message For Me.</h1>

               </div>         
               <div id="liuyanpan">
                  
                    <input type="text">
               </div>
               <div id="xingming">
                    
                    <input type="text">
               </div>
               <div id="lianxifangshi">
                   
                    <input type="text" >
                </div>
               <div id="tijiao">
                   <li><p>提交留言</p></li>
               </div>



</div>


<!--联系我们结束-->




<!--底部 图 开始-->
<div id="dstu">
    <img src="img/bh2.png" alt="">
</div>
<!--底部 图 结束-->



<!--底部 版权 开始-->
<div id="bq">
    <div id="lxtu">
           <a href="http://wpa.qq.com/msgrd?v=3&uin=5980844&site=qq&menu=yes"><img src="img/qq.png" alt=""></a> 
            <a href="http://wpa.qq.com/msgrd?v=3&uin=5980844&site=qq&menu=yes"><img src="img/wx.png" alt=""></a> 
          <a href="https://user.qzone.qq.com/5980844"> <img src="img/kj.png" alt=""></a> 
           <a href="https://weibo.com/u/3960514182?refer_flag=1001030201_"> <img src="img/wb.png" alt=""></a> 
            
    </div>

<p>Copyright © 2018 Qiaoyue  Corporation, All Rights Reserved</p>



</div>

<!--底部 版权 结束-->




<!--返回顶部 结束-->



<a  onclick="topFunction()"  id="myBtn">
    <img src="img/fhdb2.png" border="0" onMouseOver="this.src='img/fhdb.png'" onMouseOut="this.src='img/fhdb2.png'" /></a>
<!--返回顶部 结束-->

 

CSS代码: 

*{
    margin: 0;
    padding: 0;
}
*, *:before, *:after {
  box-sizing: border-box;
}

#tou{
    width: 100%;
    height: 100px;
    background: rgba(241, 8, 8, 0);
    position: absolute;
}

#logo{
  width: 200px;
  height: 100px;
  float: left;
  
}
#logo img{
  width: 200px;
  height: 100px;
  float: left;
  position: relative;
  left: -1000px;
}


/**/
#touzi p{
    
  float: left;
  font-size:20px;
  line-height:100px;
  width:100px; 
  text-align: center;
 
}
#touzi a{
  text-decoration:none;
  color: rgb(255, 255, 255);
}


#touzi{
  width: 600px;
  margin-top: -10px; 
  margin-left: 1240px;
}

#touzi .lan3{
  float: left;
  width:100px; 

 
 
}

#touzi a:hover {
  color: #d73444;
}








#bj img{
    width: 100%;
    height: 918px;

}
#bz img{
    width: 1620px;
    height: 252px;
    position: absolute;
    top: 330px;
    left: 140PX;
}
#jj{
    width: 100%;
    height: 920px;
   /* background: red;*/
}
#jjtou img{
    width: 160px;
    height: 160px;
    margin:60px;
    position: relative;
    left: 780px;
}
#touxiang img{
    width: 300px;
    height: 300px;
    margin-top: 80px;
    margin-left:390px ;
    float: left;
}
#jjzi{
    width: 780px;
    height: 300px;
    position: relative;
    margin-top: 80px;
    margin-left: 740px;
    /*background: red;    */
}
#mingzi h2{
    font-size:30px;
    font-family:"黑体";
    color: rgb(0, 0, 0);
    float: left;
}
#jyx {
    width: 120px ;
    height: 20px;
    position: relative;
    margin-left: 13px;
    top: 10px;
    text-align: center;
    background: rgb(0, 0, 0);
    float: left;

    -webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

}
#jyx p{
    color: white;
}
#sf{
    position: relative;
    left: 15px;
    top: 15px;
}
#sf p{
    font-weight:bold;
    font-size:13px;

}

#tswyz img{
    width: 780px;
    height: 180px;
}
/*技能开始*/
#jn{
    width: 100%;
    height: 918px;
    background:#f0f0f0;
}
#jntou img{
    width: 160px;
    height: 160px;

    margin:60px;
    position: relative;
    left: 780px;
}


.ps {
    width: 700px;
    height: 180px;
    border-radius: 10px;
    font-family: Helvetica;
    display: grid;
    margin-left: 170px;
    /*居中*/
    /*justify-content: center;*/
    align-content: center;
    background: #5b3cc4;
    color: #FFFFFF;
    box-shadow: 0 9px 28px -9px #5b3cc4;
    transform: perspective(525px) translateZ(0) rotateX(var(--dx)) rotateY(var(--dy));
    transition: all 150ms linear 0s;
    float: left;
  }
  #ps img{
    width: 180px;
    height: 180px; 
    position: relative;
    top: 50px;
    
    
  
  }
  .gg {
    width: 700px;
    height: 180px;
    border-radius: 10px;
    font-family: Helvetica;
    display: grid;
    margin-left: 1000px;
    /*居中*/
    /*justify-content: center;*/
    align-content: center;
    background: #5b3cc4;
    color: #FFFFFF;
    box-shadow: 0 9px 28px -9px #5b3cc4;
    transform: perspective(525px) translateZ(0) rotateX(var(--dx)) rotateY(var(--dy));
    transition: all 150ms linear 0s;
  }
  #gg img{
    width: 190px;
    height: 190px;
    position: relative;
    
    top: 50px;
  
  }
  .css {
    width: 700px;
    height: 180px;
    border-radius: 10px;
    font-family: Helvetica;
    display: grid;
    margin-left: 170px;
    /*居中*/
    /*justify-content: center;*/
    align-content: center;
    background: #5b3cc4;
    color: #FFFFFF;
    box-shadow: 0 9px 28px -9px #5b3cc4;
    transform: perspective(525px) translateZ(0) rotateX(var(--dx)) rotateY(var(--dy));
    transition: all 150ms linear 0s;
    float: left;
  }
  #css img{
    width: 210px;
    height: 210px;
    position: relative;
    left: -15px;
    top: 50px;
  
  }
  .vs {
    width: 700px;
    height: 180px;
    border-radius: 10px;
    font-family: Helvetica;
    display: grid;
    margin-left: 1000px;
    /*居中*/
    /*justify-content: center;*/
    align-content: center;
    background: #5b3cc4;
    color: #FFFFFF;
    box-shadow: 0 9px 28px -9px #5b3cc4;
    transform: perspective(525px) translateZ(0) rotateX(var(--dx)) rotateY(var(--dy));
    transition: all 150ms linear 0s;
  }
  #vs img{

    width: 210px;
    height: 210px;
    position: relative;
    left: -15px;
    top: 50px;
  
  
  }
  #jndh img{
    transition: all 2.0s;
  }
 #jndh img:hover{
    /*旋转*/
     transform: rotate(360deg);
 }

 #wenzi1{
  width: 400px;
  height: 100px;
  position: relative;
  left:280PX ;
  top: -60px;
  font-size :33px;

}
#wenzi2{
  width: 300px;
  height: 100px;
  position: relative;
  left:300PX ;
  top: -70px;
  font-size :33px;

}
#wenzi3{
  width: 400px;
  height: 100px;
  position: relative;
  left:280PX ;
  top: -80px;
  font-size :33px;

}
#wenzi4{
  width: 300px;
  height: 100px;
  position: relative;
  left:280PX ;
  top: -80px;
  font-size :33px;

}




/*技能结束*/

 /*作品开始 */
#zuopin{
    width: 100%;
    height: 918px;
    background:#FFFFFF;
}

#zuopintou img{
    width: 160px;
    height: 160px;

    margin:60px;
    position: relative;
    left: 780px;
}



/*卡片开始*/


  
#zuopin {
    font-size: 18px;
    line-height: 1.5;
    font-weight: 300;
    color: #333;
    font-family: "Nunito Sans", sans-serif;
  }

  .content {
    display: flex;
    margin: -560px auto;
    justify-content: center;
    align-items: center;
    /*排2行 33*/
    /*flex-wrap: wrap;*/
    max-width: 1000px;
/*调整  字体 字号 间距  等*/
    font-size: 18px;
    line-height: 1.5;
    font-weight: 300;
    color: #333;
    font-family: "Nunito Sans", sans-serif;
  }
  
  .heading {
    width: 100%;
    margin-left: 1rem;
    font-weight: 900;
    font-size: 1.618rem;
    text-transform: uppercase;
    letter-spacing: .1ch;
    line-height: 1;
    padding-bottom: .5em;
    margin-bottom: 1rem;
    position: relative;
  }
  .heading:after {
    display: block;
    content: '';
    position: absolute;
    width: 60px;
    height: 4px;
    background: linear-gradient(135deg, #1a9be6, #1a57e6);
    bottom: 0;
  }
  
  .description {
    width: 100%;
    margin-top: 0;
    margin-left: 1rem;
    margin-bottom: 3rem;
  }
  
  .card {
    color: inherit;
    cursor: pointer;
    width: calc(33% - 2rem);
    min-width: calc(33% - 2rem);
    height: 400px;
    min-height: 400px;
    perspective: 1000px;
    margin: 1rem;
    position: relative;
  }
  @media screen and (max-width: 800px) {
    .card {
      width: calc(50% - 2rem);
    }
  }
  @media screen and (max-width: 500px) {
    .card {
      width: 100%;
    }
  }
  
  .front,
  .back {
    display: flex;
    border-radius: 6px;
    background-position: center;
    background-size: cover;
    text-align: center;
    justify-content: center;
    align-items: center;
    position: absolute;
    height: 100%;
    width: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    transition: ease-in-out 600ms;
  }
  
  .front {
    background-size: cover;
    padding: 2rem;
    font-size: 1.618rem;
    font-weight: 600;
    color: #ecf0f9;
    overflow: hidden;
    font-family: Poppins, sans-serif;
  }
  .front:before {
    position: absolute;
    display: block;
    content: '';
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #1a9be6, #1a57e6);
    opacity: .25;
    z-index: -1;
  }
  .card:hover .front {
    transform: rotateY(180deg);
  }
  .card:nth-child(even):hover .front {
    transform: rotateY(-180deg);
  }
  
  .back {
    background: #ecf0f9;
    transform: rotateY(-180deg);
    padding: 0 2em;
  }
  .card:hover .back {
    transform: rotateY(0deg);
  }
  .card:nth-child(even) .back {
    transform: rotateY(180deg);
  }
  .card:nth-child(even):hover .back {
    transform: rotateY(0deg);
  }
  
  .button {
    transform: translateZ(40px);
    cursor: pointer;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    font-weight: bold;
    color: #ecf0f9;
    padding: .5em 1em;
    border-radius: 100px;
    font: inherit;
    background: linear-gradient(135deg, #1a9be6, #1a57e6);
    border: none;
    position: relative;
    transform-style: preserve-3d;
    transition: 300ms ease;
  }
  .button:before {
    transition: 300ms ease;
    position: absolute;
    display: block;
    content: '';
    transform: translateZ(-40px);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    height: calc(100% - 20px);
    width: calc(100% - 20px);
    border-radius: 100px;
    left: 10px;
    top: 16px;
    box-shadow: 0 0 10px 10px rgba(26, 87, 230, 0.25);
    background-color: rgba(26, 87, 230, 0.25);
  }
  .button:hover {
    transform: translateZ(55px);
  }
  .button:hover:before {
    transform: translateZ(-55px);
  }
  .button:active {
    transform: translateZ(20px);
  }
  .button:active:before {
    transform: translateZ(-20px);
    top: 12px;
  }
  

/*卡片结束*/

 /*作品结束*/


/*联系我们开始*/

#lxwm{
  width: 100%;
  height: 918px;
  background: #ffffff;
  position: relative;
  top: 730px;
}
#tutu img{
  width: 100%;
  height: 470px;
  z-index: -1;
}
#lxdbt{
  width: 100%;
  height: 932px;
}
#lxdbt .xinxi{
  width: 100%;
  height: 470px;
  background: rgba(29, 28, 28, 0.415);
  position: relative;
  top: -473px;
 
}
#lxdbt .xinxi P{
  text-align: center;
  font-family: Helvetica;
  position: relative;
  top: 50px;
  font-size:50px;
  color: rgb(241, 235, 235);
  font-weight:bold;

}
#lxdbt .xinxi h5{
  text-align: center;
  position: relative;
  top: 90px;
  font-size:20px;
  color: rgb(241, 235, 235);
}
#lxdbt .xinxi hr{
  position: relative;
  top: 140px;
}
#lt{
  width: 150px;
  height: 50px;
  position: relative;
    top: -600px;
    left: 400px;
    z-index: 1;
   
}
#lt img{
    width: 50px;
    height: 50px;
    
}

#lt2{
  width: 150px;
  height: 50px;
  position: relative;
    top: -653px;
    left: 900px;
    z-index: 1;
   
}
#lt2 img{
    width: 45px;
    height: 45px;
    
}

#lt3{
  width: 150px;
  height: 50px;
  position: relative;
  top: -700px;
    left: 1400px;
    z-index: 1;
   
}
#lt3 img{
  
    width: 40px;
    height: 40px;
    
}



#xiaxinxi{
  width: 100%;
  height: 450px;
  background: rgb(255, 255, 255);
  position: relative;
  top: -462px
}
#xiaxinxi h1{
  text-align: center;
  position: relative;
  top: 60px;
}
#liuyanpan input{
  width: 450px;
  height: 180px;
  position: absolute;
  top: 650px;
  left: 400px;
  background: #f0f0f0;
  border:2px solid #ffffff;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
#xingming input{
  width: 550px;
  height: 60px;
  position: absolute;
  top: 650px;
  left: 1000px;
  background: #f0f0f0;
  border:2px solid #ffffff;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
}
#lianxifangshi input{
  width: 250px;
  height: 60px;
  position: absolute;
  top: 770px;
  left: 1000px;
  background: #f0f0f0;
  border:2px solid #f0f0f0;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
}
#tijiao li{
  list-style:none;
  text-align: center;
  width: 250px;
  height: 60px;
  background: #4261e7;
  position: absolute;
  top: 770px;
  left: 1300px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
}
#tijiao li P{
  color: #ffffff;
  margin-top: 15px;
  font-size:20px;
}
#liuyanpan p{
  position: absolute;
  top: 620px;
  left: 410px;
  font-size: 20px;


}
#xingming p{
  position: absolute;
  top: 620px;
  left: 1030px;
  font-size: 20px;


}




/*联系我们结束*/


 /*底部大山的图 开始*/
 #dstu{
   width: 100%;
  
   /*background: #1a57e6;*/
   position: absolute;
   margin-top: 680px;
   
   
   
   

 }
#dstu img{
  width: 100%;
  height: 200px;

}

 /*底部大山 的图 开始*/
 /*底部版权开始*/

#bq{
  width: 100%;
  height: 120px;
  background: #333;

  position: absolute;
  margin-top: 880px;

}
#lxtu{
width: 300px;
height: 40px;
margin: 10px auto;

}

#lxtu img{
  width: 40px;
  height: 40px;
  margin: 15px;
  
}
#bq p{
  font-size:20px;
  font-family: "Nunito Sans", sans-serif;
  color: rgb(255, 255, 255);
  margin-top: 30px ;
  margin-left:670px ;

}


 /*底部版权结束*/



 /*返回顶部  开始*/
 #myBtn {
  position: fixed;
  bottom: 20px;
  right: 30px;
  cursor: pointer;
}


 /*返回顶部 结束*/

 

JS代码:


/*返回顶部 开始*/
// 当网页向下滑动 20px 出现"返回顶部" 按钮
window.onscroll = function() {scrollFunction()};
 
function scrollFunction() {console.log(121);
    if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
        document.getElementById("myBtn").style.display = "block";
    } else {
        document.getElementById("myBtn").style.display = "none";
    }
}
 
// 点击按钮,返回顶部
function topFunction() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
}



/*返回 顶部 结束*/

/*技能 卡片 js 开始*/
	var setProp = function setProp(el, prop, value) {return el.style.setProperty(prop, value);};

var el = document.getElementById('jndh');

var onMouseUpdate = function onMouseUpdate(e) {
	var width = el.offsetWidth;
	var XRel = e.pageX - el.offsetLeft;
	var YRel = e.pageY - el.offsetTop;

	var YAngle = -(0.5 - XRel / width) * 40;
	var XAngle = (0.5 - YRel / width) * 40;

	setProp(el, '--dy', YAngle + 'deg');
	setProp(el, '--dx', XAngle + 'deg');
};



el.addEventListener('mousemove', onMouseUpdate, false);
el.addEventListener('mouseenter', onMouseUpdate, false);
el.addEventListener('mouseleave', function () {
	el.style.setProperty('--dy', '0');
	el.style.setProperty('--dx', '0');
});

 

肯定会有很多不足的地方希望大佬给指出!虚心学习!感谢!

 






文件名称:个人小站

更新日期:2018.11.25

作者信息:乔越

提示:下载后请检查MD5值,欢迎捐赠本站以及广告合作!

下载地址:点击下载 【文件大小:30mb】

未经允许不得转载:乔越博客 » [趣味编程] 个人小站,自己的一个小作品把!

赞 (5) 打赏

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏