基于javaweb 编写一个主页(多栏布局) 含有导航栏并且能实现页内导航 的代码
时间: 2024-02-25 17:53:05 浏览: 109
好的,下面是一个简单的示例代码:
1. HTML 页面代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多栏布局</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#header {
height: 50px;
background-color: #ccc;
}
#nav {
height: 30px;
background-color: #999;
}
#content {
width: 70%;
float: left;
background-color: #f5f5f5;
}
#sidebar {
width: 30%;
float: left;
background-color: #eee;
}
#footer {
height: 50px;
background-color: #ccc;
clear: both;
}
</style>
</head>
<body>
<div id="header">这是头部</div>
<div id="nav">
<ul>
<li><a href="#section1">栏目一</a></li>
<li><a href="#section2">栏目二</a></li>
<li><a href="#section3">栏目三</a></li>
</ul>
</div>
<div id="content">
<section id="section1">
<h2>栏目一</h2>
<p>这是栏目一的内容。</p>
</section>
<section id="section2">
<h2>栏目二</h2>
<p>这是栏目二的内容。</p>
</section>
<section id="section3">
<h2>栏目三</h2>
<p>这是栏目三的内容。</p>
</section>
</div>
<div id="sidebar">
<h3>侧栏</h3>
<p>这是侧栏的内容。</p>
</div>
<div id="footer">这是底部</div>
</body>
</html>
```
2. Servlet 代码:
```java
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class HomePageServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
response.getWriter().print(getHomePageHtml());
}
private String getHomePageHtml() {
// 读取 HTML 文件
String html = "";
try {
html = new String(Files.readAllBytes(Paths.get("index.html")), StandardCharsets.UTF_8);
} catch (IOException e) {
e.printStackTrace();
}
return html;
}
}
```
3. 部署到 Tomcat 上:
将 HTML 页面和 Servlet 代码打包成 WAR 文件,然后将 WAR 文件部署到 Tomcat 上即可。
阅读全文