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

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

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

首先我先写了顶部的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');
});

资源下载

上一篇

【趣味编程】科学计算器代码个人作品!