这样的jsp文件怎么写，html的

img

下面是我写的

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin: 0px auto;
    height: auto;
    width: 800px;
    border: 1px solid #006633;
}
#header {
    height: 100px;
    width: 800px;
    background-image: url(plane.jpg);
    background-repeat: no-repeat;
    margin: 0px 0px 3px 0px;
}
#navigator { /*定义一个导航栏的长盒子*/
    height: 25px;
    width: 800px;
    font-size: 14px;
    list-style-type: none; /*让nav这个大盒子下面的小盒子LI列表样式不显示,这对于标准浏览器很重要*/
}

#navigator li {
    float: left; /*让LI这些小盒子左对齐*/
}

#navigator li a {
    color: #000000;
    text-decoration: none; /*让LI盒子里面的链接样式没有下滑线*/
    padding-top: 4px;
    display: block; /*让LI里面的链接块状呈现，就像一个按钮，而不必一定要点中链接文字才起作用*/
    width: 131px;
    height: 22px;
    text-align: center;
    background-color: #009966;
    margin-left: 2px;
}

#navigator li a:hover {
    background-color: #006633; /*鼠标移到链接盒子上面改变盒子背景色*/
    color: #FFFFFF;
}
#content {
    height: auto;
    width: 780px;
    line-height: 1.5em;
    padding: 10px;
}

#content p {
    text-indent: 2em;
}

#content h3 {
    font-size: 16px;
    margin: 10px;
}
#footer {
    height: 50px;
    width: 780px;
    line-height: 2em;
    text-align: center;
    background-color: #009966;
    padding: 10px;
}
* {
        margin: 0px;
        padding: 0px;
}
</style>
</head>
<body>
<body>
    <div id="header"></div>
    <div id="navigator">
        <ul id="navigator">
            <li><a href="#">水闸名</a></li>
            <li><a href="#">ID</a></li>
            <li><a href="#">建成时间</a></li>
            <li><a href="#">负责人</a></li>
            <li><a href="#">操作</a></li>
        </ul>
    </div>
    <br>
    <div id="navigator" class="Center">
        <ul id="navigator">
            <li><a href="#">水闸名</a></li>
            <li><a href="#">ID</a></li>
            <li><a href="#">建成时间</a></li>
            <li><a href="#">负责人</a></li>
            <li><a href="#">操作</a></li>
        </ul>
    </div>
    <br>
    <div id="content">
        <h3>前言</h3>
        <p>CSS是英文Cascading Style Sheet的缩写，又称为“层叠样式表”，简称为样式表。它是W3C定义的标准，一种用来为结构化文档（如HTML文档）添加样式（字体、间距和背景等）的计算机语言。</p>
        <h3>理解DIV+CSS布局</h3>
        <p>简单地说DIV+CSS(DIV CSS)被称为“WEB标准”中常用术语之一。首先认识DIV是用于搭建html网页结构（框架）标签，再认识CSS是用于创建网页表现（样式/美化）样式表统称，通过css来设置div标签样式，这一切常常我们称之为div+css。
        </p>
    </div>
    <div id="footer">
        <p>关于| 广告服务| 招聘| 客服中心| Q Q留言| 网站管理| 会员登录| 购物车</p>
        <p>Copyright ©清华大学出版社</p>
    </div>
</body>
</body>
</html>

用el表达式
for each循环