间隔比较久了，所以我们先来看一下目前首页的外观：
右下方的 空白浅蓝区域，我们留着之后使用，放入一些公告，未读消息，当前任务等等。
现在来看左上方区域，用的还是我们早期的设计，一大片空白和一句位置不好的欢迎语，所以本节我们来简单改造下左上顶 区域。
打开Home.html,找到这句欢迎语，给它删掉：
那么我们要放入什么来进行替换呢？其实放什么都无所谓，只要自己觉得好看就行。作者想的是 放一个简单的功能，比如搜索功能。 搜索接口/搜索功能/搜索项目 等等。这样既好看，又增加实用效果，可以再次提高当前平台的能力。
搜索框和搜索按钮，我们可以去找一个比较好看的 摘抄下来即可：
大家直接复制哈：
<div class="search bar" style="position: absolute;top: 10px; left: 490px;width: -webkit-calc(100% - 980px)"> <div id="search_button" > <strong> <input class="search_input" id="search_input" placeholder="输入搜索关键词" name="keys" type="text" value="{{keys}}"> </strong> <button class="search_button" id="search_submit" onclick="search()" style="width: 100px"> <strong><font size="5">搜 索</font></strong> </button> </div> </div>
这是一个搜索框，我也是直接抄的，所以没必要去手写。
然后不要忘了样式，样式一般都放在head里面的style里：
我们之前有个circlechart，现在再添加下列这些，同样复制即可：
.search_input { width:100%; height:42px; padding-left:13px; } .search_button { height:42px; /*width:42px;*/ cursor:pointer; position:absolute; } .bar input { border:3px solid #66defd; border-radius:5px; background:transparent; top:0; right:0; } .bar button { background-color: #66defd;; /*background: linear-gradient(to right, #be0063, #ffcbd4);*/ border-radius:0 5px 5px 0; width:160px; top:0; right:0; color: white; } .bar button:before { font-size:13px; color:#a7eded; } button { border:none; outline:none; }
然后现在来看看效果：
现在我们需要来实现这个搜索功能。
首先是设计：
- 搜索什么？
搜索接口名/接口url/项目名/用户名下项目 等。
2.搜索结果展示？
在页面弄个弹层来展示，内容为清一色的超链接，文案为目标结果和简单信息展示。
在Home.html中，我们在搜索框下面，新建一个div作为 新的搜索结果弹层。
<div style="z-index: 999;position: absolute;top: 80px;left: 15%;width: 70%;min-height: 200px; background:linear-gradient(to bottom,#b8eafd,#e8ffdb) ;opacity:0.8;padding: 5px; border-radius: 2px;box-shadow: 4px 4px 8px #bcbcbc"> <strong> <a href="">我是搜索结果1</a> <br> <a href="">我是搜索结果2</a> <br> </strong> </div>
预览效果如下：
本节内容到此结束，下一节我们要实现这个搜索的实际功能.
