我的網站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);
                });
            });
        });
    });
});