我的网站Timonj(Personal website)

时间 2019-11-11

标签我的网站 timonj personal website 栏目网站开发繁體版

原文原文链接

单身狗的清明小长假只能跟电脑过，闲来无事趁着假期作一个我的网站Demo，同时这是本人的第一篇博客，做为Web前端小白技术粗糙，但愿哪里有待提升的大佬们多多指出，拜谢！！！javascript

正文开始，紧张加激动.jpg，哈哈……css

首先先看一下效果图……（有点low……）html

1.首页前端

2.My Resume页面（第一个图标点进去看到的页面）java

3.My Articles页面（第二个图标点进去看到的页面）jquery

4.My Githubgit

这是第三个图标，连接个人github地址，点击进入个人github。网址是：https：//www.github.com/Timonjgithub

5.My Wechatweb

点击第四个微信图标出现弹出框，微信二维码，能够添加个人微信哦！共同进步哦！微信

效果展现到此结束……

废话很少说，上代码……

1.首页html代码：index.html

（不要在乎文字，文笔太烂……）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Timonj</title>
<link rel="stylesheet" type="text/css" href="index_css.css">
<script type="text/javascript" src="jquery-3.1.1.js"></script>
<script type="text/javascript" src="index_js.js"></script>
</head>
<body>
<div id="main">
    <div class="header">
        <div class="header_menu">
        <h1>Timonj</h1>
        <p>No Pain No Life</p>
        <ul>
            <li><a href="My Resume.html"><img class="img1" src="image/resume.png"></a></li>
            <li><a href="My Articles.html"><img class="img2" src="image/blog.png"></a></li>
            <li><a href="https://www.github.com/Timonj" target="_blank"><img class="img3" src="image/github.png"></a></li>
            <li><a><img class="img4" src="image/wechat.png"></a></li>
        </ul>
        </div>
    </div>    
</div>

<div id="footer">
    <div class="left">
            <h2>孤岛的蓝鲸</h2>
    </div>
    <div class="right">
        <p>
        在个人内心/
        藏着一座美丽的孤岛/
        还有一只可爱的蓝鲸<br>
        
        夜晚/
        星星撒满了苍穹/
        月亮也闪动着迷人的微笑<br>

        黑暗里/
        浪花听沙砾的故事/
        婉转而凄楚<br>

        而你从远方走来/
        站在礁石上凝眸远望/
        清风拂动了只有我吻过的马尾<br>

        我想我是那一只蓝鲸/
        也许在梦里/
        我变成了会直立行走的人类/
        在你酣睡之际/
        偷偷吻了你的马尾<br>

        而那座孤岛/
        是否是你掉下的眼泪/
        在某一瞬间/
        幻化成的呢？
        </p>
    </div>    
</div>
<div id="wechat">
    <img src="image/bg_wechat.jpg">
    <button>关闭</button>
</div>
</body>
</html>

首页css代码：index_css.css

