1 Star 0 Fork 7

smokingCat/个人博客页面模板

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
index.html 19.35 KB
一键复制 编辑 原始数据 按行查看 历史
实习两年半 提交于 2020-01-29 00:48 . 优化
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>人来人往</title>
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/animate.min.css"/>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="css/APlayer.min.css"/>
</head>
<body>
<!-- 顶部滚动进度条 -->
<div class="progress"></div>
<div class="top">
<div class="box">
<a href="index.html">首页</a>
<a href="#">动态</a>
<a href="#">音乐盒</a>
<a href="#">我的笔记</a>
<div class="dropdown">
<span class="dropdown_dow">常用工具</span>
<div class="dropdown-content ">
<a href="#">列表1</a>
<a href="#">列表2</a>
<a href="#">列表3</a>
</div>
</div>
<a href="#">我的游戏</a>
<a href="#">语录集</a>
<a href="#">时间轴</a>
<a href="#">留言板</a>
<a href="link.html">友情链接</a>
</div>
<!-- <div class="QQ">
<img src="img/QQ-logo.png" alt="">
</div> -->
</div>
<!-- 中部图片and头像 -->
<div class="content">
<div class="wall">
<div class="layui-carousel" id="lunbo" >
<div carousel-item>
<img src="img/wp_02-1024x288.jpg" >
<img src="img/banner3.jpg" >
</div>
</div>
<p>&nbsp;</p>
<div class="head ">
<img src="img/people.jpg" alt="">
</div>
<div class="link" style="height: 6vh;width: 10vw;">
<div><a href="https://www.jianshu.com/u/03ecacbb2a42" target="_blank"><img src="img/jianshu.jpg" alt=""></a></div>
<div><a href="https://gitee.com/cwljxf" target="_blank"><img src="img/mayun.jpg" alt=""></a></div>
<div><a href="https://github.com/chenweilong1713/" target="_blank"><img src="img/github.jpg" alt=""></a></div>
</div>
</div>
</div>
<!-- 中下部门,分为三份 -->
<div class="below" >
<div class="below-left" >
<div style="background-color: #FFFFFF;">
<br>
<div>
<div id="circle" style="background-color: #FC625D;"></div>
<div id="circle" style="background-color: #FDBC40;"></div>
<div id="circle" style="background-color: #35CD4B;"></div>
<div class="subtitle">
&nbsp;&nbsp;点击排行
</div>
</div>
<br>
<!-- 排行列表 -->
<div class="parcel">
<a href="#">
<div class="seniority">
<div class="left">
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2365878393,2194089157&fm=26&gp=0.jpg" alt="">
</div>
<div class="right">
<p># MybatisPlus中常用方法vue-cli3.0引入jQuery使用animate.css动态特效</p>
<p>999次浏览</p>
</div>
</div>
</a>
</div>
<div class="parcel">
<a href="#">
<div class="seniority">
<div class="left">
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1695136610,59628710&fm=26&gp=0.jpg" alt="">
</div>
<div class="right">
<p># vue-cli3.0引入jQuery使用animate.css动态特效</p>
<p>999次浏览</p>
</div>
</div>
</a>
</div>
<div class="parcel">
<a href="#">
<div class="seniority">
<div class="left">
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4170459073,464873169&fm=11&gp=0.jpg" alt="">
</div>
<div class="right">
<p># localStorage的使用</p>
<p>999次浏览</p>
</div>
</div>
</a>
</div>
<div class="parcel">
<a href="#">
<div class="seniority">
<div class="left">
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2474629324,2924199176&fm=26&gp=0.jpg" alt="">
</div>
<div class="right">
<p># vue中生命周期(笔记)</p>
<p>999次浏览</p>
</div>
</div>
</a>
</div>
<div class="parcel">
<a href="#">
<div class="seniority">
<div class="left">
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3542102612,1346992094&fm=26&gp=0.jpg" alt="">
</div>
<div class="right">
<p># vue路由</p>
<p>999次浏览</p>
</div>
</div>
</a>
</div>
<div class="parcel">
<a href="#">
<div class="seniority">
<div class="left">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3330796269,3708674462&fm=11&gp=0.jpg" alt="">
</div>
<div class="right">
<p># 父组件获取子组件的数据和方法</p>
<p>999次浏览</p>
</div>
</div>
</a>
</div>
<div class="parcel">
<a href="#">
<div class="seniority">
<div class="left">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3330796269,3708674462&fm=11&gp=0.jpg" alt="">
</div>
<div class="right">
<p># vue中父组件传值</p>
<p>999次浏览</p>
</div>
</div>
</a>
</div>
<div class="parcel">
<a href="#">
<div class="seniority">
<div class="left">
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=231766083,3067378981&fm=11&gp=0.jpg" alt="">
</div>
<div class="right">
<p># Centos7中Nginx安装</p>
<p>999次浏览</p>
</div>
</div>
</a>
</div>
<div class="parcel">
<a href="#">
<div class="seniority">
<div class="left">
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1090129808,4094126092&fm=26&gp=0.jpg" alt="">
</div>
<div class="right">
<p># Spring Boot +MyBatisPlus分页</p>
<p>999次浏览</p>
</div>
</div>
</a>
</div>
<div class="parcel">
<a href="#">
<div class="seniority">
<div class="left">
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3592305842,1346430120&fm=26&gp=0.jpg" alt="">
</div>
<div class="right">
<p># springboot中单文件上传和多文件上传</p>
<p>999次浏览</p>
</div>
</div>
</a>
</div>
<br>
</div>
<br>
<div style="background-color: #FFFFFF;">
<br>
<div>
<div id="circle" style="background-color: #FC625D;"></div>
<div id="circle" style="background-color: #FDBC40;"></div>
<div id="circle" style="background-color: #35CD4B;"></div>
<div class="subtitle">
&nbsp;&nbsp;最新发布
</div>
</div>
<br>
<!-- 排行列表 -->
<div class="parcel">
<a href="#">
<div class="seniority">
<div class="left">
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2365878393,2194089157&fm=26&gp=0.jpg" alt="">
</div>
<div class="right">
<p># MybatisPlus中常用方法vue-cli3.0引入jQuery使用animate.css动态特效</p>
<p>999次浏览</p>
</div>
</div>
</a>
</div>
<div class="parcel">
<a href="#">
<div class="seniority">
<div class="left">
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1695136610,59628710&fm=26&gp=0.jpg" alt="">
</div>
<div class="right">
<p># vue-cli3.0引入jQuery使用animate.css动态特效</p>
<p>999次浏览</p>
</div>
</div>
</a>
</div>
<div class="parcel">
<a href="#">
<div class="seniority">
<div class="left">
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4170459073,464873169&fm=11&gp=0.jpg" alt="">
</div>
<div class="right">
<p># localStorage的使用</p>
<p>999次浏览</p>
</div>
</div>
</a>
</div>
<div class="parcel">
<a href="#">
<div class="seniority">
<div class="left">
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2474629324,2924199176&fm=26&gp=0.jpg" alt="">
</div>
<div class="right">
<p># vue中生命周期(笔记)</p>
<p>999次浏览</p>
</div>
</div>
</a>
</div>
<div class="parcel">
<a href="#">
<div class="seniority">
<div class="left">
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3542102612,1346992094&fm=26&gp=0.jpg" alt="">
</div>
<div class="right">
<p># vue路由</p>
<p>999次浏览</p>
</div>
</div>
</a>
</div>
<div class="parcel">
<a href="#">
<div class="seniority">
<div class="left">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3330796269,3708674462&fm=11&gp=0.jpg" alt="">
</div>
<div class="right">
<p># 父组件获取子组件的数据和方法</p>
<p>999次浏览</p>
</div>
</div>
</a>
</div>
<br>
</div>
</div>
<div class="below-centon animated slideInUp" >
<!-- 通知轮播 -->
<div class="layui-carousel" id="inform" style="background-color:rgb(255,255,255)">
<div carousel-item>
<div style="background-color:#FFFFFF;height: 100%;">
<div style="height: 100%;width: 40px;background-color: #F1746B;border-radius:0px;float: left;text-align: center;">
<div style="margin-top: 1.18vh;">
<i class="layui-icon layui-icon-notice" style="color: #FFFFFF;"></i>
</div>
</div>
<div style="margin:1.1vh;text-align: center;">
<p style="letter-spacing:1px">我的小站正式上线!</p>
</div>
</div>
<div style="background-color:#FFFFFF;height: 100%;">
<div style="height: 100%;width: 40px;background-color: #F1746B;border-radius:0px;float: left;text-align: center;">
<div style="margin-top: 1.18vh;">
<i class="layui-icon layui-icon-notice" style="color: #FFFFFF;"></i>
</div>
</div>
<div style="margin:1.1vh;text-align: center;">
<p style="letter-spacing:1px">小站已接入第三方登陆方式,可以使用QQ登陆哦! </p>
</div>
</div>
</div>
</div>
<br>
<!-- ********************************************************************************************************************* -->
<!-- 主页动态列表,分为图文,音乐,视频 -->
<a href="#">
<div style="background-color: #FFFFFF;">
<br>
<div class="dynamic">
<div>
<img class="dynamic_head" src="img/people.jpg" alt="">
</div>
<div>
&nbsp;&nbsp;2019-12-10
</div>
<br><br>
<s1>
<div class="starg" style="background-color: #52CC87;">
<p style="color: #FFFFFF;">&nbsp; &nbsp;#置顶#&nbsp;&nbsp; &nbsp;</p>
</div>
<div class="starg">
<p style="color: #FFFFFF;">&nbsp; &nbsp;#图文#&nbsp;&nbsp; &nbsp;</p>
</div>
<br>
</s>
<br>
<p style="letter-spacing:1px">我的小站正式上线 欢迎各位光临!</p>
<br>
<img style="width: 100%;" src="img/1.jpg" >
<br>
</div>
<br>
<div class="dynamic">
<img class="dynamic_dow" src="img/liaotian.svg" alt=""> <span>999</span>
&nbsp;&nbsp;&nbsp;
<img class="dynamic_dow" src="img/redupaixu.svg" alt=""> <span>999</span>
</div>
<br>
<hr style="width: 95%;margin: auto;">
<br>
</div>
</a>
<!-- ********************************************************************************************************************* -->
<a href="#" onclick="return check()">
<div style="background-color: #FFFFFF;">
<br>
<div class="dynamic">
<div>
<img class="dynamic_head" src="img/people.jpg" alt="">
</div>
<div>
&nbsp;&nbsp;2019-12-10
</div>
<br><br>
<s1>
<div class="starg">
<p style="color: #FFFFFF;">&nbsp; &nbsp;#视频#&nbsp;&nbsp; &nbsp;</p>
</div>
<br>
</s>
<br>
<p style="letter-spacing:1px">放个小视频</p>
<br>
<video title="video" src="
http://image.jxfcwl.top/myblog-video/4e59689b3cabb9a038b12b59ab2b78b1_1280x720.mp4
" width="98%" controls ></video>
</div>
<br>
<div class="dynamic">
<img class="dynamic_dow" src="img/liaotian.svg" alt=""> <span>999</span>
&nbsp;&nbsp;&nbsp;
<img class="dynamic_dow" src="img/redupaixu.svg" alt=""> <span>999</span>
</div>
<br>
<hr style="width: 95%;margin: auto;">
<br>
</div>
</a>
</div>
<div class="below-right">
<div style="background: #FFFFFF;">
<br>
<div id="circle" style="background-color: #FC625D;"></div>
<div id="circle" style="background-color: #FDBC40;"></div>
<div id="circle" style="background-color: #35CD4B;"></div>
<div class="subtitle">
&nbsp;&nbsp;个人信息
</div>
<br>
<div class="message">
<p><i class="layui-icon layui-icon-username"></i>&nbsp;昵称:小陈</p>
<p><i class="layui-icon layui-icon-male"></i>&nbsp;性别:男</p>
<p><i class="layui-icon layui-icon-date"></i>&nbsp;年龄:1999-01-15</p>
<p><i class="layui-icon layui-icon-login-qq"></i>&nbsp;QQ:2502906272</p>
</div>
<br>
<br>
</div>
<br>
<div style="background-color: #FFFFFF">
<br>
<div id="circle" style="background-color: #FC625D;"></div>
<div id="circle" style="background-color: #FDBC40;"></div>
<div id="circle" style="background-color: #35CD4B;"></div>
<div class="subtitle">
&nbsp;&nbsp;动态
</div>
<!-- 这里的flex布局是居中,你可以在main.css中搜索一下 live 然后修改方向,我个人比较喜欢居中,哈哈 -->
<div class="live">
<a href="#"><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1198854719,4294312191&fm=11&gp=0.jpg" alt="图片加载失败"></a>
<a href="#"><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2697257871,2645712076&fm=11&gp=0.jpg" alt="图片加载失败"></a>
<a href="#"><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2338069061,770258175&fm=11&gp=0.jpg" alt="图片加载失败"></a>
</div>
<br>
</div>
<br>
<div style="background-color: #FFFFFF">
<br>
<div id="circle" style="background-color: #FC625D;"></div>
<div id="circle" style="background-color: #FDBC40;"></div>
<div id="circle" style="background-color: #35CD4B;"></div>
<div class="subtitle">
&nbsp;&nbsp;最新评论
</div>
<div class="comment">
<a href="#"><img class="new_comment" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1198854719,4294312191&fm=11&gp=0.jpg" alt="图片加载失败"></a>
<a href="#"><img class="new_comment" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2697257871,2645712076&fm=11&gp=0.jpg" alt="图片加载失败"></a>
<a href="#"><img class="new_comment" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2338069061,770258175&fm=11&gp=0.jpg" alt="图片加载失败"></a>
<a href="#"><img class="new_comment" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1198854719,4294312191&fm=11&gp=0.jpg" alt="图片加载失败"></a>
<a href="#"><img class="new_comment" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2697257871,2645712076&fm=11&gp=0.jpg" alt="图片加载失败"></a>
<a href="#"><img class="new_comment" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2338069061,770258175&fm=11&gp=0.jpg" alt="图片加载失败"></a>
<a href="#"><img class="new_comment" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1198854719,4294312191&fm=11&gp=0.jpg" alt="图片加载失败"></a>
<a href="#"><img class="new_comment" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2697257871,2645712076&fm=11&gp=0.jpg" alt="图片加载失败"></a>
<a href="#"><img class="new_comment" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2338069061,770258175&fm=11&gp=0.jpg" alt="图片加载失败"></a>
</div>
<br>
</div>
<br>
<!-- 每日音乐 -->
<div style="background: #FFFFFF;">
<br>
<div id="circle" style="background-color: #FC625D;"></div>
<div id="circle" style="background-color: #FDBC40;"></div>
<div id="circle" style="background-color: #35CD4B;"></div>
<div class="subtitle">
&nbsp;&nbsp;每日音乐
</div>
<br>
<div style="text-align: center;">
<img style="width: 90%;" src="img/20180723133705_eimsg.gif" alt="">
<br><br>
<audio class="audio" style="width: 90%;text-align: center;" src="https://img.jinsom.cn/user_files/12551/bg-music/music_1530776683.mp3" controls></audio>
</div>
<br>
<br>
</div>
</div>
</div>
<br>
<div style="text-align: center;">
<span>Sunshine&nbsp;人来人往&nbsp;&nbsp;&nbsp;</span><a href="http://beian.miit.gov.cn/" style="color: #6D6D6D;">苏ICP备19025063号-2</a>
</div>
<br>
<div id="aplayer"></div>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/main.js"></script>
<script src="layui/layui.js"></script>
<script src="js/APlayer.min.js"></script>
<script>
layui.use('carousel', function(){
var carousel = layui.carousel;
//建造实例
carousel.render({
elem: '#lunbo'
,width: '100%' ,//设置容器宽度,
height:'85%',
arrow:"none", // 是否显示箭头
indicator:"none" //是否显示点点点
,anim: 'updown' //切换动画方式
});
});
layui.use('carousel', function(){
var carousel = layui.carousel;
//建造实例
carousel.render({
elem: '#inform'
,width: '100%' ,//设置容器宽度,
height:'38px',
arrow:"none", // 是否显示箭头
indicator:"none" //是否显示点点点
,anim: 'updown' //切换动画方式
});
});
// 阻止a标签中video元素跳转
function check(e){
return (e||event).target.title!="video";
}
// 播放器
const ap = new APlayer({
container: document.getElementById('aplayer'),
fixed: true,
audio: [
{
name: '长生诀',
artist: '未知',
url: 'http://image.jxfcwl.top/myblog-video/%E8%A5%BF%E7%93%9CJUN%20-%20%E9%95%BF%E7%94%9F%E8%AF%80.mp3',
cover: 'http://image.jxfcwl.top/myblog-video/9c774d91gy1ft4lhr5vbmg20jp08okbw.gif'
}
]
});
</script>
</html>
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
HTML
1
https://gitee.com/no_smoking/blogs-template.git
git@gitee.com:no_smoking/blogs-template.git
no_smoking
blogs-template
个人博客页面模板
master

搜索帮助