頁眉和頁腳沒有得到調整

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>

我一直在嘗試添加頁眉和頁腳文件中的第一頁文件，但第一頁的輸出顯示所有在網頁和無頭文件中的頁腳文件。

來源

2017-07-24 Jatin Bisht

header and footer html應該在<body>內部。也可以在<head>標記內移動<style>或放入外部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>

來源

2017-07-24 16:11:01

把身體裏面不起作用。將頭戴式標籤放在頭部標籤內，意味着什麼？ –

根據w3c標準，所有樣式都應放置在''內。 –

問題是你的風格完全搞砸了。更新我的回答 –

頁眉和頁腳沒有得到調整

回答

相關問題