@charset "utf-8";
/* CSS Document */
*{margin: 0;padding: 0;}
body{font-family: "微软雅黑";background-color: #e5eecc;}

#main{height: 500px;background-image: url(image/bg_home.jpg);background-repeat: no-repeat;background-size: cover;}
#main .header{width: 1200px;margin: 0 auto;}
#main .header_menu{width: 300px;height: 200px;position: absolute;margin-top: 150px;text-align: center;color: white;}
#main .header_menu ul{list-style-type: none;}
#main .header_menu li{display: inline-block;}
#main .header_menu h1{display: none;}
#main .header_menu p{display: none;}
#main .img1,.img2,.img3,.img4{display: none;}

#main .img1{width: 60px;position: absolute;left: 0;top: 100px; transition: width .8s;} 
#main .img2{width: 60px;position: absolute;left: 80px;top: 100px; transition: width .8s;} 
#main .img3{width: 60px;position: absolute;left: 160px;top: 100px; transition: width .8s;} 
#main .img4{width: 60px;position: absolute;right: 0;top: 100px; transition: width .8s;} 
#main .img1:hover{width: 70px;}
#main .img2:hover{width: 70px;}
#main .img3:hover{width: 70px;}
#main .img4:hover{width: 70px;}

#footer{width: 1200px;margin: 0 auto;position: relative;}
#footer .left{position: absolute;width: 600px;;float: left;margin-top: 100px;display: none;}
#footer .right{width: 600px;float: right;margin-top: 50px;display: none;}

#wechat{width: 250px;position: fixed;left: 625px;top: 140px;background-color: white;text-align: center;display: none;}
#wechat button{padding: 0 4px;margin-bottom: 4px;}
#wechat img{width: 250px;}

首页js代码：index_js.js

// JavaScript Document
$(document).ready(function (){
        $(".header_menu h1").fadeIn(2000);
        $(".header_menu p").fadeIn(2000);
        $(".img1").slideDown(400);
        $(".img2").slideDown(600);
        $(".img3").slideDown(800);
        $(".img4").slideDown(1000,function (){
            $(".left").fadeIn(1000);
            $(".right").fadeIn(1000);
            });
    
        $(".img4").click(function (){
            $("#wechat").slideDown();
        });
    
        $("button").click(function (){
            $("#wechat").slideUp();
        });
    
    });

2.My Resume页面html代码：My Resume.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My Resume</title>
<link rel="stylesheet" type="text/css" href="My Resume_css.css">
<script type="text/javascript" src="jquery-3.1.1.js"></script>
<script type="text/javascript" src="menu_js.js"></script>
</head>
<body>
<section id="header">
    <header>
        <h1>This Is My Resume</h1>
        <p>Timon / 1996年01月11日 / 摩羯座 / 甘肃</p>
        <p>爱好特长：足球，唱歌，文学，中式台球，旅游</p>
        <p>Web前端小白</p>
        <p>Motto：No Pain No life!</p>
    </header>
</section>
<section id="second">
    <div class="skills">
    <h2>职业技能简述</h2>
    <P>
        本人进入前端领域时间较短，热爱前端这个职业，同时也在学习中很是投入，积极学习前端未知的知识，但愿之后可以从事前端这个工做。目前本人学习了PhotoShop，Illustrator，并能够运用这两个工具设计制做网页，掌握度70%。学习了HTML，可以写出良性代码，掌握度75%。同时学习了CSS，可以写出整洁的页面布局，总体美观。学习了JavaScript和jQuery，对于它们的学习熟悉程度目前尚未与前面提到的工具熟悉，但本人正在尝试写一些Demo，相信在将来的尝试中会更加熟悉，并且会更上一层楼。本人对于前端的热爱，促使我不断学习更多技术，同时利用课余时间研究一些感兴趣的Demo，期待本身的进步与成功！
    </P>
    </div>
</section>
<section id="third">
    <div class="self">
        <h2>详细介绍</h2>
        <h3>一、教育经历</h3>
        <p>本人目前就读于西安电子科技大学（211高校），本科二年级在读，专业是数学与应用数学，就读时间2015年到2019年。学习成绩优异，得到两次奖学金。曾参加数学建模比赛，一是锻炼本身，二是丰富大学生活。为了可以既丰富本身各方面的知识，积极参加了学校公益社团，并且在大一时期，作过社会服务，去流浪狗收容中心看管照顾流浪狗，感觉小动物的温暖。作过暑期社会实践，这也是一个公益性质的活动，去自闭症儿童学校照看小朋友，为期一个礼拜，在这一个礼拜的时间里我收益颇多，弱势群体须要咱们每个人的理解，更须要咱们每个人的爱心。</p>
        <h3>二、职业成长</h3>
        <p>本人是自学进入前端这个领域，目前对于这个领域的了解只是九牛一毛，它蕴含着不少丰富的知识等待我去挖掘，我也在积极地学习着，但愿有一天可以进入这个领域，享受前端带来的快乐。</p>
        <p>目前本身写的Demo和文章很少，正在尝试着研究其余优秀的Demo，从中得到了不少启发。要想查看个人开源项目请点击<a href="https://www.github.com/Timonj">个人GitHub</a>,要想查看个人文章，请点击<a href="https://www.cnblogs.com/Timonj">个人Blog</a>。</p>
        <p>本人想在今年暑假（2017年）去北京或者上海实习，但愿能得到这个机会。</p>
        <h3>三、爱好特长</h3>
        <p>本人最大的爱好就是足球，我从高一开始看球踢球，喜欢中超的国安、上港、恒大，国外俱乐部的巴萨等，喜欢的男球员是梅西，喜欢的女球员是中国女足12号王霜，每周我会看这几个俱乐部的比赛，同时我每周六都会去操场踢球，踢球当中我认识不少朋友，他们也在某些方面帮助着我成长，感谢足球，让个人生活这么美好。</p>
        <p>其次就是喜欢听歌唱歌，有的时候会约上朋友去唱歌，这也是我缓解压力的一种方式，爱音乐的你会不会也是这样？我会弹吉他、尤克里里，不过对于它们我只是个初级选手，偶尔会弹弹，说不上厉害，哈哈哈哈！！！</p>
        <p>读书也是个人一大爱好，闲下来没事干的时候我会拿起一本书翻翻，享受书中的乐趣。我也是一个文艺青年哦，没事的时候也写写小文章，文笔还不错，当年做文比赛还得到过一等奖哦！</p>
        <h3>四、自我评价</h3>
        <p>积极乐观，有责任心；为人谦虚，虚心好学；团队意识强烈，善于沟通；工做认真，勇于吃苦。</p>
    </div>
</section>
<section id="fourth">
    <div class="self_label">
        <h2>个性标签</h2>
        <span class="lab">Adobe PhotoShop</span>
        <span class="lab">Adobe Illustrator</span>
        <span class="lab">HTML/CSS</span>
        <span class="lab">JavaScript</span>
        <span class="lab">jQuery</span>
        <span class="lab">奋斗ing</span>
        <span class="lab">热爱运动</span>
        <span class="lab">阳光开朗</span>
    </div>
</section>
<section id="footer">
    <div class="main_footer">
        <div class="l_footer">
            <img src="image/me.png">
        </div>
        <div class="r_footer">
            <nav>
                <ul>
                    <li><a href="#">QQ</a></li>
                    <li><a href="#">WeChat</a></li>
                    <li><a href="#">Weibo</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="https://www.github.com/Timonj">Github</a></li>
                </ul>
            </nav>
        </div>
    </div>
    <div class="design">Designed By Timonj</div>
</section>


<div class="htmleaf-container">
    <div id='ss_menu'>
      <div>
        <i class="fa fa-qq"><a href="https://www.cnblogs/Timonj" target="_blank">博客</a></i>
      </div>
      <div>
          <i class="fa fa-weibo"><a href="index.html">微信</a></i>
      </div>
      <div>
          <i class="fa fa-weixin"><a href="My Articles.html">文章</a></i>
      </div>
      <div>
        <i class="fa fa-renren"><a href="index.html">首页</a></i>
      </div>
      <div class='menu'>
        <div class='share' id='ss_toggle' data-rot='180'>
          <div class='circle'></div>
          <div class='bar'></div>
        </div>
      </div>
    </div>
</div>

</body>
</html>

My Resume页面css代码：My Resume_css.css

@charset "utf-8";
/* CSS Document */
*{margin: 0;padding: 0;}
body{font-family: "微软雅黑";}

#header{background-image: url(image/bg_02.png),url(image/bg_01.jpg);background-size: auto,cover;background-position: top left,center center;color: #FFF;text-align: center;line-height: 2.5em;padding: 30px 0;}

#second .skills{width: 1000px;margin: 0 auto;line-height: 2.5em;padding: 30px 0;color: #666;text-indent: 2em;}
#second .skills h2{text-align: center;}

#third{background: linear-gradient(45deg,#b39c68,#a56365,#412e4c);}
#third .self{width: 1000px;margin: 0 auto;line-height: 2.5em;padding: 30px 0;color: white;}
#third .self a:link,a:visited{color: blue;}
#third .self h2{text-align: center;}
#third .self p{text-indent: 2em;}

#fourth .self_label{width: 600px;margin: 0 auto;color: #666;text-align: center;line-height: 2.5em;padding: 30px 0;}
#fourth .lab{display: inline-block;padding: 0 10px;border-radius: 5px;border:  2px solid #f5f5f5;background-color: #fdccbf;margin: 10px;}

#footer{background-color: #3e3a39;height: 300px;padding: 30px 0;}
#footer .main_footer{max-width: 600px;margin: 0 auto;}
#footer .l_footer{width: 50%;border-right: 2px solid white;float: left;text-align: right;}
#footer .l_footer img{width: 50%;margin-right: 30px;border: 2px solid white;border-radius: 50%;}
#footer .r_footer{width: 49%;float: right;}
#footer .r_footer ul{list-style-type: none;padding-left: 24px;line-height: 2.5em;}
#footer .r_footer a:link,a:visited{color: white;}
#footer .design{clear: both;color: white;text-align: center;margin-top: 270px;}
#ss_menu {
  bottom: 30px;
  width: 60px;
  height: 60px;
  color: #fff;
  position: fixed;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  transition: all 1s ease;
  right: 30px;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
#ss_menu .menu {
  display: block;
  position: absolute;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  text-align: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
  color: #fff;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  transition: all 1s ease;
}
#ss_menu .menu .share {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  transition: all 1s ease;
}
#ss_menu .menu .share .circle {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  transition: all 1s ease;
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  top: 50%;
  margin-top: -6px;
  left: 12px;
  opacity: 1;
}
#ss_menu .menu .share .circle:after, #ss_menu .menu .share .circle:before {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  transition: all 1s ease;
  content: '';
  opacity: 1;
  display: block;
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
}
#ss_menu .menu .share .circle:after {
  left: 20.78461px;
  top: 12.0px;
}
#ss_menu .menu .share .circle:before {
  left: 20.78461px;
  top: -12.0px;
}
#ss_menu .menu .share .bar {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  transition: all 1s ease;
  width: 24px;
  height: 3px;
  background: #fff;
  position: absolute;
  top: 50%;
  margin-top: -1.5px;
  left: 18px;
  -webkit-transform-origin: 0% 50%;
  -moz-transform-origin: 0% 50%;
  -ms-transform-origin: 0% 50%;
  -o-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
  -webkit-transform: rotate(30deg);
  -moz-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  transform: rotate(30deg);
}
#ss_menu .menu .share .bar:before {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  transition: all 1s ease;
  content: '';
  width: 24px;
  height: 3px;
  background: #fff;
  position: absolute;
  left: 0px;
  -webkit-transform-origin: 0% 50%;
  -moz-transform-origin: 0% 50%;
  -ms-transform-origin: 0% 50%;
  -o-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
  -webkit-transform: rotate(-60deg);
  -moz-transform: rotate(-60deg);
  -ms-transform: rotate(-60deg);
  -o-transform: rotate(-60deg);
  transform: rotate(-60deg);
}
#ss_menu .menu .share.close .circle {
  opacity: 0;
}
#ss_menu .menu .share.close .bar {
  top: 50%;
  margin-top: -1.5px;
  left: 50%;
  margin-left: -12px;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transform: rotate(405deg);
  -moz-transform: rotate(405deg);
  -ms-transform: rotate(405deg);
  -o-transform: rotate(405deg);
  transform: rotate(405deg);
}
#ss_menu .menu .share.close .bar:before {
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transform: rotate(-450deg);
  -moz-transform: rotate(-450deg);
  -ms-transform: rotate(-450deg);
  -o-transform: rotate(-450deg);
  transform: rotate(-450deg);
}
#ss_menu .menu.ss_active {
  background: #00796B;
  -webkit-transform: scale(0.7);
  -moz-transform: scale(0.7);
  -ms-transform: scale(0.7);
  -o-transform: scale(0.7);
  transform: scale(0.7);
}
#ss_menu div {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  width: 60px;
  height: 60px;
  font-size: 30px;
  text-align: center;
  background: #00796B;
  border-radius: 50%;
  display: table;
}
#ss_menu div i {
  display: table-cell;
  vertical-align: middle;
}
#ss_menu div:hover {
  background: #009688;
  cursor: pointer;
}
#ss_menu div:nth-child(1) {
  top: 0px;
  left: -160px;
}
#ss_menu div:nth-child(2) {
  top: -80.0px;
  left: -138.56406px;
}
#ss_menu div:nth-child(3) {
  top: -138.56406px;
  left: -80.0px;
}
#ss_menu div:nth-child(4) {
  top: -160px;
  left: 0.0px;
}

