<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="author" content="Yuan-Programmer"/>
<link rel="shortcut icon" href="img/favicon.ico">
<link rel="stylesheet" href="css/bootstrap.css" />
<!-- 导航栏样式 -->
<link rel="stylesheet" href="css/customer/daohang.css" />
<!-- 页面布局样式 -->
<link rel="stylesheet" href="css/customer/style.css" />
<!-- 页脚样式 -->
<link rel="stylesheet" href="css/customer/footer&cbl.css" />
<!-- 播放器样式 -->
<link rel="stylesheet" href="css/customer/player.min.css"/>
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/customer/index.js"></script>
<script type="text/javascript" src="js/customer/template.js"></script>
<!-- 音乐播放器JS -->
<script type="text/javascript" src="js/customer/player.min.js"></script>
<title>小袁博客</title>
</head>
<body>
<div id="main">
<!-- 导航栏 -->
<header id="header" data-spy="affix" data-offset-top="70"></header>
<div class="c">
<img class="img" src="img/home_background.jpg" />
<div class="video">
<video autoplay="autoplay" muted="muted" loop="loop">
<source type="video/mp4" src="http://r5mmmjhat.hn-bkt.clouddn.com/home_background.mp4">
</source>
</video>
</div>
<div class="cover">
<div class="container cc2">
<div class="cover2">
<div class="co0-1">
<img class="img-circle m-t-xs" src="img/b.jpg" alt="袁德伟" />
</div>
<div class="co2-2">
<span>一名大三Java开发工程师</span>
</div>
<a class="co2-3" href="home.html">跳 转 至 文 章 首 页</a>
</div>
</div>
<div class="container cc1">
<div class="cover1 col-lg-6 col-md-6 pull-right">
<div class="co0">
<img class="img-circle m-t-xs" src="img/b.jpg" alt="袁德伟" />
</div>
<div class="co2 hide" id="con">
<span>一名大三Java开发工程师<br>欢迎您来浏览我的博客</span>
</div>
<div class="co2" id="show"></div>
<a class="co3" href="home.html">
<span></span>
<span></span>
<span></span>
<span></span>
跳 转 至 文 章 首 页
</a>
</div>
</div>
<div class="container cc1">
<div class="coverA"><a href="">
<i class="glyphicon glyphicon-chevron-down"></i>
</a></div>
</div>
</div>
</div>
<!-- 页脚 -->
<div class="footer"></div>
<!-- 右侧工具 -->
<ul class="cbl">
<li><a href="#">
<div class="icon d2"><i class="i1"></i><span class="title">1971788445</span></div>
</a></li>
<i class="clearfix"></i>
<li><a href="https://blog.csdn.net/weixin_47971206" target="_blank">
<div class="icon d2"><i class="i2"></i><span class="title">CSDN博客</span></div>
</a></li>
<i class="clearfix"></i>
<li><a href="https://space.bilibili.com/1450477686" target="_blank">
<div class="icon d2"><i class="i3"></i><span class="title">B站主页</span></div>
</a></li>
<i class="clearfix"></i>
<li>
<div class="icon d4" data-toggle="tooltip" data-placement="left" title="<img src='img/appreciate.jpg' >;"
data-html="true"><i class="i4"></i></div>
</li>
</ul>
</div>
<!-- 音乐播放器 -->
<div id="player"></div>
<!-- 引入公共页面 -->
<script type="text/javascript" src="js/customer/common.js"></script>
<!-- 歌曲信息 -->
<script type="text/javascript" src="js/customer/player.js"></script>
</body>
</html>
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
视频地址:http://r5mmmjhat.hn-bkt.clouddn.com/demo-address/个人博客HTML模板视频.mp4 HTML+CSS+JS做的个人博客模板,有基本的导航栏,页脚信息,侧边鼠标悬放弹出层,同时还有小型音乐播放器,基本换歌、歌词显示等功能都有哦 页面和CSS样式和JS我都统一整理好了,导航栏、页脚等都是通过公共引入的,让页面更加简洁和更好的整理
资源推荐
资源详情
资源评论
收起资源包目录
HTML个人博客模板.zip (63个子文件)
xy-blog
css
bootstrap.css.map 380KB
bootstrap.css 143KB
customer
daohang.css 4KB
player.min.css 11KB
footer&cbl.css 3KB
example.css 651B
style.css 14KB
story.html 2KB
img
p1-25 (1).png 16KB
b.jpg 63KB
wechat.jpg 40KB
appreciate.jpg 5KB
home_background.jpg 741KB
social_icon_24x24.png 119KB
p1-25 (2).png 26KB
pic.png 11KB
error
moon.svg 7KB
rocket.svg 2KB
logo.svg 1KB
404.svg 47KB
astronaut.svg 17KB
bg_purple.png 219KB
singer-img
菊次郎的春天.png 3.88MB
Pianoboy高至豪.jpg 22KB
失眠飞行.jpg 8KB
QQ.jpg 13KB
logo.png 17KB
p1-25 (4).png 19KB
p1-25 (3).png 2KB
favicon.ico 1KB
classify.html 2KB
fonts
glyphicons-halflings-regular.woff 23KB
glyphicons-halflings-regular.woff2 18KB
glyphicons-halflings-regular.ttf 44KB
glyphicons-halflings-regular.eot 20KB
glyphicons-halflings-regular.svg 106KB
player
icon.ttf 8KB
icon.eot 8KB
icon.woff 8KB
icon.svg 17KB
index.html 4KB
js
customer
index.js 2KB
player.min.js 22KB
player.js 8KB
template.js 4KB
common.js 166B
jquery-1.11.3.js 278KB
bootstrap.js 68KB
aboutme.html 2KB
archive.html 2KB
common
footer.html 2KB
header.html 3KB
home.html 2KB
friendlink.html 2KB
video
home_background.mp4 4.71MB
Lulleaux、Kid Princess - Empty Love.mp3 20.15MB
周杰伦-稻香.mp3 25MB
Pianoboy高至豪 - The Truth That You Leave.mp3 20.08MB
接个吻,开一枪,沈以诚,薛黛霏 - 失眠飞行.mp3 21.27MB
久石譲 - Summer (夏天)(PIANO VER.).mp3 9.01MB
Arigato.mp3 6.67MB
timeline.html 2KB
message.html 2KB
共 63 条
- 1
OpenYuan开袁
- 粉丝: 1w+
- 资源: 16
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- (源码)基于Spring Boot框架的博客管理系统.zip
- (源码)基于ESP8266和Blynk的IR设备控制系统.zip
- (源码)基于Java和JSP的校园论坛系统.zip
- (源码)基于ROS Kinetic框架的AGV激光雷达导航与SLAM系统.zip
- (源码)基于PythonDjango框架的资产管理系统.zip
- (源码)基于计算机系统原理与Arduino技术的学习平台.zip
- (源码)基于SSM框架的大学消息通知系统服务端.zip
- (源码)基于Java Servlet的学生信息管理系统.zip
- (源码)基于Qt和AVR的FestosMechatronics系统终端.zip
- (源码)基于Java的DVD管理系统.zip
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
- 1
- 2
- 3
- 4
- 5
- 6
前往页