请同学们先浏览PPT,这是一个任务点哈！完成后有惊喜哟！
使用JSP基本语法，结合静态网页技术（HTML+CSS），构建网站主页。
head.jsp:
<%@page pageEncoding="UTF-8"%>
<div class="div_01">
<div class="div_02">
您好，欢迎光临本公司门户网站，<a href="jsp/login.jsp">[请登录]</a>,新用户！ <a href="#">[免费注册]</a>
</div>
<div class="div_03">A公司门户网站LOGO</div>
<div class="div_04">
<a href="#">首页</a> | <a href="#">公司新闻</a> | <a
href="#">产品展示</a> | <a href="#">在线咨询</a> | <a
href="#">监督投诉</a> | <a href="#">员工之窗</a> | <a
href="#">联系我们</a>
</div>
</div>
foot.jsp:
<%@page pageEncoding="UTF-8"%>
<div class="div_08">
©公司版权所有，并保留所有权利。<a href="#">【管理员入口】</a><br /> 公司地址：公司地址123
</div>
index.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>公司门户网站</title>
<link type="text/css" rel="styleSheet" href="css/index.css" />
</head>
<body>
<jsp:include page="head.jsp"/>
<div class="div_05">
<div class="div_05_01">新闻资讯</div>
<div class="div_05_02">
<ul>
<li>公司新闻</li>
<li>同行新闻</li>
<li>国内新闻</li>
</ul>
</div>
<div class="div_05_01">企业风采</div>
<div class="div_05_02">
<ul>
<li>公司新闻</li>
<li>同行新闻</li>
<li>国内新闻</li>
</ul>
</div>
<div class="div_05_01">友情链接</div>
<div class="div_05_02">
<ul>
<li>新浪网</li>
<li>搜狐网</li>
<li>百度网</li>
</ul>
</div>
</div>
<div class="div_06">
<div class="div_06_01">最新资讯
更多>></div>
<br /> ●
最新新闻1......................................................2016-8-8<br />
<br /> ●
最新新闻1......................................................2016-8-8<br />
<br /> ●
最新新闻1......................................................2016-8-8<br />
<br /> ●
最新新闻1......................................................2016-8-8<br />
<br /> ●
最新新闻1......................................................2016-8-8<br />
</div>
<br />
<div class="div_06">
<div class="div_06_01">最新资讯
更多>></div>
<br /> ●
最新新闻1......................................................2016-8-8<br />
<br /> ●
最新新闻1......................................................2016-8-8<br />
<br /> ●
最新新闻1......................................................2016-8-8<br />
<br /> ●
最新新闻1......................................................2016-8-8<br />
<br /> ●
最新新闻1......................................................2016-8-8<br />
</div>
<div class="div_07">
<div class="div_07_01">在线交流</div>
<div class="div_07_02">
<ul>
<li>在线咨询</li>
<li>监督投诉</li>
<li>给我留言</li>
</ul>
</div>
<br />
<div class="div_07_03">
<b>联系我们</b>
</div>
<br /> <br />
<div class="div_07_04">
客服电话:123456<br /> 客服qq:654321<br /> 电子邮件:654321@qq.com<br />
全国统一热线:0731-12345678<br /> 如有问题请直接咨询客服<br /> 邮件回复时间为一个工作日内<br />
</div>
</div>
<jsp:include page="foot.jsp"/>
</body>
</html>
index.css:
body {
width: 1100px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.div_01 {
background-color: #aaaaaa;
border: 2px solid #888888;
}
.div_02 {
text-align: right;
}
.div_03 {
text-align: left;
font-size: 30pt;
font-weight: bold;
}
.div_04 {
padding-top: 20px;
text-align: center;
}
.div_04 a:link {
font-size: 15pt;
font-family: 宋体;
text-align: left;
text-decoration: underline;
TEXT-DECORATION: none;
}
.div_02 a {
font-size: 15pt;
color: red;
font-family: 宋体;
text-decoration: underline;
TEXT-DECORATION: none;
font-weight: bold;
}
.div_05 {
float: left;
width: 190px;
height: 510px;
border: solid #eeeeee;
margin-top: 10px;
line-height: 30px;
background-color: #eeeeee;
}
.div_05_01 {
width: 180px;
height: 30px;
background-color: #888888;
left: 50%;
top: 50%;
margin-left: 5px;
margin-top: 5px;
color: #eeeeee;
font-weight: bold;
}
.div_05 li {
list-style-image: url("image/ima_01.png");
margin-bottom: 2px;
}
.div_05_02 {
border: 1px solid #bbbbbb;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 10px;
}
.div_06 {
float: left;
margin-top: 10px;
margin-left: 28px;
width: 650px;
}
.div_06_01 {
background-color: #dddddd;
}
.div_07 {
float: right;
width: 190px;
height: 510px;
border: solid #eeeeee;
background-color: #eeeeee;
margin-top: -198px;
}
.div_07_01 {
width: 180px;
height: 25px;
background-color: #888888;
left: 50%;
top: 50%;
margin-left: 5px;
margin-top: 5px;
color: #eeeeee;
font-weight: bold;
padding-top: 5px;
}
.div_07 li {
list-style-image: url("image/ima_01.png");
margin-bottom: 2px;
}
.div_07_02 {
border: 1px solid #bbbbbb;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 10px;
padding-bottom: 20px;
}
.div_07_03 {
display: inline-block;
vertical-align: top;
font-size: 18pt;
line-height: 20px;
}
.div_07_04 {
text-align: left;
font-size: 10pt;
font-family: cursive;
line-height: 22pt;
}
.div_08 {
background-color: #aaaaaa;
border: 2px solid #888888;
width: 1100px;
margin-top: 509px;
}
.div_08 a {
font-family: 宋体;
text-align: left;
text-decoration: underline;
TEXT-DECORATION: none;
}
