接口测试平台代码实现番外：主页改版-7
间隔比较久了，所以我们先来看一下目前首页的外观：
右下方的 空白浅蓝区域，我们留着之后使用，放入一些公告，未读消息，当前任务等等。
现在来看左上方区域，用的还是我们早期的设计，一大片空白和一句位置不好的欢迎语，所以本节我们来简单改造下左上顶 区域。
打开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>
预览效果如下：
本节内容到此结束，下一节我们要实现这个搜索的实际功能。
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2021-02-23，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
