首页部分：
需要联网进行显示
其他部分可以从我的资源管理里面下载
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" charset="UTF-8" content="width=device-width,initial-scale=1.0">
<title>首页</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<link rel="stylesheet" href="../../static/css/distancemini.css">
<link rel="stylesheet" href="../../static/css/semantic.min.css">
<style>
body {
background: url("../../static/images/stars.jfif");
overflow: scroll;
}
#font a:hover{
font-size: 66%;
background: black;
}
</style>
</head>
<body>
<nav class="ui inverted attached segment distance-mini" >
<div class="ui container" style="max-height:60px !important;max-width: 1222px !important;">
<div class="ui teal stackable rounded menu">
<h2 class="ui teal header item m-hide m-item">Monkey's Blog</h2>
<a href="index.html" class="m-hide m-item home item"> <i class="mini home icon"></i>首页</a>
<a href="博客详情页面.html" class="m-hide m-item item"><i class="bookmark icon"></i>博客详情</a>
<div class="ui inverted black dropdown item m-hide m-item item">
<div class="text">
<a href="classify.html" class="m-hide m-item item"><i class="mini idea icon"></i>分类</a>
</div>
<i class="dropdown icon"></i>
<div class="menu">
<a href="Classify.html" class="item">前端</a>
<a href="Classify.html" class="item">后端</a>
</div>
</div>
<a href="putout.html" class="m-hide m-item item"><i class="mini tags icon"></i>博客发布
<a href="PlaceOnFile.html" class="m-hide m-item item"><i class="mini clone icon"></i>归档</a>
<a href="Aboutme.html" class="m-hide m-item item"><i class="mini info icon"></i>关于我</a>
<a href="link.html" class="m-hide m-item item"><i class="linkify icon"></i>友链</a>
<div class=" item m-hide m-item">
<div class="ui icon input m-hide">
<input type="text" placeholder="Seach......">
<i class="ui inverted circular link search icon"></i>
</div>
</div>
</div>
</div>
<button class="ui black menu toggle icon button m-left-top">
<i class="ui bars icon"></i>
</button>
<div class="ui right menu m-right-top " style="z-index: 10">
<a href="https://github.com/github"> <i class="big github icon"></i>
</a>
</div>
</nav>
<div class="ui container">
<div class="ui grid">
<div class="eleven wide column m-text-spaced m-text-thin" >
<div class="eleven wide column" >
<div class="ui top segment">
<div class="ui top attacched segment" >
<div class="ui two column grid">
<div class="column"><h2 class="ui teal header">博客</h2></div>
<div class="right aligned column" style="color: black">
共
<div class="ui orange header" style="display:inline-block;">11</div>
篇
</div>
</div>
</div>
<div class="ui padded segment">
<div class="ui grid">
<div class="ui eleven wide column">
<h3 class="ui header"> 微信 url scheme常用协议大全？</h3>
<p style="color: black !important"> 微信urlscheme常用协议大全：weixin://打开微信weixin://dl/favorites收藏weixin://dl/scan扫一扫weixin://dl/feedback反馈...</p>
<div class="ui grid">
<div class="ui eleven wide column">
<div class="ui horizontal link list">
<div class="item">
<img src="../../static/images/tex3.jpg" alt="" class="ui avatar image">
<div class=" ui content"><a href="">侯治聪</a></div>
</div>
<div class="item">
<i class="calendar icon"></i> 2020-11-18
</div>
<div class="item">
<i class="eye icon">123</i>
</div>
</div>
</div>
<div class="ui five wide column">
<a href="#" target="_blank" class="ui teal basic label m-text-thin">认知升级</a>
</div>
</div>
</div>
<div class="ui five wide column ">
<a href="" target=""></a>
<img src="../../static/images/stars.jfif" alt="" class="ui rounded image">
</div>
</div>
</div>
</div>
</div>
<div class="eleven wide column" >
<div class="ui top segment">
<div class="ui top attacched segment" >
</div>
<div class="ui padded attached segment">
<div class="ui grid">
<div class="eleven wide column">
<h3 class="ui header"> JavaWeb Servlet</h3>
<p style="color: black !important"> 1.javax.servlet 其中包含定义servlet和servlet容器之间契约的类和接口。 2.javax.servlet.http 其中包含定义HTTP Servlet 和Servlet容器之间的关系。</p>
<div class="ui grid">
<div class="ui eleven wide column">
<div class="ui horizontal link list">
<div class="item">
<img src="../../static/images/tex3.jpg" alt="" class="ui avatar image">
<div class=" ui content"><a href="">侯治聪</a></div>
</div>
<div class="item">
<i class="calendar icon"></i> 2020-11-18
</div>
<div class="item">
<i class="eye icon">123</i>
</div>
</div>
</div>
<div class="ui five wide column">
<a href="#" target="_blank" class="ui teal basic label m-text-thin">认知升级</a>
</div>
</div>
</div>
<div class="five wide column">
<a href="" target=""></a>
<img src="../../static/images/watertest.jfif" alt="" class="ui rounded image">
</div>
</div>
</div>
</div>
</div>
<div class="eleven wide column" >
<div class="ui top segment">
<div class="ui top attacched segment" >
</div>
<div class="ui padded attached segment">
<div class="ui grid">
<div class="eleven wide column">
<h3 class="ui header"> java中继承的定义和使用</h3>
<p style="color: black !important">Java中不允许多重继承,但是允许多层继承!多层继承一般不会超过三层 1.2.3 在继承时,子类会继承父类的所有结构。 在进行继承的时候,子类会继承父类的所有...</p>
<div class="ui grid">
<div class="ui eleven wide column">
<div class="ui horizontal link list">
<div class="item">
<img src="../../static/images/tex3.jpg" alt="" class="ui avatar image">
<div class=" ui content"><a href="">侯治聪</a></div>
</div>
<div class="item">
<i class="calendar icon"></i> 2020-11-18
</div>
<div class="item">
<i class="eye icon">123</i>
</div>
</div>
</div>
<div class="ui five wide column">
<a href="#" target="_blank" class="ui teal basic label m-text-thin">认知升级</a>
</div>
</div>
</div>
<div class="five wide column">
<a href="" target=""></a>
<img src="../../static/images/grass1.jfif" alt="" class="ui rounded image">
</div>
</div>
</div>
</div>
</div>
<div class="eleven wide column" >
<div class="ui top segment">
<div class="ui top attacched segment" >
</div>
<div class="ui padded attached segment">
<div class="ui grid">
<div class="eleven wide column">
<h3 class="ui header"> Tomcat的使用以及安装下载</h3>
<p style="color: black !important">
tomcat默认的端口是8080(访问端口) http的默认端口是80,如果访问的时候输入http://www.baidu.com相当于http://www.baidu.com:80。当真正在项目上线之后,通常采用...</p>
<div class="ui grid">
<div class="ui eleven wide column">
<div class="ui horizontal link list">
<div class="item">
<img src="../../static/images/tex3.jpg" alt="" class="ui avatar image">
<div class=" ui content"><a href="">侯治聪</a></div>
</div>
<div class="item">
<i class="calendar icon"></i> 2020-11-18
</div>
<div class="item">
<i class="eye icon">123</i>
</div>
</div>
</div>
<div class="ui five wide column">
<a href="#" target="_blank" class="ui teal basic label m-text-thin">认知升级</a>
</div>
</div>
</div>
<div class="five wide column">
<a href="" target=""></a>
<img src="../../static/images/text1.jpg" alt="" class="ui rounded image">
</div>
</div>
</div>
</div>
</div>
<div class="eleven wide column" >
<div class="ui top segment">
<div class="ui top attacched segment" >
</div>
<div class="ui padded attached segment">
<div class="ui grid">
<div class="eleven wide column">
<h3 class="ui header"> 微信 url scheme常用协议大全？</h3>
<p style="color: black !important"> 微信urlscheme常用协议大全：weixin://打开微信weixin://dl/favorites收藏weixin://dl/scan扫一扫weixin://dl/feedback反馈...</p>
<div class="ui grid">
<div class="ui eleven wide column">
<div class="ui horizontal link list">
<div class="item">
<img src="../../static/images/tex3.jpg" alt="" class="ui avatar image">
<div class=" ui content"><a href="">侯治聪</a></div>
</div>
<div class="item">
<i class="calendar icon"></i> 2020-11-18
</div>
<div class="item">
<i class="eye icon">123</i>
</div>
</div>
</div>
<div class="ui five wide column">
<a href="#" target="_blank" class="ui teal basic label m-text-thin">认知升级</a>
</div>
</div>
</div>
<div class="five wide column">
<a href="" target=""></a>
<img src="../../static/images/cat.jfif" alt="" class="ui rounded image">
</div>
</div>
</div>
</div>
</div>
<div class="eleven wide column" >
<div class="ui top segment">
<div class="ui top attacched segment" >
</div>
<div class="ui padded attached segment">
<div class="ui grid">
<div class="eleven wide column">
<h3 class="ui header"> 微信 url scheme常用协议大全？</h3>
<p style="color: black !important"> 微信urlscheme常用协议大全：weixin://打开微信weixin://dl/favorites收藏weixin://dl/scan扫一扫weixin://dl/feedback反馈...</p>
<div class="ui grid">
<div class="ui eleven wide column">
<div class="ui horizontal link list">
<div class="item">
<img src="../../static/images/tex3.jpg" alt="" class="ui avatar image">
<div class=" ui content"><a href="">侯治聪</a></div>
</div>
<div class="item">
<i class="calendar icon"></i> 2020-11-18
</div>
<div class="item">
<i class="eye icon">123</i>
</div>
</div>
</div>
<div class="ui five wide column">
<a href="#" target="_blank" class="ui teal basic label m-text-thin">认知升级</a>
</div>
</div>
</div>
<div class="five wide column">
<a href="" target=""></a>
<img src="../../static/images/text1.jpg" alt="" class="ui rounded image">
</div>
</div>
</div>
</div>
</div>
<div class="eleven wide column" >
<div class="ui top segment">
<div class="ui top attacched segment" >
</div>
<div class="ui padded attached segment">
<div class="ui grid">
<div class="eleven wide column">
<h3 class="ui header"> 微信 url scheme常用协议大全？</h3>
<p style="color: black !important"> 微信urlscheme常用协议大全：weixin://打开微信weixin://dl/favorites收藏weixin://dl/scan扫一扫weixin://dl/feedback反馈...</p>
<div class="ui grid">
<div class="ui eleven wide column">
<div class="ui horizontal link list">
<div class="item">
<img src="../../static/images/tex3.jpg" alt="" class="ui avatar image">
<div class=" ui content"><a href="">侯治聪</a></div>
</div>
<div class="item">
<i class="calendar icon"></i> 2020-11-18
</div>
<div class="item">
<i class="eye icon">123</i>
</div>
</div>
</div>
<div class="ui five wide column">
<a href="#" target="_blank" class="ui teal basic label m-text-thin">认知升级</a>
</div>
</div>
</div>
<div class="five wide column">
<a href="" target=""></a>
<img src="../../static/images/dog.jfif" alt="" class="ui rounded image">
</div>
</div>
</div>
</div>
</div>
<div class="eleven wide column" >
<div class="ui top segment">
<div class="ui top attacched segment" >
</div>
<div class="ui padded attached segment">
<div class="ui grid">
<div class="eleven wide column">
<h3 class="ui header"> 微信 url scheme常用协议大全？</h3>
<p style="color: black !important"> 微信urlscheme常用协议大全：weixin://打开微信weixin://dl/favorites收藏weixin://dl/scan扫一扫weixin://dl/feedback反馈...</p>
<div class="ui grid">
<div class="ui eleven wide column">
<div class="ui horizontal link list">
<div class="item">
<img src="../../static/images/stars.jpg" alt="" class="ui avatar image">
<div class=" ui content"><a href="">侯治聪</a></div>
</div>
<div class="item">
<i class="calendar icon"></i> 2020-11-18
</div>
<div class="item">
<i class="eye icon">123</i>
</div>
</div>
</div>
<div class="ui five wide column">
<a href="#" target="_blank" class="ui teal basic label m-text-thin">认知升级</a>
</div>
</div>
</div>
<div class="five wide column">
<a href="" target=""></a>
<img src="../../static/images/stars.jpg" alt="" class="ui rounded image">
</div>
</div>
</div>
</div>
</div>
<div class="eleven wide column" >
<div class="ui top segment">
<div class="ui top attacched segment" >
</div>
<div class="ui padded attached segment">
<div class="ui grid">
<div class="eleven wide column">
<h3 class="ui header"> 微信 url scheme常用协议大全？</h3>
<p style="color: black !important"> 微信urlscheme常用协议大全：weixin://打开微信weixin://dl/favorites收藏weixin://dl/scan扫一扫weixin://dl/feedback反馈...</p>
<div class="ui grid">
<div class="ui eleven wide column">
<div class="ui horizontal link list">
<div class="item">
<img src="../../static/images/tex3.jpg" alt="" class="ui avatar image">
<div class=" ui content"><a href="">侯治聪</a></div>
</div>
<div class="item">
<i class="calendar icon"></i> 2020-11-18
</div>
<div class="item">
<i class="eye icon">123</i>
</div>
</div>
</div>
<div class="ui five wide column">
<a href="#" target="_blank" class="ui teal basic label m-text-thin">认知升级</a>
</div>
</div>
</div>
<div class="five wide column">
<a href="" target=""></a>
<img src="../../static/images/text1.jpg" alt="" class="ui rounded image">
</div>
</div>
</div>
</div>
</div>
<div class="eleven wide column" >
<div class="ui top segment">
<div class="ui top attacched segment" >
</div>
<div class="ui padded attached segment">
<div class="ui grid">
<div class="eleven wide column">
<h3 class="ui header"> 微信 url scheme常用协议大全？</h3>
<p style="color: black !important"> 微信urlscheme常用协议大全：weixin://打开微信weixin://dl/favorites收藏weixin://dl/scan扫一扫weixin://dl/feedback反馈...</p>
<div class="ui grid">
<div class="ui eleven wide column">
<div class="ui horizontal link list">
<div class="item">
<img src="../../static/images/tex3.jpg" alt="" class="ui avatar image">
<div class=" ui content"><a href="">侯治聪</a></div>
</div>
<div class="item">
<i class="calendar icon"></i> 2020-11-18
</div>
<div class="item">
<i class="eye icon">123</i>
</div>
</div>
</div>
<div class="ui five wide column">
<a href="#" target="_blank" class="ui teal basic label m-text-thin">认知升级</a>
</div>
</div>
</div>
<div class="five wide column">
<a href="" target=""></a>
<img src="../../static/images/text1.jpg" alt="" class="ui rounded image">
</div>
</div>
</div>
</div>
</div>
<div class="eleven wide column" >
<div class="ui top segment">
<div class="ui top attacched segment" >
</div>
<div class="ui padded attached segment">
<div class="ui grid">
<div class="eleven wide column">
<h3 class="ui header"> 微信 url scheme常用协议大全？</h3>
<p style="color: black !important"> 微信urlscheme常用协议大全：weixin://打开微信weixin://dl/favorites收藏weixin://dl/scan扫一扫weixin://dl/feedback反馈...</p>
<div class="ui grid">
<div class="ui eleven wide column">
<div class="ui horizontal link list">
<div class="item">
<img src="../../static/images/tex3.jpg" alt="" class="ui avatar image">
<div class=" ui content"><a href="">侯治聪</a></div>
</div>
<div class="item">
<i class="calendar icon"></i> 2020-11-18
</div>
<div class="item">
<i class="eye icon">123</i>
</div>
</div>
</div>
<div class="ui five wide column">
<a href="#" target="_blank" class="ui teal basic label m-text-thin">认知升级</a>
</div>
</div>
</div>
<div class="five wide column">
<a href="" target=""></a>
<img src="../../static/images/text1.jpg" alt="" class="ui rounded image">
</div>
</div>
</div>
<div class="ui attached segment">
<div class="ui two column grid">
<div class="column">
<a class="ui teal basic small button">上一页</a>
</div>
<div class="right aligned column">
<a class="ui teal basic small button">下一页 </a></div>
</div>
</div>
</div>
</div>
</div>
<div class="five wide column" >
<div class="ui attached segments">
<div class="ui secondary segment">
<div class="ui two column grid">
<div class="column">
<i class="idea icon">
</i>分类</div>
<div class="right aligned column"><a href="#">more<i class="ui angle double right icon"></i></a></div>
</div>
<div class="ui teal segment">
<div class="ui fluid vertical menu">
<div class="item">学习日记
<div class="ui teal basic left pointing label">18</div></div>
<div class="item">思想与感悟
<div class="ui teal basic left pointing label">13</div></div>
<div class="item">清单
<div class="ui teal basic left pointing label">13</div></div>
<div class="item">人生经验
<div class="ui teal basic left pointing label">13</div></div>
<div class="item">学习日记
<div class="ui teal basic left pointing label">14</div></div>
<div class="item">哲学
<div class="ui teal basic left pointing label">19</div></div>
<div class="item">目前的打算
<div class="ui teal basic left pointing label">9</div></div>
</div>
<div class="ui teal segments">
<div class="ui segment"></div>
</div>
</div>
</div>
<div class="ui attached teal top segment">
<div class="ui two column grid">
<div class="column">
<i class="idea icon">
</i>我的标签</div>
<div class="right aligned column"><a href="#">more<i class="ui angle double right icon"></i></a></div>
</div>
<div class="ui attached teal segment">
<div id="div1">
<a href="http://www.cnblogs.com/xing901022/p/3694709.html"class="blue">Java的具体要求语法</a>
<a href="http://www.cnblogs.com/xing901022/p/3248913.html"class="red">JavaScript基础</a>
<a href="http://www.cnblogs.com/xing901022/archive/2013/01/18/2857982.html" class="red">Servlet</a>
<a href="http://www.cnblogs.com/xing901022/archive/2012/10/19/2699162.html" class="red">Tomcat服务器</a>
<a href="http://zh.linuxvirtualserver.org/" class="green">GBK</a>
<a href="http://code.taobao.org/" class="green">Github使用手册</a>
<a href="http://www.cnblogs.com/xing901022/archive/2013/04/09/3248870.html" class="blue">git</a>
<a href="http://www.cnblogs.com/xing901022/p/3248469.html" class="blue">Python语法</a>
<a href="http://www.cnblogs.com/xing901022/p/3694709.html"class="blue">2020学习总结</a>
<a href="http://www.cnblogs.com/xing901022/p/3248913.html"class="red">C语言</a>
<a href="http://www.cnblogs.com/xing901022/archive/2013/01/18/2857982.html" class="red">错误总结</a>
<a href="http://www.cnblogs.com/xing901022/archive/2012/10/19/2699162.html" class="red">刻意练习</a>
<a href="http://zh.linuxvirtualserver.org/" class="green">LVS中文</a>
</div>
</div>
</div>
<div class="ui attached top segment">
<div class="ui teal segment">
<div class="ui two column grid">
<div class="column"><i class="bookmark icon"></i>最新推荐</div>
<div class="right aligned column"><a href="#">more<i class="ui angle double right icon"></i></a></div>
</div>
</div>
<div class="ui centered fluid vertical attached menu">
<a href="博客详情页面.html" class="blue item" >Servlet以及Tomcat服务器</a>
<a href=" " class="blue item">你知道什么最宝贵贼</a>
<a href="" class="blue item">刻意练习的积极性</a>
<a href="" class="blue item">java </a>
<a href="" class="blue item">pthyon</a>
<a href="" class="blue item">javaScript</a>
</a>
</div>
<div class="ui attached teal teal segment">
<div class="ui horizontal divider header">扫码关注</div>
</div>
<div class="ui centered card" style="width: 12em">
<img src="../../static/images/bonuscode.jpg" alt="" class="ui rounded image"
> </div>
</div>
</div>
</div>
</div>
</div>
<div class="m-fixed m-right-bottom m-padded m-position">
<div class="ui vertical icon buttons">
<a href="" class="ui icon black button"><i class="share square icon"></i></a>
<button class="ui teal basic toc button">电话</button>
<button class="ui chatwithqq teal button"> <i class="qq icon"></i></button>
<button class="ui technicalgroup teal button">技术交流群</button>
<a href="" class="ui icon black button"><i class="chevron circle up icon"></i></a>
<div class="ui call flowing popup transition hidden" >
<div class="ui label" style="color: red;font-size: 15px">17886977662</div>
</div>
<div class="ui group flowing popup transition hidden">
<div ><img src="../../static/images/qq.png" alt="" class="rounded image" width="200px !important;" height="200px"></div>
</div>
<div class="ui poupcode flowing popup transition hidden">
<div ><img src="../../static/images/qq.png" alt="" class="rounded image" width="200px !important;" height="200px"></div>
</div>
</div>
</div>
<br><br><br><br>
<footer class="ui inverted vertical segment m-panded-tb-massive m-text-thin">
<div class="ui container">
<div class="ui center aligned container">
<div class="ui inverted divided grid">
<div class="three wide column">
<div class="item">
<img src="../../static/images/bonuscode.jpg" class="ui rounded image" alt="" style="width: 100px !important"> </div>
</div>
<div class="three wide column">
<h4 class="ui inverted header"> 最新博客</h4>
<div class="ui inverted link list">
<a href="#" class="item">用户故事(userstory)</a>
<a href="#" class="item">爱的艺术(love art)</a>
<a href="#" class="item">冥想的练习（meditation）</a>
</div>
</div>
<div class="three wide column">
<h4 class="ui inverted header "> 联系我</h4>
<div class="ui inverted link list">
<a href="#" class="item">E-mail 2282240015@qq.com</a>
<a href="#" class="item">电话17886977662</a>
<a href="#" class="item">微信(kind and still boy)</a>
</div>
</div>
<div class="seven wide column">
<h4 class="ui inverted header m-opacity-mini">TobeTangMonk</h4>
<p class="m-text-thin m-text-spaced m-opacity-mini">这个是我的个人博客，分享有关编程，思考，分享源代码，和个人生活中的点点滴滴的事情，我希望可以坚持一辈子写好博客,养成好的习惯，to be a kind and inteligent boy</p>
</div>
</div>
<div class="ui section teal divider"> <p class="m-text-spaced m-text-lined" style="color: white"> Copyright @2016-2017</p>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<script src="../../static/js/Fallingletters.js"></script>
<script>
$('.toc.button').popup({
popup:$('.call'),
on:'hover',
position:'left center',
});
$('.chatwithqq').popup({
popup:$('.poupcode'),
on:'hover',
position:'right center',
});
$('.technicalgroup').popup({
popup:$('.group'),
on:'hover',
position:'right center',
});
</script>
<script>
var f_idx = 0;
var c_idx = 0;
jQuery(document).ready(function($) {
$("body").click(function(e) {
var font = new Array("富强","rich", "loveryouself", "文明", "和谐", "freedom", "equal", "justify" ,"Legally", "Loveyour", "敬业", "诚信", "友善");
var color = new Array('#ff0000','#eb4310','#f6941d','#fbb417','#ffff00','#cdd541','#99cc33','#3f9337','#219167','#239676','#24998d','#1f9baa','#0080ff','#3366cc','#333399','#003366','#800080','#a1488e','#c71585','#bd2158');
var $i = $("<span />").text(font[f_idx]);
f_idx = (f_idx + 1) % font.length;
c_idx = (c_idx + 1) % color.length;
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 99999999999999999999999999999999999999999999999999999999999999999999999999 ,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": color[c_idx]
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
},
1500,
function() {
$i.remove();
});
});
});
</script>
<script type="text/javascript">
var radius = 60;
var dtr = Math.PI/180;
var d=900;
var mcList = [];
var active = false;
var lasta = 1;
var lastb = 1;
var distr = true;
var tspeed=10;
var size=200;
var mouseX=0;
var mouseY=0;
var howElliptical=1;
var aA=null;
var oDiv=null;
window.onload=function ()
{
var i=0;
var oTag=null;
oDiv=document.getElementById('div1');
aA=oDiv.getElementsByTagName('a');
for(i=0;i<aA.length;i++)
{
oTag={};
oTag.offsetWidth=aA[i].offsetWidth;
oTag.offsetHeight=aA[i].offsetHeight;
mcList.push(oTag);
}
sineCosine( 0,0,0 );
positionAll();
oDiv.onmouseover=function ()
{
active=true;
};
oDiv.onmouseout=function ()
{
active=false;
};
oDiv.onmousemove=function (ev)
{
var oEvent=window.event || ev;
mouseX=oEvent.clientX-(oDiv.offsetLeft+oDiv.offsetWidth/2);
mouseY=oEvent.clientY-(oDiv.offsetTop+oDiv.offsetHeight/2);
mouseX/=5;
mouseY/=5;
};
setInterval(update, 90);
};
function update()
{
var a;
var b;
if(active)
{
a = (-Math.min( Math.max( -mouseY, -size ), size ) / radius ) * tspeed;
b = (Math.min( Math.max( -mouseX, -size ), size ) / radius ) * tspeed;
}
else
{
a = lasta * 0.98;
b = lastb * 0.98;
}
lasta=a;
lastb=b;
if(Math.abs(a)<=0.01 && Math.abs(b)<=0.01)
{
return;
}
var c=0;
sineCosine(a,b,c);
for(var j=0;j<mcList.length;j++)
{
var rx1=mcList[j].cx;
var ry1=mcList[j].cy*ca+mcList[j].cz*(-sa);
var rz1=mcList[j].cy*sa+mcList[j].cz*ca;
var rx2=rx1*cb+rz1*sb;
var ry2=ry1;
var rz2=rx1*(-sb)+rz1*cb;
var rx3=rx2*cc+ry2*(-sc);
var ry3=rx2*sc+ry2*cc;
var rz3=rz2;
mcList[j].cx=rx3;
mcList[j].cy=ry3;
mcList[j].cz=rz3;
per=d/(d+rz3);
mcList[j].x=(howElliptical*rx3*per)-(howElliptical*2);
mcList[j].y=ry3*per;
mcList[j].scale=per;
mcList[j].alpha=per;
mcList[j].alpha=(mcList[j].alpha-0.6)*(10/6);
}
doPosition();
depthSort();
}
function depthSort()
{
var i=0;
var aTmp=[];
for(i=0;i<aA.length;i++)
{
aTmp.push(aA[i]);
}
aTmp.sort
(
function (vItem1, vItem2)
{
if(vItem1.cz>vItem2.cz)
{
return -1;
}
else if(vItem1.cz<vItem2.cz)
{
return 1;
}
else
{
return 0;
}
}
);
for(i=0;i<aTmp.length;i++)
{
aTmp[i].style.zIndex=i;
}
}
function positionAll()
{
var phi=0;
var theta=0;
var max=mcList.length;
var i=0;
var aTmp=[];
var oFragment=document.createDocumentFragment();
for(i=0;i<aA.length;i++)
{
aTmp.push(aA[i]);
}
aTmp.sort
(
function ()
{
return Math.random()<0.5?1:-1;
}
);
for(i=0;i<aTmp.length;i++)
{
oFragment.appendChild(aTmp[i]);
}
oDiv.appendChild(oFragment);
for( var i=1; i<max+1; i++){
if( distr )
{
phi = Math.acos(-1+(2*i-1)/max);
theta = Math.sqrt(max*Math.PI)*phi;
}
else
{
phi = Math.random()*(Math.PI);
theta = Math.random()*(2*Math.PI);
}
mcList[i-1].cx = radius * Math.cos(theta)*Math.sin(phi);
mcList[i-1].cy = radius * Math.sin(theta)*Math.sin(phi);
mcList[i-1].cz = radius * Math.cos(phi);
aA[i-1].style.left=mcList[i-1].cx+oDiv.offsetWidth/2-mcList[i-1].offsetWidth/2+'100px';
aA[i-1].style.top=mcList[i-1].cy+oDiv.offsetHeight/2-mcList[i-1].offsetHeight/2+'100px';
}
}
function doPosition()
{
var l=oDiv.offsetWidth/2;
var t=oDiv.offsetHeight/2;
for(var i=0;i<mcList.length;i++)
{
aA[i].style.left=mcList[i].cx+l-mcList[i].offsetWidth/2+'px';
aA[i].style.top=mcList[i].cy+t-mcList[i].offsetHeight/2+'px';
aA[i].style.fontSize=Math.ceil(12*mcList[i].scale/2)+8+'px';
aA[i].style.filter="alpha(opacity="+100*mcList[i].alpha+")";
aA[i].style.opacity=mcList[i].alpha;
}
}
function sineCosine( a, b, c)
{
sa = Math.sin(a * dtr);
ca = Math.cos(a * dtr);
sb = Math.sin(b * dtr);
cb = Math.cos(b * dtr);
sc = Math.sin(c * dtr);
cc = Math.cos(c * dtr);
}
</script>
<script>
$('.ui.dropdown').dropdown({
on:'hover'
});
</script>
<script>
$('.menu.toggle ').click(function (){
$('.m-item').toggleClass('m-mobile-show');
});
</script>
<script>
$('.menu.toggle ').click(function (){
$('.m-item').toggleClass('m-hide');
},1000);
</script>
</body>
</html>
博客详情页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" charset="UTF-8" content="width=device-width,initial-scale=1.0">
<title>博客详情页</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<link rel="stylesheet" href="../../static/css/">
<link rel="stylesheet" href="../../static/css/typo.css">
<link rel="stylesheet" href="../../static/css/animate.min.css">
<link rel="stylesheet" href="../../static/prism/prism.css">
<link rel="stylesheet" href="../../static/css/distancemini.css">
<style>
</style>
</head>
<body>
<nav class="ui inverted attached segment distance-mini">
<div class="ui container">
<div class="ui teal stackable rounded menu">
<h2 class="ui teal header item m-hide m-item">Monkey's Blog</h2>
<a href="index.html" class="m-hide m-item home item"> <i class="mini home icon"></i>首页</a>
<a href="博客详情页面.html" class="m-hide m-item item"><i class="bookmark icon"></i>博客详情</a>
<div class="ui inverted black dropdown item m-hide m-item item">
<div class="text">
<a href="classify.html" class="m-hide m-item item"><i class="mini idea icon"></i>分类</a>
</div>
<i class="dropdown icon"></i>
<div class="menu">
<a href="Classify.html" class="item">前端</a>
<a href="Classify.html" class="item">后端</a>
</div>
</div>
<div class="ui teal basic menu">
</div>
<a href="putout.html" class="m-hide m-item item"><i class="mini tags icon"></i>博客发布
<a href="PlaceOnFile.html" class="m-hide m-item item"><i class="mini clone icon"></i>归档</a>
<a href="Aboutme.html" class="m-hide m-item item"><i class="mini info icon"></i>关于我</a>
<a href="link.html" class="m-hide m-item item"><i class="linkify icon"></i>友链</a>
<div class="right item m-hide m-item">
<div class="ui icon input m-hide">
<input type="text" placeholder="Seach......">
<i class="ui link inverted circular search icon"></i>
</div>
</div>
</div>
</div>
<button class="ui black menu toggle icon button m-left-top">
<i class="ui bars icon"></i>
</button>
<div class="ui right menu m-right-top ">
<a href="https://github.com/github"> <i class="big github icon"></i>
</a>
</div>
</nav>
<div class="ui grid">
<div class="ui segment">
<div class="two column grid">
<h1 class="ui teal header">博客详情页</h1>
</div>
</div>
</div>
<div class="m-container-small m-padded-tb-big m-text-thin m-text-spaced">
<div class="ui container">
<div class="ui top attached segment">
<div class="ui horizontal link list">
<div class="item">
<div class="content" style="display: inline-block !important;">
<img src="../../static/images/cat.jfif" alt="" style="display: inline-block" class="ui avatar image"> 侯治聪</div>
</div>
<div class="item"><i class="calendar icon"></i>
2017-10-01</div>
<div class="item"><i class="eye icon"></i>
2017-10-01 头部</div>
</div>
</div>
<div class="ui attached segment">
<div class="ui basic orange label">原创</div>
</div>
<div class="ui attached segment" style="text-align: center">
<div class="ui grid animated rubberBand imgBox" id="dowebok">
<img src="../../static/images/kobe%20.jpg" alt="hello" class="ui fluid rounded image img-slide">
<img src="../../static/images/kobe1.jpg" alt="1" class="ui fluid rounded image img-slide">
<img src="../../static/images/kobe2.jfif" alt="2" class="ui fluid rounded image img-slide">
<img src="../../static/images/kobe3.jpg" alt="3" class="ui fluid rounded image img-slide">
<img src="../../static/images/monkey2.jfif" alt="" class="ui fluid rounded image img-slide">
</div>
</div>
<div class="ui attached segment">
<h2 class="ui center aligned header">Servlet以及Tomcat服务器</h2>
<div class="ui attached segment" style="color: black !important;">
<ol id="table">
<li><a href="#section1">1.关于 <i class="serif">Tomcat服务器</i></a></li>
<li><a href="#section2">2.代码示范</a>
<ul>
<li><a href="#section2-1">3.servlet初始化</a></li>
<li><a href="#section2-2">4.servlet的基本的使用</a></li>
</ul>
</li>
<h2 id="section1">一、关于 <i class="serif">Tomcat服务器</i></h2>
<p><i class="serif">什么是Tomcat
Tomcat就是一个web的服务器，用来开发web项目
测试Tomcat
打开浏览器输入一下网址:
http://localhost:8080/
Tomcat端口号冲突的问题
如果电脑上安装了一个应用之后，有可能会占用Tomcat的端口，如果将tomcat端口占用了，同样这个Tomcat启动不了的
Tomcat默认的端口号是8080.一般80端口容易被其他程序所占用。因为80端口是HTTP协议的默认端口
<h2 id="section2">二、代码示范</h2>
<pre><code class="language-css">
public abstract class GenericServlet implements Servlet, ServletConfig, Serializable {
private static final String LSTRING_FILE = "javax.servlet.LocalStrings";
private static ResourceBundle lStrings = ResourceBundle.getBundle("javax.servlet.LocalStrings");
private transient ServletConfig config;
public GenericServlet() {
}
public void destroy() {
}
public String getInitParameter(String name) {
ServletConfig sc = this.getServletConfig();
if (sc == null) {
throw new IllegalStateException(lStrings.getString("err.servlet_config_not_initialized"));
} else {
return sc.getInitParameter(name);
}
}
public Enumeration<String> getInitParameterNames() {
ServletConfig sc = this.getServletConfig();
if (sc == null) {
throw new IllegalStateException(lStrings.getString("err.servlet_config_not_initialized"));
} else {
return sc.getInitParameterNames();
}
}
public ServletConfig getServletConfig() {
return this.config;
}
public ServletContext getServletContext() {
ServletConfig sc = this.getServletConfig();
if (sc == null) {
throw new IllegalStateException(lStrings.getString("err.servlet_config_not_initialized"));
} else {
return sc.getServletContext();
}
}
public String getServletInfo() {
return "";
}
public void init(ServletConfig config) throws ServletException {
this.config = config;
this.init();
}
public void init() throws ServletException {
}
public void log(String msg) {
this.getServletContext().log(this.getServletName() + ": " + msg);
}
public void log(String message, Throwable t) {
this.getServletContext().log(this.getServletName() + ": " + message, t);
}
public abstract void service(ServletRequest var1, ServletResponse var2) throws ServletException, IOException;
public String getServletName() {
ServletConfig sc = this.getServletConfig();
if (sc == null) {
throw new IllegalStateException(lStrings.getString("err.servlet_config_not_initialized"));
} else {
return sc.getServletName();
}
}
}
}</code>
</pre>
<h2 id="section2-1">三、Servlet初始化</h2>
<p>
<h3>一、init方式初始化有两个方式 </h3>
1、启动tomcat后，当第一次访问servlet类的时候，会调用init方法<br>
2、启动tomcat直接调用init方法，这种方式需要配置web.xml文件。<br>
在servlet的配置当中，<load-on-startup>5</load-on-startup>的含义是：<br>
A、标记容器是否在启动的时候就加载这个servlet。<br>
B、当值为0或者大于0时，表示容器在应用启动时就加载这个servlet；<br>
C、当是一个负数时或者没有指定时，则指示容器在该servlet被选择时才加载。<br>
D、正数的值越小，启动该servlet的优先级越高。<br>
E、配置方式如下：
</p>
<h2 id="section2-2">四、servlet的基本的使用</h2>
<p>
1 helloWorld <br>
2 servlet生命周期 <br>
3 转发和重定向 <br>
4 Servlet简单登录 <br>
5 Servlet 过滤器 <br>
6 Servlet 监听器 <br>
7 request获取各种路径 <br>
</p>
</div>
<div class="m-padded-lr">
<div class="ui basic teal left pointing label">方法论</div>
</div>
</div>
<div class="ui center aligned segment">
<button id="payButton" class="ui orange basic rounded icon circular button">赞赏</button>
<div class="ui payQR flowing popup transition hidden">
<div class="ui orange basic label">
<div class="image" style="font-size: inherit ! important;">
<div class="image"><img src="../../static/images/bonuscode.jpg" alt="" style="width: 120px">
支付宝</div>
<div class="image"><img src="../../static/images/bonuscode.jpg" alt="" style="width: 120px">
微信</div>
</div>
</div>
</div>
</div>
<div class="ui attached positive message">
<div class="ui eleven wide column" style="list-style: none">
<ui class="list">
<li> 作者： 侯治聪</li>
<li>发表时间： 2020-9-3 6:40</li>
<li>版权声明： 自由转载-</li>
<li>公众号转载： 加上作者的二维码</li>
</ui>
</div>
</div>
<div class="ui five wide column">
<img src="../../static/images/bonuscode.jpg" alt="" class="ui right floated rounded bordered image " style="height: 120px">
</div>
<div class="ui bottom attached segment">
<div class="ui teal segment">
<div class="ui threaded comments">
<h3 class="ui dividing header">Comments</h3>
<div class="comment">
<a class="avatar">
</a>
<div class="content">
<a class="author">Matt</a>
<div class="metadata">
<span class="date">Today at 5:42PM</span>
</div>
<div class="text">
How artistic!
</div>
<div class="actions">
<a class="reply">Reply</a>
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
</a>
<div class="content">
<a class="author">Elliot Fu</a>
<div class="metadata">
<span class="date">Yesterday at 12:30AM</span>
</div>
<div class="text">
<p>This has been very useful for my research. Thanks as well!</p>
</div>
<div class="actions">
<a class="reply">Reply</a>
</div>
</div>
<div class="comments">
<div class="comment">
<a class="avatar">
<img src="../../static/images/cat.jfif">
</a>
<div class="content">
<a class="author">Jenny Hess</a>
<div class="metadata">
<span class="date">Just now</span>
</div>
<div class="text">
Elliot you are always so right :)
</div>
<div class="actions">
<a class="reply">Reply</a>
</div>
</div>
</div>
</div>
</div>
<div class="comment">
<a class="avatar">
<img src="../../static/images/kobe1.jpg">
</a>
<div class="content">
<a class="author">Joe Henderson</a>
<div class="metadata">
<span class="date">5 days ago</span>
</div>
<div class="text">
Dude, this is awesome. Thanks so much
</div>
<div class="actions">
<a class="reply">Reply</a>
</div>
</div>
</div>
<form class="ui reply form">
<div class="field">
<textarea></textarea>
</div>
<div class="ui blue labeled submit icon button">
<i class="icon edit"></i> Add Reply
</div>
</form>
</div> </div>
<div id="conmment-container" class="ui form">
<div class="field"><textarea name="content" id="" cols="30" rows="10"
placeholder="请输入信息........"></textarea></div>
<div class="fields">
<div class="field m-mobiel-wide m-margin-bottom-mini"><i class="left user icon"> </i> <input type="text" name="Username" placeholder="姓名"></div>
<div class="field m-mobiel-wide m-margin-bottom-mini "> <i class="ui mail icon"> </i> <input type="text" name="E-mail" placeholder="邮箱"></div>
<div class="ui basic centered teal button">
<div class="field m-mobiel-wide m-margin-bottom-mini"><i class="edit icon"></i>发布</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="m-fixed m-right-bottom m-padded">
<div class="ui vertical icon buttons ">
<a href="" class="ui icon black button"><i class="share square icon"></i></a>
<button class="ui teal toc button">电话</button>
<a href="#conmment-container"><button class="ui teal button">留言</button></a>
<button class="ui chatting teal basic rounded button"><i class=" rounded weixin icon"></i></button>
<a href="" class="ui black icon button"><i class="chevron up icon"></i></a>
</div>
<div class="ui toc-container flowing popup transition hidden">
<div class="ui label" style="color: red;font-size: 4px">电话：17886977662</div>
</div>
<div class="ui wechart flowing popup transition hidden">
<img src="../../static/images/bonuscode.jpg" alt="weixin" style="width: 188px;height: 188px">
</div>
</div>
<footer class="ui inverted vertical segment">
<div class="ui container">
<div class="ui center aligned container">
<div class="ui inverted divided grid">
<div class="three wide column">
<div class="item">
<img src="../../static/images/bonuscode.jpg" class="ui rounded image" alt="" style="width: 100px !important"> </div>
</div>
<div class="three wide column">
<h4 class="ui inverted header"> 最新博客</h4>
<div class="ui inverted link list">
<a href="#" class="item">用户故事userstory</a>
<a href="#" class="item">用户故事</a>
<a href="#" class="item">用户故事</a>
</div>
</div>
<div class="three wide column">
<h4 class="ui inverted header "> 联系我</h4>
<div class="ui inverted link list">
<a href="#" class="item">E-mail 2282240015@qq.com</a>
<a href="#" class="item">2282240015</a>
<a href="#" class="item">用户故事</a>
</div>
</div>
<div class="seven wide column" >
<h4 class="ui inverted header m-opacity-mini">TobeTangMonk</h4>
<p class="m-text-thin m-text-spaced m-opacity-mini">这个是我的个人博客
，分享有关编程，思考，分享源代码，和个人生活中的点点滴滴的事情，我希望可以坚持
一辈子写好博客,养成好的习惯，to be a kind and inteligent boy</p>
</div>
</div>
<div class="ui section divider"> <p class="m-text-spaced m-text-lined"> Copyright @2016-2017</p>
</div>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"> </script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<script src="../../static/prism/prism.js"></script>
<script>
$('payQ')
.popup({
popup : $('.custom.popup'),
on : 'hover'
})
;
$('#payButton').popup({
popup:$('.payQR.popup'),
on:'hover',
position:`top center`,
});
$('.toc.button').popup({
popup:$('.toc-container'),
on:'hover',
position:'left center',
});
$('.chatting.button').popup({
popup:$('.wechart'),
on:'hover',
position:'left center',
});
</script>
<script src="../../static/js/"></script>
<script src="../../static/js/jquery-1.8.3.min.js"></script>
<script src="../../static/js/scroll.js"></script>
<script>
$(function(){
$('#dowebok').addClass('animated bounce');
});
$(function(){
$('#dowebok').addClass('animated bounce');
setTimeout(function(){
$('#dowebok').removeClass('bounce');
}, 1000);
});
</script>
<script>
$('.menu.toggle ').click(function (){
$('.m-item').toggleClass('m-hide');
},1000);
</script>
<script>
var f_idx = 0;
var c_idx = 0;
jQuery(document).ready(function($) {
$("body").click(function(e) {
var font = new Array("富强","rich", "loveryouself", "文明", "和谐", "freedom", "equal", "justify" ,"Legally", "Loveyour", "敬业", "诚信", "友善");
var color = new Array('#ff0000','#eb4310','#f6941d','#fbb417','#ffff00','#cdd541','#99cc33','#3f9337','#219167','#239676','#24998d','#1f9baa','#0080ff','#3366cc','#333399','#003366','#800080','#a1488e','#c71585','#bd2158');
var $i = $("<span />").text(font[f_idx]);
f_idx = (f_idx + 1) % font.length;
c_idx = (c_idx + 1) % color.length;
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 99999999999999999999999999999999999999999999999999999999999999999999999999 ,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": color[c_idx]
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
},
1500,
function() {
$i.remove();
});
});
});
</script>
</body>
</html>
6508
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
