如何把anqicms的搜索框从导航里面移动到右侧边栏？

问：如何把anqicms的搜索框从导航里面移动到右侧边栏？

anqicms服务网答：在新版的anqicms3.4.1的默认模板由以前企业网站模板改成了带付费功能的资讯模板了，anqicms服务网其实早几天，就开始使用了，并且成功的把搜索框，从导航栏移动到了，右侧的边栏的顶部了。

本来导航的宽度就有限，放栏目导航都不够用，搜索框还占用，肯定不好啊，于是anqicms服务网站长杨泽业，就开始进行移动，见过不断的努力，终于移动成功了，现在把移动的方法和修改好的代码，放出来，供有需求的用户参考。

1、剪切导航中的代码

在导航模板文件base.html这个模板中，在低52-57行的代码进行剪切，代码如下：

<li class="nav-search">
<div class="search-field" id="search-field">
<form method="get" action="/search">
<input name="q" class="search-input" placeholder="搜索" />
<button class="search-btn"><svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M448 85.333333a362.666667 362.666667 0 0 1 284.842667 587.178667l193.28 193.28a42.666667 42.666667 0 0 1-60.288 60.373333l-193.365334-193.28A362.666667 362.666667 0 1 1 448 85.333333z m0 85.333334a277.333333 277.333333 0 1 0 0 554.666666 277.333333 277.333333 0 0 0 0-554.666666z" fill="#999999"></path></svg></button>
</form>
</div>
</li>

2、在右侧边栏的模板中，粘贴代码：

右侧边栏的模板是 partial/sidebar.html

打开这个模板，我们把上面剪切的代码，粘贴在第3行，即前两行的内容还是原来的。

全部代码如下：

<div class="sidebar">
 <div class="aside-list">
<div class="nav-search">
<div class="search-field" id="search-field">
<form method="get" action="/search">
<input name="q" class="search-input" placeholder="搜索" />
<button class="search-btn"><svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M448 85.333333a362.666667 362.666667 0 0 1 284.842667 587.178667l193.28 193.28a42.666667 42.666667 0 0 1-60.288 60.373333l-193.365334-193.28A362.666667 362.666667 0 1 1 448 85.333333z m0 85.333334a277.333333 277.333333 0 1 0 0 554.666666 277.333333 277.333333 0 0 0 0-554.666666z" fill="#999999"></path></svg></button>
</form>
</div>
</div>
</div>

如果大家注意看代码的话，其实把li这个标签换行的div的标签。li标签是排列，div是框。

3、修改css样式文件，让css展示，符合右侧边栏的样式。

打开文件css/style.css大约在246-251下面的这个代码：

.search-field {
  background-color: #f2f2f2;
  width: 140px;
  border-radius: 16px;
  padding: 0 10px;
}

改成：

.search-field {
  background-color: #fff;
  width: 280px;
  border-radius: 16px;
  padding: 0 10px;
}

改动的地方就是2个值，一个是把背景颜色#f2f2f2改成了#fff，宽度140px改成了280px。

这样操作以后就完成了修改，不要小看这么简单的修改，我要摸索，试值，就花了好多的时间。你们 看教程 修改，就是几分钟而已。

好了，如何把anqicms的搜索框从导航里面移动到右侧边栏就讲解完毕，敬请查看本站其他的anqicms教程。