i{font-size: 0.6em;}
#ss_menu a{text-decoration: none;}
#ss_menu a:link,a:visited{color: white;}

My Resume页面js代码：menu_js.js

// JavaScript Document

$(document).ready(function (ev) {
    var toggle = $('#ss_toggle');
    var menu = $('#ss_menu');
    var rot;
    $('#ss_toggle').on('click', function (ev) {
        rot = parseInt($(this).data('rot')) - 180;
        menu.css('transform', 'rotate(' + rot + 'deg)');
        menu.css('webkitTransform', 'rotate(' + rot + 'deg)');
        if (rot / 180 % 2 == 0) {
            toggle.parent().addClass('ss_active');
            toggle.addClass('close');
        } else {
            toggle.parent().removeClass('ss_active');
            toggle.removeClass('close');
        }
        $(this).data('rot', rot);
    });
    menu.on('transitionend webkitTransitionEnd oTransitionEnd', function () {
        if (rot / 180 % 2 == 0) {
            $('#ss_menu div i').addClass('ss_animate');
        } else {
            $('#ss_menu div i').removeClass('ss_animate');
        }
    });
});

3.My Articles页面的html代码：My Articles.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My Articles</title>
<link rel="stylesheet" type="text/css" href="My Articles_css.css">
<script type="text/javascript" src="jquery-3.1.1.js"></script>
<script type="text/javascript" src="My Articles_js.js"></script>
</head>
<body>
<div id="main">
<div class="main_m">
    <h1>个人文章</h1>
    
    <div class="title">
        <ul>
            <li><h2 class="li1">个人理想与梦想</h2></li>
            <li><h2 class="li2">会飞的鱼</h2></li>
            <li><h2 class="li3">故乡的小河</h2></li>
            <li><h2 class="li4">茫</h2></li>
        </ul>    
    </div>
    
    <div class="article">
        <section class="article1">
            <h3>个人理想与梦想</h3>
            <p>十年前，我上小学三年级，那是我第一次被老师问到个人理想是什么。那时我在农村上学，地处偏僻，交通不顺畅，村里尚未一户人家买过电脑，惟一能了解外面世界的途径就是电视机。</p>
            <p>在个人印象中，我家曾有过一台彩色的创维牌电视机，那是爸爸在城里给人打工老板送的，他以为卖给废品厂太惋惜了，并且当时家里正好也没有电视机，就带回乡下找了个修理工修好放在家里打发时间。当时我家是村里少有电视机的几家之一，村里的伙伴们天天跑来看《星光灿烂猪八戒》，还有一些老爷爷同咱们一块儿挤在小屋子里看，那场面如今想起来甚是壮观。自从有了电视看，我在伙伴们中的威信就提升了很多，本身感受也无比骄傲。</p>
            <p>可是后来不知什么缘由彩色电视机坏了，估计爸爸以为再修的话划不来了，也就没有再修。还有一个重要缘由是那个放电视机的小屋是我家开的小卖部，妈妈惧怕人多了会偷东西，毕竟村里的小孩子太多了。</p>
            <p>后来爸爸改行收起了废品，无论刮风下雨，仍是严寒酷日，他都会天天骑着三轮自行车穿梭在大街小巷，用一声声故意拖长的吆喝声提醒着城里的人们。那个秋天他收到一台比以前那台创维牌破旧些的彩色电视机，但仍是勉强能够看，虽然偶尔有少许雪花出现。而这台电视机陪伴了我整个小学。</p>
            <p>关于宇航员的事迹我都在我家这台年事已高的电视机上得来的，那个时候杨利伟成为了国民的焦点，也成为了咱们小孩之间仰慕的偶像。咱们那个时候不太懂航天器，也不了解太空是什么样子，只是感受很玄乎很美妙，能进入这种地方的人确定很了不得。成天的新闻大多都会有关于神舟五号载人飞船的报道，看着电视机上一幕幕使人振奋的镜头，个人心像漂浮在河面上的小红花一块儿跟着流动。 </p>
            <p>我对老师说我之后要作一位宇航员，能飞天的那种。</p>
            <p>“为何会想当宇航员呢？”老师笑得很轻，就像早春时的风同样。</p>
            <p>“由于我想作一个跟杨利伟同样很了不得的人物，全部的小孩都会羡慕我，我会成为他们的偶像。”</p>
            <p>我想成为宇航员这件事很快就在全班传开了，有的伙伴不知道什么是宇航员就跑来向我虚心请教，我用略带鄙视的语气向他们解释着什么是宇航员，虽然我也不太清楚宇航员究竟是作什么的，但能飞天已经足够酷了。小学毕业，转学去城里读初中，见到了好多之前未曾见过的事物，学到了之前未曾学到的东西，也遇到了好多之前未曾碰见过的人。</p>
            <p>2010年的那个暑假我回了老家，偶然在电视上看到一个选秀节目，给我印象最深入的是一个身材均匀，面目清秀，声音细腻且富有磁性的腼腆大哥哥。他的表演让我着迷，从那一刻起我就喜欢上了他，将他做为本身的偶像，也从那一刻起个人梦想就是作一位歌手。</p>
            <p>喜欢上了他的歌声，喜欢上了他弹吉他时的神情，所以我会天天关注他的新闻，可短暂的假期就这样结束了，我心有不肯地回到学校读书。没想到个人同窗们都痴迷于他，支持他，我问他们为何，他们告诉我他是咱们这儿的人。</p>
            <p>开始喜欢起了音乐，我偷偷用攒了很久的钱买了一个MP4，上学的路上听，回家的路上听，几乎他的每一首歌都被我学会了。可仅仅这样并不表明我多么热爱音乐，因而我开始央求妈妈给我买一把吉他，像个人偶像那样弹着吉他唱歌那会是多么酷的一件事，可个人妈妈不但拒绝了个人要求，并且还痛骂了我一顿。我并无由于妈妈的拒绝与痛骂而放弃对吉他的渴望，我开始向个人哥哥哭诉个人委屈，但愿能在他那里获得安慰，最好是能获得我求之不得的吉他。</p>
            <p>个人哥哥学习成绩没个人好，中考的成绩勉强能上市里的三流高中，但爸爸妈妈考虑到还有一个成绩更好的我也就不让他上了。他辍学后先去了北京当了一年的保安，以后便去了南方的城市打工。我在狂热音乐的那段日子里，他正好在替南方的某电子工厂打工。</p>

            <p>个人诉求获得了哥哥的同情，春节回家过年的时候便带了一把粉红色的吉他，吉他的花纹甚是漂亮，镶贝也很精致，个人音乐梦就今后开始。但是出于经济的拮据和爸妈的不支持，我就没有机会报名学习吉他，但学习吉他的热情一直在我心底燃烧着，未曾熄灭过。直到高一的时候我才开始学习吉他，但没过多久就放弃了，这也是我一直以来所后悔的一件事。</p>
            <p>爱上音乐的同时我也爱上了文学。农村里没有专门的书店，临近学校的小卖部只会卖一些资料书与练习册，因此小时候我没读过不少书，对文学的认识也很匮乏。到了城里我接触了好多新事物，固然也开始接触文学，我不喜欢读中外经典，总以为里面的文字枯涩难懂，直到如今我都能用一个手掌就能数出读过的经典名著。我同其余青春期的同窗同样，喜欢读一些关于青春的书，读韩寒，读郭敬明。没有多余的钱去买书，就让同窗帮我下载电子书，晚上熄灯了惧怕爸爸发现了会挨骂，就偷偷窝在被窝里看，正因如此，个人眼睛度数一个学期就蹭蹭上涨了200度。</p>
            <p>小安是我初中的同窗，他从其余班级转过来，由于咱们班是所谓的重点班，但他的成绩却不堪入目，他之因此能进入这样的班级，是由于他妈妈跟咱们班主任相识，这是后来我从小安口中得知的。小安是家里的独子，因此小安从小就获得了家庭的宠爱，但他不像其余被溺爱的孩子同样桀骜不羁，他的腼腆是给人的第一印象。认识小安好多年，我却历来没从他口中据说过他的爸爸，也历来没见过他的爸爸接他回家过，记忆中都是他的妈妈开车接她。</p>

            <p>小安家里富裕，从小学习小提琴，对音乐研究得比我这个菜鸟深入，他喜欢周杰伦，几乎周董全部的专辑他都有收藏。小安算是我志同道合的第一个朋友，他最大的梦想也是作一位歌手，不过他的这个梦想比我实现起来就容易多了。小安文笔很差，写不出很好的歌词，我就成了他“御用”的歌词创做者，我写词，他谱曲，咱们常常开玩笑说是周杰伦跟方文山的传人，但我知道个人文笔不及方文山的万分之一。他写的曲很好听，是那种平淡却不失华丽的感受，就这样咱们自娱自乐了两年。</p>
            <p>后来我考入了市里最好的高中，小安做为借读生的身份也来个人学校求学，固然咱们不可能在同一个班级。上了高中，咱们见面的机会也就变少了，能一块儿说话聊天的机会也可想而知，偶尔会在QQ上寒暄几句，聊聊之前那段美好的时光。能成为一名歌手是小安心里最大的梦想，他一直没有停歇追逐梦想的脚步，由于他知道坚持不必定能成功，但放弃就必定不会成功。小安做为艺术生参加了高考，艺考成绩至关不错，惋惜在文化课方面欠缺的太多了，最后就只能去省内的警察学院了。前些天我问他有没有想法去参加一些选秀节目，他只是轻描淡写地来了一句——唉，玩玩就好了。</p>
            <p>有时候我很是羡慕小安的那种坚持，能对本身喜欢的事十年如一日的充满热情那会是件很幸福的事。有的时候我却很惧怕面对本身那么庞大的梦想，不是由于本身多么怯懦，而是由于现实的差距。</p>
            <p>有些人嘲笑咱们不配拥有那么高贵的梦想，由于咱们出身卑微；有些人嘲笑咱们狂妄自大，殊不知咱们心里的那份孤独与困惑；有些人嘲笑咱们没有能力，殊不知咱们为此所付出的汗水。也许咱们只是别人眼中一文不值的沙子，是不起眼的小草，但无论是沙子仍是小草，咱们都能骄傲地活着，而他们却只能在一张虚伪的面具下佯装着所谓的高贵。</p>
            <p>有些事，年轻的时候也许不太明白，但随着时间的流动，慢慢地咱们发现，咱们所不能理解的那才叫生活。</p>
            <p>而如今，个人梦想是能成为一名做家，写本身的故事，写别人的故事，但愿本身拙劣的述说能带给别人一点温暖与感动，也带给本身一份真实的幸福。</p>
            <p>我知道这个梦想是多么的奢侈，也明白其中的艰辛，但心有梦想，就不会迷路，你说是吗？就像我曾经写过的一段话同样——就算没有将来的明媚，还有彩虹的绚烂，再大的风和雨，我也要闯一闯，哪怕遍体鳞伤，也没什么遗憾。</p>
        </section>
        
        <section class="article2">
            <h3>会飞的鱼</h3>
            <p>天空灰得像余烬，一切都被混沌的面纱所笼罩，阴云在禁锢的时空里流转，腾悬，最后在即将湮灭的时刻发出灼热的余温。天空黑压压一片，可贵有几处亮光闪烁，一转眼的时间就被从新涂抹成暗色。远处的山朦胧中显现出轮廓，狂风卷起落叶翻腾，尘土跟着跳跃，然后又重重地摔落于大地。</p>
            <p>我站在大地之中，仿佛站在过去与将来的边界，四周空无一人，四周空无一物，在一道刺眼的亮光伴着一声闷响出现的那个瞬间，周围一切静止，悄无声息，我行走在昏暗的甬道，就像被某种神秘的力量催促着脚步，一步一步，不知要走到哪里。个人意识全然不受控制，任由这缥缈的思绪蔓延。我看到了过去，看见了一只红色的鱼在个人头顶游来游去，没有水，却彻底能够活着。我又看到了将来，看见了一只会飞的鱼，两只翅膀忽扇忽扇，小嘴嘟哝着对我说——等雨来的时候我就来了，雨走的时候我就该走了。</p>
            <p>我挠着头思忖，怎么也想不明白鱼怎会飞呢？</p>
            <p>个人眼前模糊一片，闪电依然像一个调皮的孩子躲躲藏藏，突然一阵风悬空而起，卷起一地尘土，吹进了个人眼睛。</p>
            <p>我告诉本身雨就快来了，她也快来了。</p>
            <p>早晨起床的时候天边还有朝霞，仅仅半天的时间老天爷就翻脸了，大概他明白了我心里的渴望，心想这小子很久没看到那条会飞的鱼了，今天大爷高兴让他见一回，省得背地里说我坏话。我琢磨着老天爷真够意思的，说下雨就下雨，真不亏是爷。</p>
            <p>天空从早晨到中午并无什么异样，只是偶尔有一阵阵微弱的秋风吹过，或者在风吹过的时候落叶翕动两三下。但是中午一过，天空开始变化，一片片的乌云接踵而来，顿时周围暗了下来。大片大片的树叶像屠夫刀下的嫩肉，呲溜呲溜地往地上砸，发出一阵阵无声的闷响。</p>
            <p>黄昏时刻，吃过晚饭，无所事事，趿拉着鞋站在廊沿边上眺望对面的大山，大山安安静静，脱光了身上的衣物，像个娇羞的少女安然不动。我站得久了，腿有点酸，就顺势一屁股坐在廊沿边上，坐下的时候一股凉气顺着毛细血管四处扩散，这凉气到底仍是没能抵过我常年不变的体温，一下子就感受不到了。</p>
            <p>母亲洗好锅碗，从黑暗的厨房里走出来，看我呆呆地坐着看山，不解地问，你干啥哩？不进屋歇着，搁着发啥呆哩？</p>
            <p>我嗤嗤一笑，露出一个小酒窝。妈哎，屋里太闷了，出来透透气。</p>
            <p>看来天要下雨哩，不过也好，庄稼刚种好，须要雨水。你奶奶的被子拿回屋里没？母亲跨进正屋的时候说。</p>
            <p>我这才想起奶奶的被子还没拿回屋。早晨看天儿不错，母亲叫我拿被子出去晾晒，驱驱潮湿，可天气说变就变，不得不从新找个大日头再晾晒。我赶紧跑出院子，差点一个踉跄。</p>
        </section>
        
        <section class="article3">
            <h3>故乡的小河</h3>
            <p>这几年我在外地求学，一年回家也只能是放长假，每次到考试周的时候都格外地兴奋激动，并不只仅能够回家，更重要的即是能看见故乡的小河。故乡的小河在个人记忆中占据了很大的一部分，童年的美好时光都是在农村长大，那个时候戏水即是夏天最开心的玩耍。</p>
            <p>我出生在被大山环绕的农村，之前马路都是原始状态，一下雨就十分泥泞，马路中央的洼水被车碾过，混沌的水滴溅射好远。马路处处坑坑洼洼，汽车行驶在上面颠簸蹦跳得厉害，那时车辆不多，常见的也只有去往市里的几辆破旧褪色的班车，偶尔见到小轿车的时候咱们都兴奋不已，互相吹嘘之后飞黄腾达了要买辆来开。到了四年级的时候开始修建柏油马路，那个时候没见过世面，不知道黑色的粘稠物叫作沥青，只见工人们用它搅拌石子，而后铺就在马路上，压平冷却，一段柏油马路就此修建完毕。</p>    
            <p>坐在开往乡下的班车上我看向窗外，夏天的山峦绿色一片，偶尔有几处突兀的黄色棱角，俨然一幅油彩画。车子在柏油马路上飞驰，因为多年的通车，柏油马路也开始有一小处的坑洼，车子也颠簸起来，不过比起之前车子已然平稳不少。</p>
            <p>幼时小河是大人们常常去的地方，也是小孩子们最爱去的地方。家里人的衣服脏了，妈妈总会端着一个红色的大盆子，里面盛满了要洗的衣服，我跟在后面屁颠屁颠地去往村里惟一的那条小河。河面宽阔，圆鼓鼓的石头静静地躺在平静的水面之下，仿佛在很享受地听河水唱歌，有时候你会发现有一两条黑色的小鱼在游动，一惊扰便会以迅雷之势溜走。河水不厚，异常的清澈干净，能一眼便能看到河底，看到小小的贝壳在光亮的石头上蠕动。</p>
            <p>妈妈将红色大盆放在河边，掏出全部的衣物浸没在河水中，河水缓慢，并不会将衣物冲走，而后妈妈将盆子盛满河水，一件一件地来洗。河水干净而没有异味，大可没必要为此而愁恼。</p>
            <p>夏天大约是村里最热闹的季节了，麦子成熟了，黄灿灿的一片接着一片，从高处往下看，仿佛被黄色染料了浸染了同样，风吹过，能够听到麦子唱歌的声音。</p>
            <p>夏天最繁重的农活毫无疑问就是割麦子和打麦子了。清晨天刚微亮，大人们在小孩还在酣睡的时候便带着镰刀和绳子去下田了，到了中午日头高升，气温渐高，爸妈背着麦子从田里回来。那时候姐姐由于学业不成便早早辍了学，在爸妈归来的时候正好也就作好了饭菜。休息一中午，等到太阳落山的时候他们又开始去田里割麦子了。</p>
            <p>爸爸见我兄弟二人成天无所事事，做业也很差好写，就拉着我和我哥背麦子，虽然咱们不像大人那么有力气，但一两捆仍是能够承受的。干的农活多了，手里的茧也慢慢成长了起来，到如今，这些茧提醒着我劳动最光荣。</p>
            <p>这些年变化很大，原先都是牛耕马耕，如今家家都是旋转式耕耘机，要不就是亲房邻居几家合资买的，马牛这些体型庞大的牲畜被贩子们一概买走了，接着割麦也由人工转变成机器了。农村的确发展起来了。</p>
            <p>麦子收割回家以后就是打麦了，也就是将麦粒与糠糟分离。而后将麦子装包堆放起来，等到家里的面快吃完的时候再拿出来淘洗并磨成面。</p>
            <p>这个时候村里的小河派上了用场，大人们趁早晨的太阳还没到达必定的高度的时候就开始准备好大木篮、木漏和漏篮。大人用铁锹将大块的石头堆积一排，再铲些细小的石块覆盖在上面，等过会浑浊的水沉积下来一切又恢复成原有的样子，澄澈见底，这时一个小小的潭就建成了。大人将大木篮放置其中，水从缝隙蹦进了木篮，顿时整个木篮里面都被干净的水充满，这时就能够倒入麦子了。</p>
            <p>麦子被一勺一勺的清洗，这样作的目的主要是为了去除干瘪的麦粒和一些灰尘石子。村里的老人们在上世纪饱受饥饿之苦，懂得勤俭节约，这样的美德天然而然地被后代们沿承。干瘪的麦粒天然不会倒进河里随水流远去，更不会弃之无论，它们的用处可多了，不过最多时候是喂家里的牲畜。</p>
            <p>每逢谁家要磨面，淘粮食这一步骤是万万不可少的。不过现现在这种活动已经不复存在了，偶尔在自家院子里淘粮食。</p>
            <p>冬天来临的时候，寒风从四面八方吹来，裹挟着雪花从远方蜂拥而至，好像是要赶赴一场久别的重逢与盛会。一晚上的时间，屋顶、院落、树枝、马路、山头，这一切都被一种莫名的欢喜所覆盖，银装素裹，一个晶莹美妙的世界就此呈现。</p>
            <p>到了腊月初八，俗称腊八节，在个人家乡不只仅是要吃腊八粥的，还有一项风俗彷佛专为小孩子们设计的——采冰。</p>
            <p>到了腊八这一天，人们起的格外的早，尤为是小孩子们，由于他们知道本身要去河边采冰去咯。早晨，他们背上用竹条编织的小背篓或者是提篮，带上镐头或锄头便结伴而行去河边凿冰。</p>
            <p>我除了喜欢大年初一那几天以外，腊八这天已然是我最钟爱的日子。小的时候，常常是表哥带领咱们兄弟二人去小河边采冰，后来稍大点了，就和我哥一块儿去采。</p>
            <p>小孩子力气小，常常须要凿好长时间才能凿出一小个洞，冰被凿开的一瞬间，咱们欢呼雀跃，仿佛是捡到了绝世珍宝。透太小洞，能清晰地看到河底的小石子，偶尔还能瞅见几条小鱼游来游去，一惊扰，因而以迅雷不及掩耳之势跑开了。</p>
            <p>听老人们说，腊八冰得放到墙根底下，待慢慢消融以后，而后就能够看到来年的收成。</p>
            <p>我小时顽皮，常常趁大人不注意的时候偷吃腊八冰，被发现以后妈妈追在我后面骂着脏话，而我依然无论不顾地享受着腊八冰的甘甜。这种快乐，到现在已经时隔多个春秋，好多年以后只能在回忆中追寻童年的踪影。</p>
            <p>现现在，村里的变化说不上天翻地覆，但也足够陌生。再也看不到一下雨就泥泞的石土路，看不到人们用压井打水的情景，也看不到冬天孩子们提着滑雪板在陡峭的山路上滑行的欢乐，看不到隆冬时节一群大人围着一盘象棋的你争我吵，也看不到晚饭后打麦场一群孩子打沙包的游戏，更看不到小河从前特有的清澈与美丽。</p>
            <p>我想象不到几年的时间居然让村落面目一新，从前长满青苔的土墙再也看不到了，到处都是钢筋混凝土的味道，青墙黛瓦的年代愈来愈远。</p>
            <p>小河长满了长草，尽管村里禁止向河里倒垃圾，但也无济于事了，如果谁家有个红白事，办席的泔水和残羹剩饭都向其“慷慨”，村里年轻医生用掉了吊水瓶和药盒也不会做何处置，直接倒入小河里。</p>
            <p>日积月累，小河渐渐发臭，一到盛夏，这种混杂着泔水和剩肉腐烂的腥臭味更增强烈，这种臭味所到之处都会迎来众人的怒骂之声，却不知，是他们让这条本来美丽的小河面目全非。</p>
            <p>我不知道之后的之后还能不能再见到这条小河，更不会知道它会不会变回成记忆中残存的模样，可我知道我会永远惦记着它的。</p>
        </section>
        
        <section class="article4">
            <h3>茫</h3>
            <p>我坐在纸窗前又听见了风的呼啸</p>
            <p>篱笆也静静地听着歌唱</p>
            <p>天空阴沉布满雨云</p>
            <p>寒冷氤氲着她的衣裙</p><br>
            <p>破碎的瓦片抵挡不了风雨的侵袭</p>
            <p>头顶的雨水清洗着孤独的灵魂</p>
            <p>我闭上眼睛等待梦的轮回</p>
            <p>黎明逐渐涣散烧成死灰</p><br>
            <p>我捡起一支破旧的铅笔</p>
            <p>竭力描绘着梦的轮廓</p>
            <p>在滴满尘土的纸上闪着光亮</p>
            <p>那是丢失在亘古的哀伤</p><br>
            <p>因而我扛起行囊开始行走</p>
            <p>顺着河流的方向蜿蜒着自由</p>
            <p>晨曦的微光透过树叶的罅隙</p>
            <p>映照在孩童般的脸上闪闪发光</p>
        </section>
    </div>
