myblog/templates/header.html
myminwang 0eb8fc3169 DEMO
2018-07-04 20:07:00 +08:00

94 lines
4.2 KiB
HTML
Executable File

<header class="myheader">
<div class="top">
<!--头像左边部分-->
<div class="top-left">
<div class="logo"><a href="/"><img src="/static/images/h.gif"/></a></div>
{# <div class="logo"><a href="#"><img src="/static/images/logo.png"/></a></div>#}
<!--滚动消息-->
<div class="web-xiaoxi">
<i class="el-speaker"></i>
<ul class="mulitline">
<li>正在最后的优化</li>
<li>完成后将放出模板</li>
<li>完美自适应手机</li>
</ul>
</div>
<!--END 消息 -->
<!--手机菜单按钮-->
<div class="mobile-nav"><i class="el-lines"></i><i class="el-remove"></i></div>
</div>
<!--电脑导航开始-->
<nav class="mynav">
<ul class="orange-text">
<li class=""><a href="{% url "blog:index" %}">首页</a></li>
<li><a href="{% url "blog:about" %}">关于</a></li>
<li><a href="{% url "blog:article" 0 %}">博客</a></li>
<li class='drop'>
<a href="JavaScript:;">分类<i class='el-chevron-down'></i></a>
<div class="drop-nav orange-text ">
<ul>
{% for category in category_list %}
<li><a href="{% url "blog:article" category.id %}">{{ category.name }}</a></li>
{% endfor %}
</ul>
</div>
</li>
<li><a href="{% url "blog:archive" %}">归档</a></li>
<li><a href="{% url "blog:link" %}">链接</a></li>
<li><a href="{% url "blog:message" %}">留言</a></li>
</ul>
</nav>
<!--这里是手机导航-->
<div class="mob-menu">
<!--手机顶部搜索-->
<div class="search ">
<form action="{% url "blog:search" %}" method="get">
<div class="search-index">
<input name="name" type="text" placeholder="请输入关键字" onfocus="this.placeholder=''"
onblur="this.placeholder='请输入关键字'"/>
<i class="el-search"><input value=" " type="submit"/></i>
</div>
</form>
</div>
<!--手机下拉菜单-->
<ul>
<li><a href="{% url "blog:index" %}">首页</a></li>
<li><a href="{% url "blog:about" %}">关于</a></li>
<li><a href="{% url "blog:article" pk=0 %}">博客</a></li>
<li class='mob-drop'>
<a href="javascrip:;">分类</a>
<ul class="mob-dropmenu">
{% for category in category_list %}
<li><a href="{% url "blog:article" category.id %}">{{ category.name }}</a></li>
{% endfor %}
</ul>
</li>
<li><a href="{% url "blog:archive" %}">归档</a></li>
<li><a href="{% url "blog:link" %}">链接</a></li>
<li><a href="{% url "blog:message" %}">留言</a></li>
</ul>
</div>
</div>
<!--换肤--->
<script src="/static/js/skin.js"></script>
<div class="select-skin">
<div class="skin-btn">
<a href="javascript:void(0);" class="skin-btn-open"><br></a>
</div>
<div class="skin-content">
<h1>选择风格<span class="skin-close">关闭</span></h1>
<div class="skin-content-list">
<div class="skin-list"><a href="#" onclick="setActiveStyleSheet('qingxin'); return false;" class="btn1">清新</a>
</div>
<div class="skin-list"><a href="#" onclick="setActiveStyleSheet('jianyue'); return false;" class="btn2">简约</a>
</div>
<div class="skin-list"><a href="#" onclick="setActiveStyleSheet('qingshuang'); return false;"
class="btn3">清爽</a></div>
</div>
</div>
</div>
</header>