前言
前端的朋友们，福利来了，今天小编给大家带来了一款简洁博客模板，模板都是前端前沿技术+部分动画实现。欢迎找我，我将全部html模板代码分享给大家。
源码下载：
https://www.githubs.xyz/boot/?id=172
效果图解
视频演示
https://githubs.xyz/show/172.mp4
代码实现
index.html部分代码
<!-- 获取全部模板源码: gitee典抗姆/hadluo/html_code.git -->
<!-- 获取全部模板源码: gitee典抗姆/hadluo/html_code.git -->
<body class="user-select">
<header class="header">
<nav class="navbar navbar-default" id="navbar">
<div class="container">
<div class="header-topbar hidden-xs link-border">
<ul class="site-nav topmenu">
<li><a href="tags.html">标签云</a></li>
<li><a href="readers.html" rel="nofollow">读者墙</a></li>
<li><a href="links.html" rel="nofollow">友情链接</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" rel="nofollow">关注本站 <span class="caret"></span></a>
<ul class="dropdown-menu header-topbar-dropdown-menu">
<li><a data-toggle="modal" data-target="#WeChat" rel="nofollow"><i class="fa fa-weixin"></i> 微信</a></li>
<li><a href="#" rel="nofollow"><i class="fa fa-weibo"></i> 微博</a></li>
<li><a data-toggle="modal" data-target="#areDeveloping" rel="nofollow"><i class="fa fa-rss"></i> RSS</a></li>
</ul>
</li>
</ul>
<a data-toggle="modal" data-target="#loginModal" class="login" rel="nofollow">Hi,请登录</a> <a href="javascript:;" class="register" rel="nofollow">我要注册</a> <a href="" rel="nofollow">找回密码</a> </div>
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#header-navbar" aria-expanded="false"> <span class="sr-only"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<h1 class="logo hvr-bounce-in"><a href="" title="">博客logo</a></h1>
</div>
<div class="collapse navbar-collapse" id="header-navbar">
<ul class="nav navbar-nav navbar-right">
<li class="hidden-index active"><a data-cont="程序员首页" href="index.html">程序员首页</a></li>
<li><a href="category.html">前端技术</a></li>
<li><a href="category.html">后端程序</a></li>
<li><a href="category.html">管理系统</a></li>
<li><a href="category.html">授人以渔</a></li>
<li><a href="category.html">程序人生</a></li>
</ul>
<form class="navbar-form visible-xs" action="/Search" method="post">
<div class="input-group">
<input type="text" name="keyword" class="form-control" placeholder="请输入关键字" maxlength="20" autocomplete="off">
<span class="input-group-btn">
<button class="btn btn-default btn-search" name="search" type="submit">搜索</button>
</span> </div>
</form>
</div>
</div>
</nav>
</header>
<section class="container">
<div class="content-wrap">
<div class="content">
<div class="jumbotron">
<h1>欢迎访问程序员博客</h1>
<p>在这里可以看到前端技术，后端程序，网站内容管理系统等文章，还有我的程序人生！</p>
</div>
<div id="focusslide" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#focusslide" data-slide-to="0" class="active"></li>
<li data-target="#focusslide" data-slide-to="1"></li>
<li data-target="#focusslide" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active"> <a href="" target="_blank"><img src="images/banner/banner_01.jpg" alt="" class="img-responsive"></a>
<!--<div class="carousel-caption"> </div>-->
</div>
<div class="item"> <a href="" target="_blank"><img src="images/banner/banner_02.jpg" alt="" class="img-responsive"></a>
<!--<div class="carousel-caption"> </div>-->
</div>
<div class="item"> <a href="" target="_blank"><img src="images/banner/banner_03.jpg" alt="" class="img-responsive"></a>
<!--<div class="carousel-caption"> </div>-->
</div>
</div>
<a class="left carousel-control" href="#focusslide" role="button" data-slide="prev" rel="nofollow"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">上一个</span> </a> <a class="right carousel-control" href="#focusslide" role="button" data-slide="next" rel="nofollow"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">下一个</span> </a> </div>
<article class="excerpt-minic excerpt-minic-index">
<h2><span class="red">【今日推荐】</span><a href="" title="">从下载看我们该如何做事</a></h2>
<p class="note">一次我下载几部电影，发现如果同时下载多部要等上几个小时，然后我把最想看的做个先后排序，去设置同时只能下载一部，结果是不到一杯茶功夫我就能看到最想看的电影。 这就像我们一段时间内想干成很多事情，是同时干还是有选择有顺序的干，结果很不一样。同时...</p>
</article>
<div class="title">结尾语
我是分享教程源码的老罗，欢迎关注！