</div>
</div>
</body>
</html>

My Articles页面的css代码：My Articles_css.css

@charset "utf-8";
/* CSS Document */
*{margin: 0;padding: 0;}
body{font-family: "微软雅黑";color: white;}

#main {background-image: url(image/bg_blog.jpg);background-repeat: no-repeat;background-size: cover;height: 800px;}
.main_m{width: 1000px;margin: 0 auto;}
#main h1{text-align: center;padding: 30px 0;}


#main .title{width: 200px;float: left;}
#main .article{width: 800px;float: right;} 
#main .article1,.article2,.article3,.article4{height: 550px;overflow: auto;padding: 0 20px;line-height: 1.8;}
#main .article2,.article3,.article4{display: none;}


h2{cursor: pointer;}
p{color: #e5eecc;}  
h1,h2,h3{color:#D0EBD8;}
ul{list-style-type: none;}
li{margin-bottom: 40px;}

My Articles页面的js代码：My Articles_js.js

// JavaScript Document
$(document).ready(function (){
    $(".li1").click(function (){
        $(".article2").slideUp(1500,function (){
            $(".article3").slideUp(1500,function (){
                $(".article4").slideUp(1500,function (){
                    $(".article1").slideDown(1500);
                });
            });
        });        
    });
    
    
    $(".li2").click(function (){
        $(".article1").slideUp(1500,function (){
            $(".article3").slideUp(1500,function (){
                $(".article4").slideUp(1500,function (){
                        $(".article2").slideDown(1500);
                });
            });
        });
    });
    
    $(".li3").click(function (){
        $(".article1").slideUp(1500,function (){
            $(".article2").slideUp(1500,function (){
                $(".article4").slideUp(1500,function (){
                        $(".article3").slideDown(1500);
                });
            });
        });
    });
    
    $(".li4").click(function (){
        $(".article1").slideUp(1500,function (){
            $(".article2").slideUp(1500,function (){
                $(".article3").slideUp(1500,function (){
                        $(".article4").slideDown(1500);
                });
            });
        });
    });
});

4.image文件夹

如下是透明图片……不知道能不能看得见……

注解：全部页面引用的jQuery版本为jquery-3.1.1，请自行下载。

My Resume中关于右下角的旋转提示框css和js借鉴了网上的代码，特别指明！

本人初学前端，好多地方代码冗杂，有待提升，但愿大佬们指出！拜谢。