首页
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>主页</title>
<!-- 引入layui css文件 -->
<link rel="stylesheet" href="layui-v2.2.3/layui/css/layui.css">
<!-- 自定义 css -->
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!-- Header -->
<div class="header">
<!-- 个性化标题 -->
<div class="mytitle">
<label>赌书消得泼茶香</label>
</div>
<!-- 导航栏 -->
<div class="mymenu-content">
<ul class="mymenu">
<li><a href="">文章</a></li>
<li><a href="message.html">留言</a></li>
<li><a href="photos.html">相册</a></li>
<li><a href="about.html">简介</a></li>
<li><a href="aihao.html">爱好</a></li>
<li><a href="movies.html">电影</a></li>
<li><a href="books.html">书籍</a></li>
</ul>
</div>
<!-- 隐藏功能 -->
<div class="other-functions">
<label>隐藏功能</label>
</div>
<!-- 搜索框 -->
<div class="query">
<input class="keyword" placeholder="搜索内容"/>
<i class="layui-icon" style="margin-right: 20px; font-size: 18px;"></i>
</div>
</div>
<!-- 个性签名 -->
<div class="my-sign">
<!-- 包含标志和签名 -->
<div class="my-signImg">
<img id="my-signImg" src="img/my-sign.gif">
<div class="my-signWord">
<span class="my-signTitle" id="my-signTitle">匆匆时光</span>
<span class="my-signBody" id="my-signBody">I' am waiting for you here.</span>
</div>
</div>
</div>
<!-- Content -->
<div class="main-content">
<!-- 个人以及所有文章、留言、照片汇总 包含大分类以及小标签 左面版 -->
<div class="my-totalContent">
<!-- 1.个人以及汇总部分 -->
<div class="blog-inTotal">
<!-- 头像 -->
<img src="img/IMG_1568.PNG">
<!-- 说明 -->
<span>——好好学习，天天向上吧</span>
<!-- 各方面汇总(各项目以及数量) -->
<fieldset class="layui-elem-field">
<legend>文章标签</legend>
<!-- 用于存放tags -->
<div class="layui-field-box" id="tagContent">
<span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px;font-weight: 400;">论语</span>
<span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px">道德经</span>
<span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px">余华作品</span>
<span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px">沈从文</span>
<span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px">冰心选集</span>
<span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px">小说散文</span>
<span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px">随笔</span>
<span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px">外国文学</span>
<span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px">人生感悟</span>
<span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px">遇见你</span>
<span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px">日记</span>
<span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px">绘画</span>
<span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px">诗经</span>
<span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px">诗词研究</span>
<span class="layui-badge-rim" style="height: 30px;line-height: 30px;margin-top: 13px;margin-left: 10px">历代书法</span>
</div>
</fieldset>
</div>
</div>
<!-- 主体显示部分 右面板 -->
<div class="content-body">
<!-- 单个文章面板 -->
<div class="blog-item">
<!-- 标题 -->
<p class="blog-title"><a href="simpleBlog.html">一个小和尚</a></p>
<!-- 作者以及时间 -->
<p class="blog-author">—— 邱建红 2017-12-14 12:36</p>
<img class="blog-img" src="img/pic01.jpg"/>
<!-- 概要 -->
<p class="blog-des">岁月荏苒，如梦似幻，人生只在呼吸之间而已。</p>
<p class="blog-tags">标签: 日记 / 人生感悟</p>
</div>
<!-- 单个文章面板 -->
<div class="blog-item">
<!-- 标题 -->
<p class="blog-title"><a href="simpleBlog1.html">桃之夭夭，灼灼其华</a></p>
<!-- 作者以及时间 -->
<p class="blog-author">—— 邱建红 2017-12-18 12:03</p>
<img class="blog-img" src="img/pic03.jpg"/>
<!-- 概要 -->
<p class="blog-des">犹如一支山寺桃花般惊艳的你就这样在我世界里静静地除绽着。</p>
<p class="blog-tags">标签: 日记 / 遇见你</p>
</div>
</div>
<hr class="my-line">
</div>
<script src="layui-v2.2.3/layui/layui.js"></script>
<!-- 引入jquery js -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- 自定义 js -->
<script src="js/index.js"></script>
<script>
$(function () {
//init
component.init();
});
</script>
</body>
</html>
登录
var component = {
/**
* 初始化
*/
init : function () {
//layui
component.layui();
//Header 以及 Total部分事件
component.mySign();
},
/**
* layui
*/
layui : function () {
//加载layui模块
layui.use(['layer', 'form', 'element'], function () {
var layer = layui.layer
, form = layui.form
, element = layui.element
//layer.msg('Hello World');
});
},
/**
* 签名类效果
*/
mySign : function () {
//Img(monkey)
var signImgTouch = function () {
$(this).animate({borderRadius : 0}, 1000);
};
var signImgLeave = function () {
$(this).animate({borderRadius : 93}, 1000);
};
$("#my-signImg").mouseenter(signImgTouch)
.mouseleave(signImgLeave);
//Title
var signTitleTouch = function () {
$(this).animate({marginLeft : 50}, 800);
};
var signTitleLeave = function () {
$(this).animate({marginLeft : 0}, 800);
};
$("#my-signTitle").mouseenter(signTitleTouch)
.mouseleave(signTitleLeave);
}
};私聊获取源码！！！！
运行部分图片
