码云链接：https://gitee.com/lulu-Noel/codes/xjkt5plrnfhs96e3ma08o49
网页链接：http://120.78.222.225/html/
网页截图：
部分代码示例：
<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>