Question

Footer.html

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>    
ul {
list-style-type: none;
padding: 20px;
overflow: hidden;
background-color: black;
width:1230px;
position: absolute;
bottom: 0;
margin: 0;
left: 0;
}
li a {
display: block;
color: white;
text-align: center;
padding: 10px;
margin:20px;
text-decoration: none;
}
.fa-facebook:hover {
  background: #3B5998;
  color: white;
}
.fa-twitter:hover {
  background: #55ACEE;
  color: white;
}
.fa-youtube:hover {
  background: #bb0000;
  color: white;
}
.fa-instagram:hover {
  background: #125688;
  color: white;
}
.fa:hover {
    opacity: 0.9;
}
</style>
<ul>
<li style="float:right;"><a href="https://www.facebook.com/" class="fa fa-facebook"></a></li>
<li style="float:right;"><a href="https://twitter.com/" class="fa fa-twitter"></a></li>
<li style="float:right;"><a href="https://www.instagram.com/?hl=en" class="fa fa-instagram"></a></li>
<li style="float:right;"><a href="https://www.youtube.com" class="fa fa-youtube"></a></li>
<li style="float:left;"><a>Copyright &copy;</a></li>

了header.html

<style>
ul {
    list-style-type: none;
    padding: 20px;
    overflow: hidden;
    background-color: black;
    position: relative;
    top: 0;
    margin: 0;
    left: 0;
    z-index: 1;
}
li{
    float:left
}
li a {
    display:block;
    color: white;
    text-align: center;
    padding: 10px;
    margin:20px;
    text-decoration: none;
}
li a:hover {
    padding: 10px;
    background-color: white;
    color:black;
}
</style>
<ul>
    <li><a href="FirstPage.jsp">HOME</a></li>
    <li><a href="About.jsp">ABOUT</a></li>
    <li><a href="Contact.jsp">CONTACT</a></li>
    <li><a href="Books.jsp">BOOKS</a></li>
    <li><a href="Register.jsp" id="l1">REGISTER</a></li>
    <li><a href="Login.jsp" style="float:right;margin:20px 0 0 500px">LOGIN</a></li>
  </ul>

FirstPage.jsp

<html>
<head>

<title>Library Management</title>

<style>

</style>
</head>
<jsp:include page="header.html"/>
<body>
I don't know
</body>
<jsp:include page="footer.html"/>
</html>

我一直在尝试在FirstPage文件中添加页眉和页脚文件，但FirstPage的输出显示整个页面的页脚文件而没有头文件。

Answer 1

header和footer html应该在<body>正文中。同时将<style>移到<head>标记内或放入外部css文件。

<html>
  <head>

    <title>Library Management</title>

    <style>

    </style>
  </head>
  <body>
    <jsp:include page="header.html"/>
     I don't know
    <jsp:include page="footer.html"/>
  </body>
</html>

<强>更新

你的风格完全搞砸了。我在两个ul个地方评论了一些css。这是一个快速修复，

<html>
<head>

<title>Library Management</title>

<style>

</style>
</head>
<body>
<style>
ul {
    list-style-type: none;
    padding: 20px;
    overflow: hidden;
    background-color: black;
/*
    position: relative;
    top: 0;
    margin: 0;
    left: 0;
*/
    z-index: 1;
}
li{
    float:left
}
li a {
    display:block;
    color: white;
    text-align: center;
    padding: 10px;
    margin:20px;
    text-decoration: none;
}
li a:hover {
    padding: 10px;
    background-color: white;
    color:black;
}
</style>
<ul>
    <li><a href="FirstPage.jsp">HOME</a></li>
    <li><a href="About.jsp">ABOUT</a></li>
    <li><a href="Contact.jsp">CONTACT</a></li>
    <li><a href="Books.jsp">BOOKS</a></li>
    <li><a href="Register.jsp" id="l1">REGISTER</a></li>
    <li><a href="Login.jsp" style="float:right;margin:20px 0 0 500px">LOGIN</a></li>
  </ul>
I don't know

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>    
ul {
list-style-type: none;
padding: 20px;
overflow: hidden;
background-color: black;
width:1230px;
/*
position: absolute;
bottom: 0;
margin: 0;
left: 0;
*/
}
li a {
display: block;
color: white;
text-align: center;
padding: 10px;
margin:20px;
text-decoration: none;
}
.fa-facebook:hover {
  background: #3B5998;
  color: white;
}
.fa-twitter:hover {
  background: #55ACEE;
  color: white;
}
.fa-youtube:hover {
  background: #bb0000;
  color: white;
}
.fa-instagram:hover {
  background: #125688;
  color: white;
}
.fa:hover {
    opacity: 0.9;
}
</style>
<ul>
<li style="float:right;"><a href="https://www.facebook.com/" class="fa fa-facebook"></a></li>
<li style="float:right;"><a href="https://twitter.com/" class="fa fa-twitter"></a></li>
<li style="float:right;"><a href="https://www.instagram.com/?hl=en" class="fa fa-instagram"></a></li>
<li style="float:right;"><a href="https://www.youtube.com" class="fa fa-youtube"></a></li>
<li style="float:left;"><a>Copyright &copy;</a></li>
</body>
</html>

页眉和页脚没有调整

1 个答案: