這是一個爲我愛豆，王源。所做的一個簡單的軟件。
其中，每一張照片都可以點，相對應的是其網址。
學習的快樂就是把學習的東西變成一切自己喜歡的樣子。
主頁代碼：
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> | |
| <title></title> | |
| <base target="content" /> | |
| <script type="text/javascript" src="js/jquery.min.js"></script> | |
| <link rel="shortcut icon" href="favicon.ico"> | |
| <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet"> | |
| <link href="css/font-awesome.min.css?v=4.4.0" rel="stylesheet"> | |
| <style> | |
| body{ | |
| margin: 0; | |
| padding: 0; | |
| overflow: hidden; | |
| } | |
| .page{ | |
| position: absolute; | |
| /*left: 300px;*/ | |
| width: 100%; | |
| height: 100%; | |
| background-color: lavender; | |
| } | |
| .top{ | |
| position: fixed; | |
| width: 100%; | |
| height: 60px; | |
| background-color: #308E76; | |
| z-index: 500; | |
| } | |
| .mybtn{ | |
| margin-top: 5px; | |
| margin-left: 15px; | |
| color: #FFFFFF; | |
| font-size: 28px; | |
| width: 50px; | |
| border-radius: 50%; | |
| } | |
| .mybtn:hover{ | |
| cursor: pointer; | |
| } | |
| .backimg{ | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 1000; | |
| background-color: black; | |
| opacity: 0.3; | |
| display: none; | |
| } | |
| .right-dh{ | |
| border: 1px solid #000000; | |
| position: absolute; | |
| left: -300px; | |
| background:url(img/123.jpg) center; | |
| width: 300px; | |
| height: 100%; | |
| z-index: -10; | |
| } | |
| .right-dh-tx{ | |
| text-align: center; | |
| } | |
| .right-dh-tx img{ | |
| display: block; | |
| width: 110px; | |
| border-radius: 50%; | |
| border: 3px solid #FFFFFF; | |
| margin: 100px auto 30px; | |
| } | |
| .right-dh-tx span{ | |
| color: #FFFFFF; | |
| } | |
| .cont iframe{ | |
| position: absolute; | |
| top: 65px; | |
| width: 100%; | |
| height: 100%; | |
| border: 0px; | |
| /*background-color: brown;*/ | |
| } | |
| .dh-btn{ | |
| margin-top: 50px; | |
| /*border-top: 1px solid gray;*/ | |
| } | |
| .dh-btn a{ | |
| display: block; | |
| color:black; | |
| text-decoration: none; | |
| /*border-bottom: 1px solid gray;*/ | |
| height: 60px; | |
| line-height: 60px; | |
| text-indent: 20px; | |
| } | |
| hr{ | |
| width: 200px; | |
| color: gainsboro; | |
| opacity: 0.3; | |
| margin-top: 50px; | |
| } | |
| </style> | |
| <script> | |
| $(document).ready(function(){ | |
| //側滑按鈕點擊事件 | |
| $(".mybtn").click(function(){ | |
| //頁面整體側滑 | |
| $(".page").animate({ | |
| left:'300px' | |
| }); | |
| //顯示透明度div層 | |
| $(".backimg").css({ | |
| "display":"block" | |
| }); | |
| //左側導航右滑 | |
| $(".right-dh").animate({ | |
| left:'0px' | |
| }); | |
| }); | |
| //還原點擊事件 | |
| $(".backimg").click(function(){ | |
| //頁面整體左滑動 | |
| $(".page").animate({ | |
| left:'0px' | |
| }); | |
| //顯示透明度div層隱藏 | |
| $(".backimg").css({ | |
| "display":"none" | |
| }); | |
| //左側導航右滑 | |
| $(".right-dh").animate({ | |
| left:'-300px' | |
| }); | |
| }); | |
| //欄目選擇事件 | |
| $(".dh-btn a").click(function(){ | |
| //頁面整體左滑動 | |
| $(".page").animate({ | |
| left:'0px' | |
| }); | |
| //顯示透明度div層隱藏 | |
| $(".backimg").css({ | |
| "display":"none" | |
| }); | |
| //左側導航右滑 | |
| $(".right-dh").animate({ | |
| left:'-300px' | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <!--左側導航--> | |
| <div class="right-dh"> | |
| <!--左側導航頭像--> | |
| <div class="right-dh-tx"> | |
| <img src="img/5.png" /> | |
| <a href="#"> | |
| <span style="color: green;font-size: 36px;">王源</span> | |
| </a> | |
| </div> | |
| <hr /> | |
| <!--導航欄--> | |
| <div class="dh-btn"> | |
| <a class="dj" href="zhuye.html"> | |
| <i class="fa fa-bars"></i> 個人資料 | |
| </a> | |
| <a href="zpzs.html"> | |
| <i class="fa fa-bank"></i> 作品展示 | |
| </a> | |
| <a href="ysxz.html"> | |
| <i class="fa fa-beer"></i> 藝術寫真 | |
| </a> | |
| <a href="yyjl.html"> | |
| <i class="fa fa-bold"></i> 演繹經歷 | |
| </a> | |
| </div> | |
| </div> | |
| <!--右側界面--> | |
| <div class="page"> | |
| <div class="backimg"></div> | |
| <div class="top"> | |
| <!--向右滑動按鈕--> | |
| <!--<i class="mybtn fa fa-user"></i>--> | |
| <img class="mybtn" src="img/04.jpg"/> | |
| </div> | |
| <!--主要內容--> | |
| <div class="cont"> | |
| <iframe name="content" src="right.html"></iframe> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
第一頁代碼：
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title></title> | |
| <style> | |
| body{ | |
| height: 50px; | |
| width: 100%; | |
| background-color: #E0ECDC; | |
| } | |
| .r p{ | |
| height: 100px; | |
| width: 220px; | |
| margin-top: -110px; | |
| } | |
| .r img{ | |
| width: 150px; | |
| margin-left:230px ; | |
| margin-top: -90px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="r" > | |
| <a href="http://baike.so.com/doc/5512432-5748212.html"> | |
| <h2 style="margin-left: 30px;color: #000000;">王源</h2> | |
| </a> | |
| <h3 style="margin-left: 30px;">TFBOYS成員</h3> | |
| <img src="img/17.png" /> | |
| <p>2013年8月6日以TFBOYS組合形式出道。2015年11月8日鋼琴彈唱14歲完成的首支自己作詞作曲的單曲《因爲遇見你》，後憑此曲獲第9屆城市至尊音樂榜年度聽衆最愛新人... >>></p> | |
| </div><br /> | |
| <hr style="width: 90%;align: center;"/> | |
| <div class="r1" > | |
| <h2>明星關係</h2> | |
| <a href="http://baike.so.com/doc/7015646-7238535.html"> | |
| <img style="height: 128px;" src="img/08.jpg"/> | |
| </a> | |
| <a href="http://baike.so.com/doc/5469870-5707782.html"> | |
| <img style="height: 128px;" src="img/111.jpg"/> | |
| </a> | |
| <a href="http://baike.so.com/doc/5578914-5792282.html"></a> | |
| <img style="height: 128px;" src="img/13.jpg"/> | |
| </div><br /> | |
| <hr style="width: 90%;align: center;"/> | |
| <div class="r1" > | |
| <h2>影視作品</h2> | |
| <a href="http://www.360kan.com/tv/QLFqb07kTG4tNn.html"> | |
| <img style="height: 180px;" src="img/bbd341f53463c98affb143da6df95e29_dy_712d824020ec953be230b4c0649ff1ba.jpg"/> | |
| </a> | |
| <a href="http://baike.so.com/doc/24207762-24794679.html"> | |
| <img style="height: 180px;" src="img/c34cb4c4c779a66f8c2bdc09beb32568_t015b2e1762ac725af9.jpg"/> | |
| </a> | |
| <a href="http://www.so.com/s?ie=utf-8&src=hao_360so_suggest_b&shb=1&hsid=fe3da5bfcc593ef3&q=tfboys%E8%A7%82%E5%AF%9F%E6%97%A5%E8%AE%B0%E7%88%B1%E5%A5%87%E8%89%BA"> | |
| <img style="height: 180px;" src="img/c9b16150c882a1c53c930263942d10c4_dy_9954d9037089578449d8f4b85db8a3ea.jpg"/> | |
| </a> | |
| </div><br /> | |
| <hr style="width: 90%;align: center;"/> | |
| </body> | |
| </html> | |
第二頁代碼：
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> | |
| <title></title> | |
| <link rel="shortcut icon" href="favicon.ico"> | |
| <link href="css/font-awesome.min.css?v=4.4.0" rel="stylesheet"> | |
| <link rel="stylesheet" href="css/bootstrap.min.css" /> | |
| <script type="text/javascript" src="js/jquery.min.js"></script> | |
| <style> | |
| .top{ | |
| top: 0px; | |
| position: absolute; | |
| height: 35%; | |
| width: 100%; | |
| overflow: hidden; | |
| } | |
| .top-img-back img{ | |
| position: absolute; | |
| width: 100%; | |
| } | |
| .top-img-back{ | |
| position: absolute; | |
| height: 100%; | |
| width: 100%; | |
| background: linear-gradient(45deg, #0055B2 , #ffffff); | |
| z-index: -1000; | |
| opacity: 0.5; | |
| } | |
| .top-font{ | |
| position: absolute; | |
| bottom: 0; | |
| height: 100%; | |
| width: 100%; | |
| color:orange; | |
| z-index: 1000; | |
| font-family: "微軟雅黑"; | |
| font-size: 18px; | |
| text-indent: 20px; | |
| } | |
| .roy{ | |
| text-indent: 50px; | |
| color:green; | |
| font-size:30px ; | |
| } | |
| .rwxg img{ | |
| width: 40px; | |
| border-radius: 50%; | |
| border: 2px solid #FFFFFF; | |
| margin: auto 5px; | |
| } | |
| /*.foot{ | |
| position:fixed; | |
| border: 2px solid black; | |
| width: 100%; | |
| height: 50px; | |
| background-color: #FFFFFF; | |
| z-index: 500; | |
| }*/ | |
| .myCont-center{ | |
| margin-top: 62%; | |
| margin-bottom: 13%; | |
| } | |
| .xgrw img{ | |
| width: 40px; | |
| border-radius: 50%; | |
| border: 2px solid #FFFFFF; | |
| margin: auto 5px; | |
| } | |
| .row img{ | |
| margin: 5px auto; | |
| } | |
| .foot a{ | |
| color: #7F7F7F; | |
| text-align: center; | |
| line-height: 50px; | |
| } | |
| </style> | |
| <script type="text/javascript"> | |
| $(document).ready(function(){ | |
| $(".foot a").click(function(){ | |
| //改變當前被點擊的元素樣式 | |
| $(this).css({ | |
| "color":"#0062FA" | |
| }); | |
| //還原同胞元素 | |
| $(this).siblings().css({ | |
| "color":"#7F7F7F" | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <!--頂部圖片信息--> | |
| <div class="top"> | |
| <div class="top-font"> | |
| <p class="roy">王源</p> | |
| <p>TFBOYS成員</p> | |
| <p>主要身份：原創型歌手、</p> | |
| <p>演員、主持人</p> | |
| <p style="color: #0055B2;"> | |
| <a href="http://map.baidu.com/"> | |
| <i class="fa fa-map-marker"></i> 中國 · 重慶 | |
| </a> | |
| </p> | |
| <hr style="width: 90%;" /> | |
| <p style="color: #000000;">相關人物</p> | |
| <div class="rwxg" style="float: right;margin-top: -45px;"> | |
| <img src="img/5.png" /> | |
| <img src="img/3.png" /> | |
| <img src="img/4.png" /> | |
| <i class="fa fa-chevron-right"></i> | |
| </div> | |
| </div> | |
| <!--背景圖片--> | |
| <div class="top-img-back"> | |
| <img src="img/18.jpg" /> | |
| </div> | |
| </div> | |
| <!--內容部分--> | |
| <div class="myCont-center container"> | |
| <h3 style="text-align: center;">作品展示</h1> | |
| <div class="row"> | |
| <img class="col-xs-6 img-thumbnail" src="img/17.png"/> | |
| <img class="col-xs-6 img-thumbnail" src="img/17.jpg"/> | |
| <img class="col-xs-6 img-thumbnail" src="img/01.jpeg"/> | |
| <img class="col-xs-6 img-thumbnail" src="img/01.jpeg"/> | |
| <img class="col-xs-6 img-thumbnail" src="img/03.jpeg"/> | |
| <img class="col-xs-6 img-thumbnail" src="img/11.jpg"/> | |
| <img class="col-xs-6 img-thumbnail" src="img/05.jpeg"/> | |
| <img class="col-xs-6 img-thumbnail" src="img/05.jpeg"/> | |
| <img class="col-xs-6 img-thumbnail" src="img/16.jpg"/> | |
| <img class="col-xs-6 img-thumbnail" src="img/02.jpg"/> | |
| <img class="col-xs-6 img-thumbnail" src="img/19.jpg"/> | |
| <img class="col-xs-6 img-thumbnail" src="img/04.jpg"/> | |
| </div> | |
| </div> | |
| <!--底部導航--> | |
| <div class="foot"> | |
| <a class="col-xs-4" href="javascript：;"> | |
| <i class="fa fa-book"></i>最新作品 | |
| </a> | |
| <a class="col-xs-4" href="javascript：;"> | |
| <i class="fa fa-gg"></i>娛樂八卦 | |
| </a> | |
| <a class="col-xs-4" href="javascript：;"> | |
| <i class="fa fa-calendar-o"></i>相關人物 | |
| </a> | |
| </div> | |
| </body> | |
| </html> |
第三頁代碼：
第四頁代碼：
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title></title> | |
| <style> | |
| body{ | |
| height: 50px; | |
| width: 100%; | |
| background-color: #E0ECDC; | |
| } | |
| .q{ | |
| height: 100px; | |
| width: 220px; | |
| margin-top: -110px; | |
| line-height: 30px; | |
| } | |
| .r1{ | |
| height: 100px; | |
| width: 400px; | |
| margin-top: 20px; | |
| line-height: 30px; | |
| } | |
| .r img{ | |
| width: 150px; | |
| margin-left:230px ; | |
| margin-top: -110px; | |
| } | |
| .r1 img{ | |
| margin-top: 550px; | |
| width: 470px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="r" > | |
| <h1 style="margin-left: 30px;color: green;">王源</h1> | |
| <h2 style="margin-left: 30px;color: green;">演藝經歷</h2> | |
| <img src="img/9df5b9917d78f58c86e982bc8bf4d70b_t01c4a32af041d31fa7.jpg" /> | |
| <p class="q">2011年底，王源加入TF家族，成爲家族練習生[1]。2012年3月，王源開始《TF家族面對面》、《TF家族新聞播報》等</p> | |
| <p class="r1"style="width: 470px;">TF家族自制綜藝節目錄制。7月15日，與王俊凱翻唱《一個像夏天一個像秋天》，至9月網絡總視頻點擊超過500萬次，且9月24日時被范瑋琪轉發[38]。8月23日，與王俊凱合唱家族原創歌曲《我們曾在一起》發佈。9月17日，王源在地下通道翻唱的《旋木》被優酷網首頁推薦[5]。10月，與王俊凱錄製安徽衛視《黃金年代》。11月，與王俊凱發行EP《青蛙也會變王子》。 | |
| 2013年1月，王源開始主持《TF家族新聞發佈會》和代班主持《TF家族新聞播報》。2月，與王俊凱翻唱歌曲《到不了》。2月23日，王源主持的脫口秀節目《源來這樣講》在TF家族自制綜藝中播出。3月，與王俊凱做客《56紅人館》[2]。4月1日，與王俊凱翻唱《當愛已成往事》，視頻於4月4日在優酷、56等視頻網站點擊量突破40萬[39]。5月17日，與王俊凱合唱原創歌曲《街舞少年》發佈。5月31日，與王俊凱及TFBand合作翻唱《洋蔥》，視頻被五月天阿信、劉若英轉載，該視頻點擊率超過3000萬[40]。6月4日，王源、王俊凱版《洋蔥》被臺灣《中天新聞》報道[38]。人氣直升7月籌備出道，與王俊凱、易烊千璽組成組合。8月6日，由王源、王俊凱、易烊千璽三人組成的內地青春勵志組合TFBOYS正式出道[1]。10月4日，TFBOYS《Heart夢·出發》首唱會於重慶渝中區日月光中心舉行[19]。11月8日，與王俊凱翻唱《董小姐》發佈。11月，王源開始主持家族綜藝《TF少年GO》，節目包含《源文在哪》、《源來這樣講》、遊戲環節和LIVE秀模塊[18]。12月24日，與王俊凱參加重慶日月光中心舉辦的平安夜活動[19]。</p> | |
| </div> | |
| <div class="r1"> | |
| <img src="img/a91dc0a8d1e12f5d97064f9d8a965700_t01067491df628f4df2.jpg" /> | |
| <p class="w" style="width: 470px;"> | |
| 2014年2月14日，王源主演TF家族自制網絡劇《男生學院自習室》播出，飾演馬思遠，此劇是TFBOYS人氣激增的一個轉變點，收穫衆多固定死忠粉[41]。4月15日，第二屆音悅V榜年度盛典在北京舉行，TFBOYS通過粉絲投票獲得“內地最具人氣歌手”獎和“音悅直播人氣歌手”獎，這是TFBOYS首次亮相中國國內頒獎典禮[19]。5月2日，和易烊千璽參與EP《魔法城堡》首籤活動；同日，接受《中國娛樂報道》專訪，並應邀擔任《土豆最音樂》嘉賓主持[42]。5月20日，與組合成員錄製湖南衛視《快樂大本營》，王源小秀主持[3]。6月27日，王源兩年前翻唱的未發佈版《天使的翅膀》發佈，視頻被原唱安琥轉發。7月4日，與組合成員獻唱電影《我就是我》第二彈主題曲《想唱就唱》[43]；同日，獻唱動畫電影《洛克王國3：聖龍的守護》主題曲《魔法城堡》[44]。7月24日，《青春修煉手冊》正式發佈，2天內點擊量即破千萬[45]，MV發行後一週內便打破音悅臺5項V榜吉尼斯[46]，後成爲“神曲”之一 [20]。8月21日，與組合成員錄製中央電視臺公益節目《開學第一課》演唱主題曲《開學第一課》[47]。8月26日，代班主持《我愛大牌》[5]。9月8日，與組合成員不僅在中央電視臺中秋晚會直播現場登臺表演，而且提前錄播亮相湖南衛視中秋晚會上[48]。9月13日，中國首檔偶像全紀錄節目《TFBOYS偶像手記》首播，王源在節目中擔任主持[5]。12月31日，與組合成員錄製江蘇衛視新年演唱會。 | |
| </p> | |
| </div> | |
| </body> | |
| </html> | |
