1.新的目录结构 

我们的网站首页目前已经拥有了顶部的导航栏,以及上方的banner轮播图。至于网站的主体部分,我们先不着急去写,这一节把目录重新整一整。为什么要整理目录结构呢?那是因为像网站的头部,不管是哪个页面都是需要的,它属于一种公共的页面,因此,我们需要把它拆分出去。

在WebContent目录添加一个common文件夹。

image.png

然后,在里面新建一个header.jsp。

image.png

把页面中除了这一行保留,其他全部删掉。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

注意编码格式,如果不是UTF-8,就改成UTF-8。接着,回到index.jsp,把顶部的代码全部搬到header.jsp。

image.png

header.jsp就变成了这样:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
	<div class="header">
	    <div class='logo'>原创文字</div>
	    <ul>
	        <li class='first'><a href="javascript:void(0)">首页</a></li>
	        <li><a href="javascript:void(0)">原创故事</a></li>
	        <li><a href="javascript:void(0)">热门专题</li>
	        <li><a href="javascript:void(0)">欣赏美文</li>
	        <li><a href="javascript:void(0)">赞助</a></li>
	    </ul>
	    
	    <div class='login'>
			<span><a href="javascript:void(0)">登陆</a></span>  
			<span>|</span> 
			<span><a href="javascript:void(0)">注册</a></span>
		</div>
	</div>

接着,在index.jsp中用jsp标签导入header.jsp


<%@include file="common/header.jsp" %>

部署项目,启动,查看效果:

image.png

重新调整一下banner的css样式:

.banner {
    height: 380px ;
    overflow: hidden ;
    position: relative;
    overflow: hidden;
}

取消灰边和缩小margin-top。

至于css,还是暂时写在index.jsp中,最后再转移到外部css文件。为什么要这样呢?那是因为eclipse发布项目的时候,浏览器会优先缓存外部的css文件,这样就会导致一个烦人的情况,你修改了css但是浏览器死活不见效的情况。因此,在开发阶段,我们还是把css写在页面里面吧。


2.登录页面绘制 

这一节在之前的教程中是没有的,因为是重置精编版,所以我也就打算详细讲解一下登录页面的绘制了。

OK,让我们开始,首先,在WebContent目录中新建一个login.jsp。

image.png

登录页面自然也需要顶部的导航栏,我们采用相同的方法引入header.jsp。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登录页面</title>
</head>
<body>
	<!-- 头部页面 -->
	<%@include file="common/header.jsp" %>

</body>
</html>

效果:

image.png

咦,怎么样式全没了?那是因为,我们顶部导航栏的样式是写在index.jsp中的,所以这边引不到。ok,既然如此,我们干脆把和header相关的css单独拿出来。在这里新建一个header.css

image.png

把相关的代码贴进去。

.header {
	height: 72px;
	background: #458fce;
}

.header .logo {
	float: left;
	color: #fff;
	line-height: 72px;
	font-size: 30px;
	margin-left: 20px;
	display: inline-block;
	font-weight: 500;
}

ul li {
	list-style: none;
}

.header ul li {
	float: left;
}

.header ul li.first {
	margin-left: 30px;
}

.header ul li {
	float: left;
	color: #fff;
	display: inline-block;
	width: 112px;
	height: 72px;
	text-align: center;
	line-height: 72px;
	cursor: pointer;
}

a {    
    color: #fff ;    
    text-decoration: none ;
}

.header ul li:hover {    
    background:#74b0e2 ;
}

.header .login {
	float: right ; 
	color: #fff ;
	line-height: 72px ;
	margin-right: 20px ;
}

.header ul li.first {
    margin-left: 30px ;
    background:#74b0e2 ;
}

然后在index.jsp和login.jsp分别引入header.css

<link rel="stylesheet" href="static/css/header.css" />

效果就出来了,但是还有个问题,login.jsp中默认的外边距和内边距没有去除,换句话说,就是没有

* {
	padding: 0;
	margin: 0;
	font-family: "微软雅黑";
}

怎么办呢,干脆再封装一个public.css,把一些通用的样式也封装起来。

image.png

把刚才的css代码贴进去,然后用同样的方式引入。

<link rel="stylesheet" href="static/css/public.css" />

效果就出来啦。

回到login.jsp,在里面画一个登录面板。

因为是重制版,这一次要画的更加漂亮一些,采用layUI框架。具体如何绘制,我们在下一节讲。