碼雲鏈接：https://gitee.com/lulu-Noel/codes/xjkt5plrnfhs96e3ma08o49
網頁截圖：
部分代碼示例：
<script type="text/javascript"> function mouseon(id){ id.style.background = 'rgba(28,135,194,0.74)'; } function mouseoff(id){ id.style.background = 'rgba(0,0,0,0)'; } function mouseontit(id){ id.style.background = 'gray'; id.style.color = 'white'; } function mouseofftit(id){ id.style.background = 'white'; id.style.color = 'gray'; } </script>
說明：其功能是鼠標放上去和移開時相應 id 的效果不同，改代碼效果為改變顏色。其余js及css樣式詳見碼雲鏈接：https://gitee.com/lulu-Noel/codes/xjkt5plrnfhs96e3ma08o49。
HTML代碼：
<body> <!-- 頭部 --> <div id="Header"> <!-- 導航 --> <div id="Title"><a href="#"><b>Noel's Website</b></a></div> <ul> <li onmousemove="mouseon(this)" onmouseout="mouseoff(this)"><a href="#html-css">HTML/CSS</a></li> <li onmousemove="mouseon(this)" onmouseout="mouseoff(this)"><a href="#attack-defense">網絡攻防</a></li> <li onmousemove="mouseon(this)" onmouseout="mouseoff(this)"><a href="#Python">Python</a></li> <li onmousemove="mouseon(this)" onmouseout="mouseoff(this)"><a href="#Javascript">Javascript</a></li> <li onmousemove="mouseon(this)" onmouseout="mouseoff(this)"><a href="#spons">其他</a></li> </ul> </div> <!-- 中間 --> <div id="Center"> <!-- 中間左部分 --> <div id="center-left"> <!-- HTML/CSS --> <div id="html/css" class="content"> <!-- 標題 --> <div class="content-title panel panel-default" onmousemove="mouseontit(this)" onmouseout="mouseofftit(this)"> <span onclick="">HTML/CSS</span> </div> <!-- 圖片 --> <div class="content-img"> <img src="http://s15.sinaimg.cn/large/00486BHSgy6NfgRj3Maae"> </div> <!-- 內容 --> <div class="content-text"> <div class="text-title">HTML/CSS簡介</div> <div class="text-content"> <ul> <li>HTML 指的是超文本標記語言: HyperText Markup Language</li> <li>HTML 不是一種編程語言，而是一種標記語言</li> <li>標記語言是一套標記標簽 (markup tag)</li> <li>HTML 使用標記標簽來描述網頁</li> <li>HTML 文檔包含了HTML 標簽及文本內容</li> <li>HTML文檔也叫做 web 頁面</li> <li>CSS 指層疊樣式表 (Cascading Style Sheets)</li> <li>樣式定義如何顯示 HTML 元素</li> <li>樣式通常存儲在樣式表中</li> <li>把樣式添加到 HTML 4.0 中，是為了解決內容與表現分離的問題</li> <li>外部樣式表可以極大提高工作效率</li> <li>外部樣式表通常存儲在 CSS 文件中</li> <li>多個樣式定義可層疊為一個</li> </ul> </div> </div> </div> <!-- 網絡攻防 --> <div id="attack-defense" class="content"> <!-- 標題 --> <div class="content-title panel panel-default" onmousemove="mouseontit(this)" onmouseout= "mouseofftit(this)"> <span onclick="">網絡攻防</span> </div> <!-- 圖片 --> <div class="content-img"> <img src="http://www.rmzxb.com.cn/upload/resources/image/2018/03/15/2109347.jpg"> </div> <!-- 內容 --> <div class="content-text"> <div class="text-title">常見的網絡攻擊攻防方法</div> <div class="text-content"> <span><b>常見的網絡攻擊，按照osi七層協議，可以分為：</b></span> <ol> <li>物理層 線路偵聽 </li> <li>數據鏈路層 mac_flood </li> <li>網絡層 arp_poison，icmp_redirection</li> <li>傳輸層 tcp_flood(包含ack_flood和syn_flood)，udp_flood(ntp,dns) </li> <li>應用層 connection_flood，http_get等等</li> </ol> <p>------------------------------------------------------------</p> <p>作者：萬德1010</p> <p>來源：CSDN </p> <p>原文：https://blog.csdn.net/qq_32231743/article/details/78030096 版權聲明：本文為博主原創文章，轉載請附上博文鏈接！</p> </div> </div> </div> <!-- Python --> <div id="Python" class="content"> <!-- 標題 --> <div class="content-title panel panel-default" onmousemove="mouseontit(this)" onmouseout= "mouseofftit(this)"> <span onclick="">Python</span> </div> <!-- 圖片 --> <div class="content-img"> <img src="http://img.oschina.net/itags/6e9374c5806c0da7bf57608a3146812b1f000104.jpg"> </div> <!-- 內容 --> <div class="content-text"> <div class="text-title">Python發展歷程</div> <div class="text-content"> <p>        自從20世紀90年代初Python語言誕生至今，它已被逐漸廣泛應用於系統管理任務的處理和Web編程。</p> <p>        Python的創始人為荷蘭人吉多·范羅蘇姆（Guido van Rossum）。1989年聖誕節期間，在阿姆斯特丹，Guido為了打發聖誕節的無趣，決心開發一個新的腳本解釋程序，作為ABC 語言的一種繼承。之所以選中Python（大蟒蛇的意思）作為該編程語言的名字，是取自英國20世紀70年代首播的電視喜劇《蒙提.派森干的飛行馬戲團》（Monty Python's Flying Circus）。</p> <p>        ABC是由Guido參加設計的一種教學語言。就Guido本人看來，ABC 這種語言非常優美和強大，是專門為非專業程序員設計的。但是ABC語言並沒有成功，究其原因，Guido 認為是其非開放造成的。Guido 決心在Python 中避免這一錯誤。同時，他還想實現在ABC 中閃現過但未曾實現的東西。</p> <p>        就這樣，Python在Guido手中誕生了。可以說，Python是從ABC發展起來，主要受到了Modula-3（另一種相當優美且強大的語言，為小型團體所設計的）的影響。並且結合了Unix shell和C的習慣。</p> <p>        Python已經成為最受歡迎的程序設計語言之一。自從2004年以后，python的使用率呈線性增長。Python 2於2000年10月16日發布，穩定版本是Python 2.7。Python 3於2008年12月3日發布，不完全兼容Python 2。2011年1月，它被TIOBE編程語言排行榜評為2010年度語言。</p> </div> </div> </div> <!-- JavaScript --> <div id="Javascript" class="content"> <!-- 標題 --> <div class="content-title panel panel-default" onmousemove="mouseontit(this)" onmouseout= "mouseofftit(this)"> <span onclick="">Javascript</span> </div> <!-- 圖片 --> <div class="content-img"> <img src="http://bpic.588ku.com/element_origin_min_pic/17/03/16/27cf0027a3d5e7880252b2161be88725.jpg"> </div> <!-- 內容 --> <div class="content-text"> <div class="text-title">JavaScript簡介</div> <div class="text-content"> <p>        JavaScript 是互聯網上最流行的腳本語言，這門語言可用於 HTML 和 web，更可廣泛用於服務器、PC、筆記本電腦、平板電腦和智能手機等設備。</p> <p>        JavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基於原型的語言，內置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶端的腳本語言，最早是在HTML（標准通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增加動態功能。</p> <p>        在1995年時，由Netscape公司的Brendan Eich，在網景導航者瀏覽器上首次設計實現而成。因為Netscape與Sun合作，Netscape管理層希望它外觀看起來像Java，因此取名為JavaScript。但實際上它的語法風格與Self及Scheme較為接近。</p> <p>        為了取得技術優勢，微軟推出了JScript，CEnvi推出ScriptEase，與JavaScript同樣可在瀏覽器上運行。為了統一規格，因為JavaScript兼容於ECMA標准，因此也稱為ECMAScript。</p> <ul> <li>JavaScript 是一種輕量級的編程語言。</li> <li>JavaScript 是可插入 HTML 頁面的編程代碼。</li> <li>JavaScript 插入 HTML 頁面后，可由所有的現代瀏覽器執行。</li> <li>JavaScript 很容易學習。</li> </ul> </div> </div> </div> <!-- 贊助 --> <div id="spons" class="content"> <!-- 標題 --> <div class="content-title panel panel-default" onmousemove="mouseontit(this)" onmouseout= "mouseofftit(this)"> <span onclick="">其他</span> </div> <!-- 圖片 --> <div class="content-img"> <img src="http://www.jsdaima.com/kindeditor/attached/image/20170818/20170818151705_89350.jpg"> </div> <!-- 內容 --> <div class="content-text"> <div class="text-title">瓦爾登湖</div> <div class="text-content"> <p>        《瓦爾登湖》是美國作家亨利·戴維·梭羅創作的散文集。</p> <p>        《瓦爾登湖》是美國作家梭羅獨居瓦爾登湖畔的記錄，描繪了他兩年多時間里的所見、所聞和所思。該書崇尚簡朴生活，熱愛大自然的風光，內容豐厚，意義深遠，語言生動。</p> <p>        《瓦爾登湖》共由18篇散文組成，在四季循環更替的過程中，詳細記錄了梭羅內心的渴望、沖突、失望和自我調整，以及調整過后再次渴望的復雜的心路歷程，幾經循環，直到最終實現為止。表明了作者用它來挑戰他個人的、甚至是整個人類的界限。但這種挑戰不是對實現自我價值的無限希望，而是傷后復原的無限力量。</p> <p>        在《經濟篇》中，作者描述了自己開始自給自足的生活，並敘述了與農夫和鄰里的交往。正是在這種親身體驗與交往中，作者了解到農民生活的艱難，批判了那些富人奢侈的生活，認為“大多數的奢侈品，大部分的所渭生活的舒適，非但沒有必要，而且對人類進步大有妨礙”。</p> <p>        接着，在《我生活的地方；我為何生活》中，作者描述了他生活的地方霍爾威爾“真正迷人之處”。在文章的開頭，作者在想象中下田園，並親自耕耘。作者展現了美麗的田園風光。在這樣的地方，作者認識到，“生也好，死也好，我們僅僅追求現實”，現實才是生活所應該追求的全部。</p> <p>        在《閱瀆》中，作者討論了他對讀書生活的看法，他認為“讀得好書，就是說，在實實的精神中讀真實的書，是一種崇高的訓練”。生活使人加深對現實的看法，但一本優秀的書籍能使人得到進步。</p> </div> </div> </div> </div> <!-- 中間右部分 --> <div id="center-right"> <!-- <div id="advertisement"> --> <!-- <a href=""><b>Advertiserment</b></a> --> <section class="cd-slider-wrapper"> <ul class="cd-slider"> <li class="visible"> <div> <h2>First</h2> <p>煨芋熬粥飛雪來享</p> </div> </li> <li> <div> <h2>Second</h2> <p>煨芋熬粥飛雪來享</p> </div> </li> <li> <div> <h2>Third</h2> <p>煨芋熬粥飛雪來享</p> </div> </li> <li> <div> <h2>Fourth</h2> <p>煨芋熬粥飛雪來享</p> </div> </li> </ul> <!-- .cd-slider --> <ol class="cd-slider-navigation"> <li class="selected"><a href="#0"><em>Item 1</em></a></li> <li><a href="#0"><em>Item 2</em></a></li> <li><a href="#0"><em>Item 3</em></a></li> <li><a href="#0"><em>Item 4</em></a></li> </ol> <!-- .cd-slider-navigation --> <div class="cd-svg-cover" data-step1="M1402,800h-2V0.6c0-0.3,0-0.3,0-0.6h2v294V800z" data-step2="M1400,800H383L770.7,0.6c0.2-0.3,0.5-0.6,0.9-0.6H1400v294V800z" data-step3="M1400,800H0V0.6C0,0.4,0,0.3,0,0h1400v294V800z" data-step4="M615,800H0V0.6C0,0.4,0,0.3,0,0h615L393,312L615,800z" data-step5="M0,800h-2V0.6C-2,0.4-2,0.3-2,0h2v312V800z" data-step6="M-2,800h2L0,0.6C0,0.3,0,0.3,0,0l-2,0v294V800z" data-step7="M0,800h1017L629.3,0.6c-0.2-0.3-0.5-0.6-0.9-0.6L0,0l0,294L0,800z" data-step8="M0,800h1400V0.6c0-0.2,0-0.3,0-0.6L0,0l0,294L0,800z" data-step9="M785,800h615V0.6c0-0.2,0-0.3,0-0.6L785,0l222,312L785,800z" data-step10="M1400,800h2V0.6c0-0.2,0-0.3,0-0.6l-2,0v312V800z"> <svg height='100%' width="100%" preserveAspectRatio="none" viewBox="0 0 1400 800"> <title>SVG cover layer</title> <desc>an animated layer to switch from one slide to the next one</desc> <path id="cd-changing-path" d="M1402,800h-2V0.6c0-0.3,0-0.3,0-0.6h2v294V800z"/> </svg> </div> <!-- .cd-svg-cover --> </section> <!-- .cd-slider-wrapper --> <script src="js/jquery-2.1.4.js"></script> <script src="js/snap.svg-min.js"></script> <script src="js/main.js"></script> <!--Resource jQuery --> </div> </div> <!-- 尾部 --> <div id="Footer"> <div class="footer"><a href="http://www.baidu.com" target="_blank">關於我們</a> | <a href="http://www.baidu.com" target="_blank">服務條款</a> | <a href="http://www.baidu.com" target="_blank">隱私政策</a> | <a href="http://www.baidu.com">客服中心</a> | <a href="http://www.baidu.com" target="_blank">聯系我們</a> | <a href="http://www.baidu.com" target="_blank">幫助中心</a> | <span class="gray">©1998 - 2019 <!-- Tencent Inc. All Rights --> Reserved.</span></div> </div> </body>