您的位置：首页 > 其它

ElasticSearch 6.x 学习笔记：37.新闻搜索之页面设计

2018-02-25 17:42 537 查看

1、搜索页面

（1）JSP页面

<%--
Created by IntelliJ IDEA.
User: Chengyuqiang
Date: 2018/2/25 0025
Time: 17:24
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>ES搜索</title>
<link type="text/css" rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="main">
<h1>ES搜索</h1>
<div class="box">
<form name="form1" action="/search.do" method="post">
<input type="search" name="query">
<input type="submit" value="ES一下">
</form>
</div>
</div>
</body>
</html>

（2）css文件

body{
margin: 0 auto;
}
.main{
border: 1px solid #cccccc;
width:600px;
height: 400px;
margin: 100px auto;
}
.main h1{
text-align: center;
color: chartreuse;
margin: 50px auto;
}
.box{
width:80%;
height: 30px;
border: 1px solid chartreuse;
margin: 50px auto;
}
.box input[type="search"]{
height: 30px;
width: 85%;
outline: none;
border :0;
font-size: 18px;
}
.box input[type="submit"]{
height: 30px;
width: 14%;
outline: none;
border :0;
background-color: chartreuse;
color: white;
}

（3）页面效果

2、分页页面

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航