我正在使用 Eclipse Kepler 创建一个 Web 应用程序,并尝试在开始我的功能之前设计我的 jsp 文件。当我将以下代码创建为一个基本的html文件时,它可以在浏览器中打开,设计完美。但是当我在一个带有附加
的jsp文件中编写这段代码时<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
作为前两行,文件失去了所有的位置样式。如果您在 jsp 中运行代码,您会注意到边框和链接颜色保持不变,但所有内容都位于同一位置。
有人知道怎么处理吗?谢谢。
<html>
<head>
<title>Home</title>
<style>
body {
background-image: url(Images/whitebg.jpg);
background-repeat: no-repeat;
background-size: 100%;
}
#container {
width: 900px;
margin: 0 auto;
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
#header img {
position: absolute;
top: 80;
left: 72;
width: 200;
height: 50;
}
#container a:visited {
color: blue;
}
#container a:hover {
color: red;
}
#welcome {
position: absolute;
top: 20;
right: 100;
}
#logout {
position: absolute;
top: 20;
right: 20;
width: 50px;
height:25px;
}
#links {
position: absolute;
top: 200;
left: 72;
}
#links ul {
list-style-type: none;
padding: 5 10 5 10;
border: 2px solid red;
border-radius: 10px;
}
#links li {
padding: 10 0 25 0;
}
#feed {
position: absolute;
top: 100;
left: 400;
width: 800px;
height: 400px;
}
#feedtext {
width:800px;
height:400px;
overflow: scroll;
}
</style>
</head>
<body>
<div id='container'>
<div id='header'>
<img src='Images/mPowerlogo.jpg'/>
</div>
<div id='welcome'>
Welcome, User1
</div>
<div id='logout'>
<a href=''>Logout</a>
</div>
<div id='links'>
<ul>
<li><a href=''>Timecard Management</a></li>
<li><a href=''>User Management</a></li>
<li><a href=''>Customer Management</a></li>
<li><a href=''>Admin</a></li>
<li><a href=''>Reports</a></li>
</ul>
</div>
<div id='feed'>
<p>Recent Activity:</p>
<textarea id='feedtext' readonly>
</textarea>
</div>
</div>
最佳答案
将 0 以外的位置更改为“px”。
top: 20px;
或者删除 DOCTYPE,因为它要求 HTML/CSS 被认为是正确的(尽管它不是)。
提示: 您也可以考虑在 Java 中使用“Windows-1252”。浏览器会将 ISO-8859-1 解释为 Windows-1252(甚至在 Mac 和 Linux 上)。并且会出现一些特殊字符,例如 MS Word 非常喜欢的类似逗号的引号。 HTML-5 使这种隐藏的功能成为官方规范。
关于java - HTML 样式代码在 JSP 文件中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20663263/