花了两个月学习的前端成果，展示一下，纪念下自己的努力。
演示地址：点击 打开 查看
功能
主页
日志
相册
心情说说
模板分享
个人档
留言板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>终于等到你个人博客模板</title>
<link rel="stylesheet" href="css/cssset.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/iconfont.css">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<link type="image/png" href="images/favicon.ico" rel="shortcut icon">
</head>
<body oncontextmenu="self.event.returnValue=false" onselectstart="return false">
<!--头部开始-->
<header>
<div class="header-box">
<a class="logo" > <img src="images/index/logo.png" alt="终于等到你" style="width: 360px;"> </a>
<a class="warning"><img src="images/index/pic.png" alt="还好我没放弃" style="width: 360px;"></a>
</div>
</header>
<!--导航开始-->
<nav class="nav">
<ul >
<li class="current"><a href="index.html">主页</a></li>
<li><a href="日志.html" >日志</a></li>
<li><a href="相册.html" >相册</a></li>
<li><a href="心情说说.html" >心情说说</a></li>
<li><a href="http://220.178.0.62:8092/2" target="_blank">模板分享</a></li>
<li><a href="关于我.html" >个人档</a></li>
<li><a href="留言板.html" >留言板</a></li>
</ul>
</nav>
<!--内容开始-->
<section>
<!--首页轮播图-->
<div class="banner-box">
<div class="banner">
<a class="a-img-ban"> <img class="img-ban" src="images/index/1.jpg" alt="终于等到你还好我没放弃" title="终于等到你还好我没放弃"> </a>
<a class="a-img-ban"> <img class="img-ban" src="images/index/2.jpg" alt="关注我们"> </a>
<a class="a-img-ban"> <img class="img-ban" src="images/index/3.jpg" alt="在最好的年纪遇到你,才算没有辜负自己"> </a>
<a class="a-img-ban"> <img class="img-ban" src="images/index/4.jpg" alt="终于等到你吧"> </a>
<ul>
<li class="li-img"><img src="images/index/1.jpg" alt="终于等到你还好我没放弃"></li>
<li class="li-img"><img src="images/index/2.jpg" alt="关注我们"></li>
<li class="li-img"><img src="images/index/3.jpg" alt="在最好的年纪遇到你,才算没有辜负自己"></li>
<li class="li-img"><img src="images/index/4.jpg" alt="终于等到你吧"></li>
</ul>
</div>
<div class="art">
<h2 class="art-txt"> <em class="iconfont c-f26868"></em> <span>推荐文章</span> </h2>
<ul class="art-list">
<li><a href="https://www.baidu.com/s?ie=UTF-8&wd=奇妙的时光之旅" target="_blank"><em class="iconfont c-f26868"> </em><span>奇妙的时光之旅</span> </a> </li>
<li><a href="https://www.baidu.com/s?ie=UTF-8&wd=我很想打扰你 可是没有话题也没有勇气" target="_blank"><em class="iconfont c-f26868"> </em><span>我很想打扰你 可是没有话题也没有勇气</span></a></li>
<li><a href="https://www.baidu.com/s?ie=UTF-8&wd=可以没有爱情，但是绝对不能没有朋友" target="_blank"><em class="iconfont c-f26868"> </em><span>可以没有爱情，但是绝对不能没有朋友</span></a></li>
<li><a href="https://www.baidu.com/s?ie=UTF-8&wd=曾经拥有过便是幸福" target="_blank"><em class="iconfont c-f26868"> </em><span>曾经拥有过便是幸福</span> </a> </li>
<li><a href="https://www.baidu.com/s?ie=UTF-8&wd=给回忆永不褪去的色彩" target="_blank"><em class="iconfont c-f26868"> </em><span>给回忆永不褪去的色彩</span> </a> </li>
<li><a href="https://www.baidu.com/s?ie=UTF-8&wd=遇见喜欢的人已经很难了" target="_blank"><em class="iconfont c-f26868"> </em><span>遇见喜欢的人已经很难了</span> </a> </li>
<li><a href="https://www.baidu.com/s?ie=UTF-8&wd=我爱过一个人 背着满身的伤痕" target="_blank"><em class="iconfont c-f26868"> </em><span>我爱过一个人 背着满身的伤痕</span> </a> </li>
<li><a href="https://www.baidu.com/s?ie=UTF-8&wd=跌跌撞撞这一条爱情路，我们看到的只有荒芜。" target="_blank"><em class="iconfont c-f26868"> </em><span>跌跌撞撞这一条爱情路，我们看到的只有荒芜。</span> </a> </li>
</ul>
</div>
</div>
<!-- 个人博客模板-->
<div class="work">
<h2><a>个人博客模板</a></h2>
<ul class="work-con">
<li> <a >
<img src="images/muban/time.jpg" alt="小清新个人博客主页模板">
<div class="work_info" >
<h3>小清新个人博客主页模板</h3>
<p>一个人旅行，不理会繁杂的琐事，自由自在地，去体验一个城市，一段故事，留下一片欢笑。</p>
</div>
</a> </li>
<li> <a > <img src="images/muban/0_3.jpg" alt="广州博兆集团—五龙山庄拓展训练">
<div class="work_info" >
<h3>广州博兆集团—五龙山庄拓展训练</h3>
<p>2016/3/6 星期日 天气晴，广州市博兆投资(集团)有限公司，五龙山庄拓展训练（半军事化培训训练+游戏+野炊+互动+高空挑战+毕业墙）</p>
</div>
</a> </li>
<li> <a > <img src="images/muban/art2.jpg" alt="看雪时间轴个人博客模板">
<div class="work_info" >
<h3>看雪时间轴个人博客模板</h3>
<p>看雪,是一种唯美的心境。这个冬季，放下疲惫的自己，一起看雪吧</p>
</div>
</a> </li>
<li> <a > <img src="images/muban/1_3.jpg" alt="遥望远方个人博客模板">
<div class="work_info">
<h3>遥望远方个人博客模板</h3>
<p>心情日记_心情语录随笔 - 个人博客模板</p>
</div>
</a> </li>
<li> <a > <img src="images/muban/2_3.jpg" alt="别了夏天">
<div class="work_info">
<h3>别了夏天</h3>
<p>八月过,九月到,夏日去,金秋到。夏天一个充满多彩的季节,这个夏天,有点与众不同。</p>
</div>
</a> </li>
</ul>
</div>
<!--主体文章-->
<article>
<!--左侧文章-->
<div class="art-left">
<h2 class="art-txt"> <em class="iconfont c-f26868"></em> <span>最新文章</span> </h2>
<div class="art-model">
<h3><a >散发正能量的励志说说 让你打鸡血一样的励志句子</a></h3>
<dl class="img-txt">
<dt> <a ><img src="images/rizhi/4_w.jpg" alt="散发正能量的励志说说 让你打鸡血一样的励志句子" title="散发正能量的励志说说 让你打鸡血一样的励志句子"></a></dt>
<dd>
<p class="deatil">
1.不埋怨谁，不嘲笑谁，也不羡慕谁，阳光下灿烂，风雨中奔跑，做自己的梦，走自己的路。
2.今天付出一分的努力，可换取明天十分安乐，今天透支一分安乐，可换取明天十分饥寒。
3.不大可能的事也...</p>
<p class="dateview"> <span>发布时间：2019-05-17</span> <span>作者：不认识</span> <span>分类：网络</span> </p>
<a href="日志/1.html" target="_blank" class="btn bg-f26868 c-fff" >查看全文</a>
</dd>
</dl>
</div>
<div class="art-model">
<h3><a >微信个性说说霸气独特 朋友圈点赞的火爆句子</a></h3>
<dl class="img-txt">
<dt><a ><img src="images/rizhi/1-w.jpg" alt="微信个性说说霸气独特 朋友圈点赞的火爆句子" title="微信个性说说霸气独特 朋友圈点赞的火爆句子"></a></dt>
<dd>
<p class="deatil">
1.我们又不熟，当然脾气好。
2.我凡事都看的开，这并不影响我记仇。
3.谁的蜕变没流过血，疼痛，忍着，你的善良必须带点锋芒。
4.不要炫耀你的钱，你离开了，那只是废纸。5.委曲求全没有什么...</p>
<p class="dateview"> <span>发布时间：2016/10/18</span> <span>作者：不认识</span> <span>分类：网络</span> </p>
<a href="日志/2.html" target="_blank" class="btn bg-f26868 c-fff" >查看全文</a> </dd>
</dl>
</div>
<div class="art-model">
<h3><a >抖音最火怼人句子合集 高级怼人说说霸气有内涵</a></h3>
<dl class="img-txt">
<dt><a ><img src="images/rizhi/2-w.jpeg" alt="抖音最火怼人句子合集 高级怼人说说霸气有内涵" title="抖音最火怼人句子合集 高级怼人说说霸气有内涵"></a></dt>
<dd>
<p class="deatil">
1.真羡慕你的皮肤，保养的真厚
2.你的智商停留在胎教水平吧?
3.你是什么牌子塑料袋，这么能装
4.你这么会抬杠，跟我去工地做事吧。
5.摸不清我的脾气就别跟我开玩笑
6.国家怎么就没拿</p>
<p class="dateview"> <span>发布时间：2016/10/18</span> <span>作者：不认识</span> <span>分类：网络</span> </p>
<a href="日志/3.html" target="_blank" class="btn bg-f26868 c-fff" >查看全文</a> </dd>
</dl>
</div>
<div class="art-model">
<h3><a >2019最新qq潮流霸气说说 专属于00后的个性说说大全</a></h3>
<dl class="img-txt">
<dt><a ><img src="images/rizhi/6_w.png" alt="终于等到你(电视剧《咱们结婚吧》主题曲) - 张靓颖" title="终于等到你(电视剧《咱们结婚吧》主题曲) - 张靓颖"></a></dt>
<dd>
<p class="deatil">
1.我的眼睛不是染缸，装不下你的各种脸色。
2.别和我说对不起，对不起只能换来你的安心，而非我的释然。
3.带不走四季的风，就卷走一路的风景；遇不到心动的人，就孤身潇洒走四方。
4.多少...</p>
<p class="dateview"> <span>发布时间：2016/10/18</span> <span>作者：不认识</span> <span>分类：网络</span> </p>
<a href="日志/4.html" target="_blank" class="btn bg-f26868 c-fff" >查看全文</a> </dd>
</dl>
</div>
<div class="art-model">
<h3><a >适合五月发圈的精致句子2019 五月让你访客量爆涨的说说</a></h3>
<dl class="img-txt">
<dt><a><img src="images/rizhi/6-w.jpg" alt="适合五月发圈的精致句子2019 五月让你访客量爆涨的说说" title="适合五月发圈的精致句子2019 五月让你访客量爆涨的说说"></a></dt>
<dd>
<p class="deatil">
1.无论去哪，什么天气，记得带上自己的阳光
2.愿有人疼你入骨 深情如初 从此不被辜负.
3.我们手拉手，一起闪亮到世界尽头。
4.我习惯了无所谓却不是真的什么都不在乎。
5.人间烟火 山...</p>
<p class="dateview"> <span>发布时间：2016/10/18</span> <span>作者：不认识</span> <span>分类：网络</span> </p>
<a href="日志/5.html" target="_blank" class="btn bg-f26868 c-fff" >查看全文</a> </dd>
</dl>
</div>
<div class="art-model">
<h3><a >超有个性的说说很霸气洒脱 很别致的个性说说精选</a></h3>
<dl class="img-txt">
<dt><a><img src="images/rizhi/7-w.jpg" alt="超有个性的说说很霸气洒脱 很别致的个性说说精选" title="超有个性的说说很霸气洒脱 很别致的个性说说精选"></a></dt>
<dd>
<p class="deatil">
1.有些人，认不清自己的问题， 还长着一张爱说教的嘴。
2.我活着不是为了取悦这个世界，而是为了用我自己的生活方式来取悦自己。
3.若爱，请深爱，如弃，请彻底，不要暧昧，伤人伤己。
4.当你...</p>
<p class="dateview"> <span>发布时间：2016/10/18</span> <span>作者：不认识</span> <span>分类：网络</span> </p>
<a href="日志/6.html" target="_blank" class="btn bg-f26868 c-fff" >查看全文</a> </dd>
</dl>
</div>
<div class="art-model">
<h3><a >2019高智商怼人神句大全 一句话让对方哑口无言</a></h3>
<dl class="img-txt">
<dt><a><img src="images/rizhi/8-w.jpg" alt="2019高智商怼人神句大全 一句话让对方哑口无言" title="2019高智商怼人神句大全 一句话让对方哑口无言"></a></dt>
<dd>
<p class="deatil">
1.没见过你这种脸皮比城墙还厚的人啊，离你八丈远脸皮都弹我这了
2.有空一起去吃鱼吧没看你挺会挑刺的。
3.你很会下厨吧，看你挺会添油加醋的。
4.你住海边吗?管的也太宽了吧!
5.别...</p>
<p class="dateview"> <span>发布时间：2016/10/18</span> <span>作者：不认识</span> <span>分类：网络</span> </p>
<a href="日志/7.html" target="_blank" class="btn bg-f26868 c-fff" >查看全文</a> </dd>
</dl>
</div>
<div class="art-model">
<h3><a >朋友圈高品质高质量的个性说说 好听吸引人的说说2019</a></h3>
<dl class="img-txt">
<dt><a><img src="images/rizhi/9-w.jpg" alt="朋友圈高品质高质量的个性说说 好听吸引人的说说2019" title="朋友圈高品质高质量的个性说说 好听吸引人的说说2019"></a></dt>
<dd>
<p class="deatil">
1.人的一切痛苦都是对自己无能的嘲笑。
2.千万不要说自己是全天下最倒霉的人，否则老天会认为你低估了他的能力。
3.决定忘记的人，再见到也别再心潮澎湃。
4.我们之所以迷茫是因为...</p>
<p class="dateview"> <span>发布时间：2016/10/18</span> <span>作者：不认识</span> <span>分类：网络</span> </p>
<a href="日志/8.html" target="_blank" class="btn bg-f26868 c-fff" >查看全文</a> </dd>
</dl>
</div>
<div class="art-model">
<h3><a >抖音上热门说说大全 抖音最火个性说说绝对精辟</a></h3>
<dl class="img-txt">
<dt><a><img src="images/rizhi/10.jpg" alt="抖音上热门说说大全 抖音最火个性说说绝对精辟" title="抖音上热门说说大全 抖音最火个性说说绝对精辟"></a></dt>
<dd>
<p class="deatil">
1.我曾以为我走进过你的世界，后来才发现，我连窗户都没打开。
2.清晨的粥比深夜的酒好喝，骗你的人比爱你的人会说!
3.做个俗人，贪财好色，一世风流。
4.笑给你讨厌的人看，要多嚣张就多...</p>
<p class="dateview"> <span>发布时间：2016/10/18</span> <span>作者：不认识</span> <span>分类：网络</span> </p>
<a href="日志/9.html" target="_blank" class="btn bg-f26868 c-fff" >查看全文</a> </dd>
</dl>
</div>
<div class="art-model">
<h3><a >快手个性说说很吸引人的那种 快手热门吸粉说说大全</a></h3>
<dl class="img-txt">
<dt><a><img src="images/rizhi/4_w.jpg" alt="终于等到你(电视剧《咱们结婚吧》主题曲) - 张靓颖" title="终于等到你(电视剧《咱们结婚吧》主题曲) - 张靓颖"></a></dt>
<dd>
<p class="deatil">
1.有些幸福是来自坚持，有些幸福是来自遗忘。
2.一直想做大哥的女人，后来却做了大哥。
3.校长又没死，穿什么孝服啊。
4.网络喷子键盘侠，话不多说就是掐。
5.该失望的东西，从来都没有辜...</p>
<p class="dateview"> <span>发布时间：2016/10/18</span> <span>作者：不认识</span> <span>分类：网络</span> </p>
<a href="日志/10.html" target="_blank" class="btn bg-f26868 c-fff" >查看全文</a> </dd>
</dl>
</div>
</div>
<aside class="right-box">
<div class="art">
<h2 class="art-txt"> <em class="iconfont c-f26868"></em><span>热门文章</span> </h2>
<ul class="art-list">
<li><a href="#"><em class="iconfont c-f26868"> </em><span>最动人的唯美爱情语录短句</span></a></li>
<li><a href="#"><em class="iconfont c-f26868"> </em><span>100条唯美爱情语录短句</span></a> </li>
<li><a href="#"><em class="iconfont c-f26868"> </em><span>经典爱情语录,唯美爱情语录,一句话爱情语录短句大全</span></a></li>
<li><a href="#"><em class="iconfont c-f26868"> </em><span>2016爱情经典语录</span></a></li>
<li><a href="#"><em class="iconfont c-f26868"> </em><span>一句话的简单心情说说</span></a></li>
<li><a href="#"><em class="iconfont c-f26868"> </em><span>2016张小娴经典爱情语录</span></a></li>
<li><a href="#"><em class="iconfont c-f26868"> </em><span>经典爱情语录|浪漫爱情语录</span></a> </li>
<li><a href="#"><em class="iconfont c-f26868"> </em><span>经典爱情语录大全2016最新版</span></a></li>
</ul>
</div>
<div class="art mt20">
<h2 class="art-txt"> <em class="iconfont c-f26868"></em><span>图文推荐</span> </h2>
<ul class="tuijian">
<li>
<a href="日志/2.html" target="_blank" title="微信个性说说霸气独特 朋友圈点赞的火爆句子" >
<i><img src="images/rizhi/1-w.jpg"></i>
<p>微信个性说说霸气独特 朋友圈点赞的火爆句子</p>
</a>
</li>
<li>
<a href="日志/5.html" target="_blank" title="适合五月发圈的精致句子2019 五月让你访客量爆涨的说说" >
<i><img src="images/rizhi/6-w.jpg"></i>
<p>适合五月发圈的精致句子2019 五月让你访客量爆涨的说说</p>
</a></li>
<li>
<a href="日志/6.html" target="_blank" title="超有个性的说说很霸气洒脱 很别致的个性说说精选" >
<i><img src="images/rizhi/7-w.jpg"></i>
<p>超有个性的说说很霸气洒脱 很别致的个性说说精选</p>
</a></li>
<li>
<a href="日志/7.html" target="_blank" title="2019高智商怼人神句大全 一句话让对方哑口无言" >
<i><img src="images/rizhi/8-w.jpg"></i>
<p>2019高智商怼人神句大全 一句话让对方哑口无言</p>
</a></li>
<li>
<a href="日志/8.html" target="_blank" title="朋友圈高品质高质量的个性说说 好听吸引人的说说2019" >
<i><img src="images/rizhi/9-w.jpg"></i>
<p>朋友圈高品质高质量的个性说说 好听吸引人的说说2019</p>
</a></li>
<li>
<a href="日志/9.html" target="_blank" title="抖音上热门说说大全 抖音最火个性说说绝对精辟" >
<i><img src="images/rizhi/10-w.jpg"></i>
<p>抖音上热门说说大全 抖音最火个性说说绝对精辟</p>
</a></li>
</ul>
</div>
<div class="art mt20">
<h2 class="art-txt"> <em class="iconfont c-f26868"></em> <span>关注我</span> </h2>
<div class="two-code"> <img src="images/contact/qq.jpg" alt="扫一扫，关注我们哦">
<p class="sao-txt">QQ扫一扫二维码，交个朋友！</p>
</div>
<div class="mt20"></div>
<div class="two-code"> <img src="images/contact/weixin.jpg" alt="扫一扫，关注我们哦">
<p class="sao-txt">微信扫一扫二维码，交个朋友！</p>
</div>
</div>
<div class="art mt20">
<h2 class="art-txt"> <em class="iconfont c-f26868"></em><span>最新评论</span> </h2>
<ul id="comments">
<li class="comment-item comment-1345">
<img alt="" class="avatar" src="images/pinglun/timg.jpg">
<div class="text">
<a title="好喜欢你啊，你长得那么那么帅 " >好喜欢你啊，你长得那么那么帅 ...</a>
</div>
<footer>
<time>9小时前</time>
<span class="user">轩</span>
</footer>
</li>
<li class="comment-item comment-1345">
<img alt="" class="avatar" src="images/pinglun/qq-1.jpg">
<div class="text">
<a title="师父 ，你在等谁？ 我谁也没等，谁也不会来" >师父 ，你在等谁？ 我谁也没等，谁也不会来。</a>
</div>
<footer>
<time>10小时前</time>
<span class="user">眉间雪</span>
</footer>
</li><li class="comment-item comment-1345">
<img alt="" class="avatar" src="images/pinglun/qq-2.jpg">
<div class="text">
<a title="静谧的午后，一个人伫立在窗前，看窗外车水马龙，人来人往" >静谧的午后，一个人伫立在窗前，看窗外车水马龙，人来人往...</a>
</div>
<footer>
<time>14小时前</time>
<span class="user">沐梦羽</span>
</footer>
</li>
<li class="comment-item comment-1345">
<img alt="" class="avatar" src="images/pinglun/qq-3.jpg">
<div class="text">
<a title="人的心，有时就像风一样，好像永远都有一种悲鸣在风里回旋，也找不到安全感" >人的心，有时就像风一样，好像永远都有一种悲鸣在风里回旋，也找不到安全感.</a>
</div>
<footer>
<time>18小时前</time>
<span class="user">沐梦羽</span>
</footer>
</li>
<li class="comment-item comment-1345">
<img alt="" class="avatar" src="images/pinglun/qq-4.jpg">
<div class="text">
<a title="岁月的那一面苍白，就像失去了水润鲜活的玫瑰，只是凋落着凄凉的味道" >岁月的那一面苍白，就像失去了水润鲜活的玫瑰，只是凋落着凄凉的味道</a>
</div>
<footer>
<time>18小时前</time>
<span class="user">沐梦羽</span>
</footer>
</li>
</ul>
</div>
<div class="art mt20">
<h2 class="art-txt"> <em class="iconfont c-f26868"></em><span>背景音乐</span> </h2>
<div id="lmlblog-memeber-bg-music" class="aplayer"></div>
<img src="images/index/today.png" alt="司空琪" style="width: 280px;margin: 20px auto">
<audio src="mp3/许嵩,黄龄 - 惊鸿一面.mp3" controls=""></audio><!--autoplay=""-->
</div>
<div class="art mt20">
<h2 class="art-txt"> <em class="iconfont c-f26868"></em> <span>友情链接</span> </h2>
<ul class="fri-link">
<li><a >暂无友链</a> </li>
</ul>
</div>
</aside>
</article>
</section>
<footer id="footer">
Design By 2016/10/19 星期三 广州天气：阵雨多云 终于等到你
<a href="http://www.不认识" target="_blank">个人博客</a>
模板 - 不认识 模板下载地址：更新中...
<p>本网页为静态页面，如喜欢可用自己熟悉的程序套用，如dedecms、帝国CMS</p>
</footer>
<div id="to-top" class="to-top" style="bottom: 15px;">顶</div>
<script>
$(function () {
$(".a-img-ban").eq(0).addClass('img-ban-curr');
$(".li-img").eq(0).addClass('curr');
var n = 0;
setInterval(function(){
if(n >= $('.li-img').length){
n = 0;
}
$(".a-img-ban").eq(n).addClass('img-ban-curr').siblings('.a-img-ban').removeClass('img-ban-curr');
$(".li-img").eq(n).addClass('curr').siblings('.li-img').removeClass('curr');
n++;
},4000)
$('.li-img').click(function(){
var num = $(".li-img").index(this);
$(".a-img-ban").eq(num).addClass('img-ban-curr').siblings('.a-img-ban').removeClass('img-ban-curr');
$(this).addClass('curr').siblings(".li-img").removeClass('curr');
n = num;
});
var toTop = $('#to-top');
// Scroll totop button
// ---------------------------------------------------------------------------------------
$(window).scroll(function () {
if ($(this).scrollTop() > 1) {
toTop.css({bottom: '15px'});
} else {
toTop.css({bottom: '-100px'});
}
});
toTop.on('click', function(){
$('html, body').animate({scrollTop: '0px'}, 800);
return false;
});
});
</script>
</body>
</html>
扫一扫
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
