原生实现freeCodeCamp上的Build a Personal Portfolio Webpage
目标网站： 设计一个类似于: https://codepen.io/freeCodeCamp/full/YqLyXB/的个人作品集。
完成效果图：
心得体会： 一开始最大的困扰是怎么监听滚动滑动，搜索工具是个好东西，用JQuery来操作dom很容易就解决了这个问题。后面编码中的问题主要就是布局里的东西，比如input和textarea的placeholder属性的字体样式默认是不同的，以及输入框怎么变成下划线还有聚焦输入框的时候怎么消去四周的框。都在代码里一一解决了。（做得很粗糙，弱~~~~~~~~）
代码如下：
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>私人网站</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body onscroll="scroll()">
<div class="top">
<ul class="real_ul">
<li class="active" id="left">ABOUT</li>
<li>PORTFOLIO</li>
<li>CONTACT</li>
</ul>
</div>
<div class="wrap">
<div class="about boxs">
<div class="about_left">
<p>Front-End Developer and UX/UI designer,with
practical experience <br/>in project management,branding strategy,and creative direction;<br/> devoted to functional programming and information architecture.</p>
<hr class="bright_line"/>
<p style="font-size:1.6em">Web Developer - User Experience Designer - Graphic Artist</p>
</div>
<div class="about_right">
<img src="((ZG3P1O0Q~)M]5QOQI_Z8U.png"/>
<p>A picture of Justin looking at San Francisco fromacross the Golden Gate Bridge.</p>
</div>
</div>
<div class="portfolio boxs">
<p> PORTFOLIO</p>
<hr class="dark_line" />
</div>
<div class="contact boxs">
<div class="header">
<p> CONTACT ME</p>
<hr class="dark_line" />
</div>
<div class="main">
<div class="left">
<input type="text" placeholder="Name" />
<input type="text" placeholder="Email Address"/>
<input type="text" placeholder="Phone Number" />
<textarea placeholder="Message" ></textarea>
<button>Send</button>
</div>
<div class="right">
<p>Want to get in touch with me? Be it to <br/>request more info about myself or my <br/>experience, to ask for my resume, tips on <br/>how to solve your sudoku, random <br/>questions about the universe and the<br/> meaning of life, or even if only for some <br/>nice Fika here in stunning Toronto... just<br/> feel free to drop me a line anytime.<br/><br/><br/>
I promise to reply A.S.A.P.<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>Note: No spam/soliciting pour moi, merci :) </p>
</div>
</div>
</div>
</div>
<div class="make clearfix">
<div class="make_content">
<div class="make_left">
<p class="title">ABOUT THIS PAGE</p>
<p class="by">Made with <i style="color:#fff;font-size:1.3em">coffee</i> and <i style="color:#fff;font-size:1.3em">music</i> <br/>by
<a href="http://qlip.in/" style="color:#722872; font-size:1.2em;text-decoration:none">Justin Sanne</a></p>
</div>
<div class="make_right">
<p class="title">AROUND THE WEB</p>
<div>
<ul>
<li><a href="https://www.linkedin.com/in/hallaathrad">ins</a></li>
<li><a href="https://github.com/hallaathrad">git</a></li>
<li><a href="https://twitter.com/hallaathrad">twi</a></li>
<li><a href="https://www.flickr.com/photos/hallaathrad/">fli</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="footer_content">
<p>qlip @ 2019. All Rights Reversed</p>
</div>
</div>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="main.js" type="text/javascript"></script>
</body>
</html>
//style.css
*{
margin:0;
padding:0;
font-size:14px;
}
body{
background-color:#666;
overflow:scroll;
}
.clearfix:after{
content:" ";
height:0;
display:block;
clear:both;
visibility:hidden;
}
.clearfix{
*zoom: 1;/*ie6清除浮动方式*/
}
.wrap{
width:1000px;
margin:81px auto 0px;
background-color:#888;
}
.top{
width:100%;
height:81px;
background-color:#722872;
position:fixed;
top:0;
left:0;
}
.top li{
text-align:center;
float:left;
list-style-type:none;
height:32px;
line-height:32px;
padding:2px 15px;
margin-top:15px;
margin-left:0px;
cursor:pointer;
color:#e8e8e8;
}
#left{
margin-left:974px;
}
.top li:hover{
color:#000;
box-shadow:1px 1px 1px -1px #e8e8e8,
-1px 0px 1px -1px #e8e8e8;
}
ul li.active{
background-color:#fff;
color:#000;
}
.about{
height:330px;
background-color:#B4B4B4;
}
.about_left{
text-align:right;
width:700px;
height:330px;
float:left;
color:#fff;
}
.about_left p{
margin-top:50px;
margin-right:15px;
font-size:1.4em;
}
.bright_line{
margin:40px auto 30px;
margin-right:15px;
padding:0;
max-width:560px;
border:0;
border-top:solid 5px;
}
.dark_line{
margin:50px auto 0px;
padding:0;
max-width:500px;
border:0;
border-top:solid 5px;
color:#888;
}
.about_right{
width: 300px;
height:330px;
float:right;
}
.about_right img{
margin-top:55px;
margin-left:20px;
width:260px;
height:180px;
}
.about_right p{
margin-left:20px;
font-size:1.2em;
color:#fff;
}
.portfolio{
height:200px;
background-color:#E8E8E8;
border-bottom:2px solid #C1C1C1;
padding-top:50px;
}
.portfolio p{
/*margin-top:50px;*/
color:#888;
font-size:2em;
text-align:center;
}
.contact{
height:850px;
background-color:#E8E8E8;
padding-top:50px;
}
.contact .header{
height:180px;
}
.contact .main{
height:670px;
}
.contact .main .left{
width:600px;
height:670px;
float:left;
}
.main .left input{
display:block;
border-bottom: 1px solid #aaa;
border-top: 0px;
border-left: 0px;
border-right: 0px;
background-color:#E8E8E8;
height:100px;
font-size:30px;
color:#722872;
width:480px;
margin-left:50px;
outline:none;
}
.main .left textarea{
margin-top:40px;
display:block;
border-bottom: 1px solid #aaa;
border-top: 0px;
border-left: 0px;
border-right: 0px;
background-color:#E8E8E8;
height:200px;
font-size:30px;
color:#722872;
width:480px;
margin-left:50px;
outline:none;
}
input::-webkit-input-placeholder{/*Webkit browsers*/
color:#888;
font-size:30px;
font-family:Arial;
}
textarea::-webkit-input-placeholder{/*Webkit browsers*/
color:#888 ;
font-size:30px;
font-family:Arial;
}
button{
margin-top:40px;
margin-left:50px;
display:block;
width:60px;
height:35px;
color:#888;
font-size:1.4em;
}
.contact .main .right{
width:400px;
height:670px;
float:right;
}
.contact p{
color:#888;
font-size:2em;
text-align:center;
margin-top:32px;
}
.right p{
color:#888;
font-size:1.4em;
text-align:left;
}
.make{
width:100%;
height:230px;
background-color:#B4B4B4;
}
.make_content{
width:1000px;
margin:0 auto;
}
.make_left{
float:left;
width:400px;
text-align:center;
}
.make_right{
float:right;
width:400px;
text-align:center;
}
.make_content .title{
margin-top:45px;
color:#fff;
font-size:1.7em;
font-weight:bold;
}
.make_content .by{
margin-top:20px;
color:#eee;
font-size:1.4em;
}
.make_right ul{
margin-top:30px;
margin-left:60px;
}
.make_right li{
float:left;
list-style-type: none;
width:70px;
}
.make_right li a{
text-decoration:none;
color:#fff;
font-style:italic;
font-size:1.4em;
}
.footer{
width:100%;
height:90px;
background-color:#722872;
}
.footer_content{
width:1000px;
margin:0 auto;
text-align:center;
}
.footer_content p{
color:#fff;
font-size:1.3em;
padding-top:30px;
}
//main.js
var arrOffsetTop =[$('.about').offset().top,$('.portfolio').offset().top,
$('.contact').offset().top]; //获取元素上边框相当于文档顶端的偏移量
var fTotalHgt = 0;
for(var i=0; i<$('.boxs').length; i++){
fTotalHgt += $('.boxs').eq(i).outerHeight();
console.log(fTotalHgt)
}
var fAverageHgt = (fTotalHgt / $('.boxs').length); // 滚动事件(每次滚动都做一次循环判断)
$(window).scroll(function() {
for(var i = 0; i < $('.boxs').length; i++) {
if($(this).scrollTop() > arrOffsetTop[i] - fAverageHgt/2) { // 减去一个固定值，是定位准确点
$('.real_ul li').eq(i).addClass('active').siblings().removeClass('active');
}
}
});
/* 点击事件 */
//main.js
$('.real_ul li').click(function() {
$(this).addClass('active').siblings().removeClass('active');
$('body, html').animate({
scrollTop: arrOffsetTop[$(this).index()]-81
}, 500);
});