智言个人博客刚做好的，因为要不断的练习，所以在前端这块还在继续努力，希望朝着自己的全栈更进一步。
HTML代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>智言个人博客</title>
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="kkui">
<!-- 顶部top -->
<div class="kkui-top">
<a href="#">关注我们</a>
<a href="#">注册</a>
<a href="#">登录</a>
</div>
<div class="kkui-navs">
<!-- logo -->
<div class="kkui-logo">
<a href="javascript:;" id="app-subnav"><i class="fa fa-bars" aria-hidden="true"></i></a>
<a href="http://www.asni.cn"><img src="images/logo.svg" alt=""></a>
</div>
<!-- nav -->
<nav id="kkui-nav">
<ul>
<li><a href="#" class="item">首页</a></li>
<li>
<a href="#"><i class="fa fa-html5"></i> 前端 <i class="fa fa-angle-down"></i></a>
<ul class="subnav" id="subnav-1">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">Vue.js</a></li>
<li><a href="#">Webpack</a></li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-code"></i> 后台 <i class="fa fa-angle-down"></i></a>
<ul class="subnav" id="subnav-2">
<li><a href="#">PHP</a></li>
<li><a href="#">node.js</a></li>
<li><a href="#">MongoDB</a></li>
<li><a href="#">JAVA</a></li>
<li><a href="#">MySQL</a></li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-picture-o" aria-hidden="true"></i> 美图 <i class="fa fa-angle-down"></i></a>
<ul class="subnav" id="subnav-3">
<li><a href="#">清新</a></li>
<li><a href="#">唯美</a></li>
<li><a href="#">复古</a></li>
<li><a href="#">非主流</a></li>
<li><a href="#">壁纸</a></li>
</ul>
</li>
<li>
<a href="#"><i class="fa fa-pinterest-p" aria-hidden="true"></i> 美文 <i class="fa fa-angle-down"></i></a>
<ul class="subnav" id="subnav-2">
<li><a href="#">生活</a></li>
<li><a href="#">经典</a></li>
<li><a href="#">励志</a></li>
<li><a href="#">课文</a></li>
<li><a href="#">其他</a></li>
</ul>
</li>
<li><a href="#"><i class="fa fa-question" aria-hidden="true"></i> 问答中心</a></li>
</ul>
</nav>
</div>
</div>
<div id="kkui-zz">
</div>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/asni.js" charset="utf-8"></script>
</body>
</html>
DEMO地址：https://www.asni.cn/demo/demo7/index.html
整体使用了jquery框架，也是进一步锻炼它，还有font awesome icons，整体运行起来没有问题，目前只做了420px以下的响应，其他均还没有做完，如果大家发现有什么问题请在此帖留言，也可以在问答中心提问，谢谢。
还不是很完善，还有些地方需要优化！
以下为截图：
评论前必须登录！
注册