首页 > > 网页制作 > css >

个人网站Timonj(Personal website)

2018-06-24 01:09:57来源：未知阅读 ()

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

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

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

1.首页

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

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

4.My Github

这是第三个图标，链接我的github地址，点击进入我的github。网址是：https：//www.github.com/Timonj

5.My Wechat

点击第四个微信图标出现弹出框，微信二维码，可以添加我的微信哦！共同进步哦！

效果展示到此结束……

废话不多说，上代码……

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>1、教育经历</h3>
        <p>本人目前就读于西安电子科技大学（211高校），本科二年级在读，专业是数学与应用数学，就读时间2015年到2019年。学习成绩优异，获得两次奖学金。曾参加数学建模比赛，一是锻炼自己，二是丰富大学生活。为了能够既丰富自己各方面的知识，积极参加了学校公益社团，而且在大一时期，做过社会服务，去流浪狗收容中心看管照顾流浪狗，感受小动物的温暖。做过暑期社会实践，这也是一个公益性质的活动，去自闭症儿童学校照看小朋友，为期一个礼拜，在这一个礼拜的时间里我收益颇多，弱势群体需要我们每一个人的理解，更需要我们每一个人的爱心。</p>
        <h3>2、职业成长</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>3、爱好特长</h3>
        <p>本人最大的爱好就是足球，我从高一开始看球踢球，喜欢中超的国安、上港、恒大，国外俱乐部的巴萨等，喜欢的男球员是梅西，喜欢的女球员是中国女足12号王霜，每周我会看这几个俱乐部的比赛，同时我每周六都会去操场踢球，踢球当中我认识很多朋友，他们也在某些方面帮助着我成长，感谢足球，让我的生活这么美好。</p>
        <p>其次就是喜欢听歌唱歌，有的时候会约上朋友去唱歌，这也是我缓解压力的一种方式，爱音乐的你会不会也是这样？我会弹吉他、尤克里里，不过对于它们我只是个初级选手，偶尔会弹弹，说不上厉害，哈哈哈哈！！！</p>
        <p>读书也是我的一大爱好，闲下来没事干的时候我会拿起一本书翻翻，享受书中的乐趣。我也是一个文艺青年哦，没事的时候也写写小文章，文笔还不错，当年作文比赛还获得过一等奖哦！</p>
        <h3>4、自我评价</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);
                });
            });
        });
    });
});