我现在有这个JAVA脚本。
/* ******************************************************************** */
/* Generated by: http://csscreator.com */
/* ******************************************************************** */
html,
body {
margin: 0;
padding: 0;
text-align: center;
BACKGROUND: #fff;
font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;
}
a {
color: #fff;
text-decoration: none;
white-spaces: nobreak
}
li {
color: #fff;
}
body {
color: #BAC6DE
}
#pagewidth {
width: 1395px;
text-align: left;
margin: 0px auto;
}
#header {
position: relative;
height: 100px;
width: 1395px;
display: block;
overflow: none;
padding: 0px 0px 0px 0px;
}
#header h2 {
color: #fff;
padding: 0px 0px 0px 60px;
}
#header p {
color: #fff;
padding: 10px 0px 0px 60px;
}
#maincol {
background-color: #BAC6DE;
position: relative;
width: 1395px;
height: 800px;
padding: 0px 0px 0px 0px;
Margin: 0px 0px 0px 0px;
}
#widgetcontainer {
background-color: #00386B;
position: relative;
width: 1175px;
height: 100%;
Margin: 0px 0px 0px 0px;
Padding: 0px 0px 0px 10px;
Overflow: auto;
}
.widget {
background-color: #BAC6DE;
float: left;
width: 200px;
height: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 10px;
}
#result p {
color: #000;
}
#footer h2 {
color: fff;
padding: 0px 0px 0px 0px;
}
#footer p {
color: fff;
padding: 0px 50px 0px 60px;
font-family: 'Monotype Corsiva', 'Apple Chancery', 'ITC Zapf Chancery', 'URW Chancery L', cursive;
font-size: 120%;
margin-right: 2px;
margin-top: 8px;
}
/* ******************************************************************** */
/* Clearfix: http://csscreator.com/attributes/containedfloat.php */
/* ******************************************************************** */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility;
hidden;
}
.clearfix {
display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* End hide from IE-mac */
/* ******************************************************************** */
/* Styling for widgets hover */
/* ******************************************************************** */
.current {
color: #00386B;
display: block;
}
.imgHover {
display: inline;
position: relative;
}
.imgHover .hover {
display: none;
position: absolute;
z-index: 1;
}
.hover {
height: 575px;
width: 200px;
background: #BAC6DE;
}
.hover a {
display: block;
padding: 2px;
font-size: 80%;
padding-left: 5px;
}
.hover a:link {
/* Applies to all unvisited links */
text-decoration: none;
font-weight: none;
background-color: #BAC6DE;
color: #fff;
}
.hover a:hover {
/* Applies to links under the pointer */
text-decoration: none;
font-weight: bold;
background-color: #BAC6DE;
color: #fff;
}
.input {
border: 2px inset #fff;
background: #eee;
height: 30px;
margin-bottom: 40px;
}
.input:hover {
border: 2px solid #f00;
background: #ff6;
}
.button {
display: none;
}
label {
display: block;
width: 150px;
float: left;
margin: 2px 4px 6px 4px;
text-align: right;
}
br {
clear: left;
}
/* ******************************************************************** */
/* Styling for console panel */
/* ******************************************************************** */
a:focus {
outline: none;
}
a.trigger {
position: absolute;
background: #9E00F8 url(../images/plus.png) 6% 55% no-repeat;
text-decoration: none;
font-size: 16px;
letter-spacing: -1px;
font-family: verdana, helvetica, arial, sans-serif;
color: #fff;
padding: 4px 12px 6px 30px;
font-weight: bold;
z-index: 2;
}
a.trigger.left {
left: 0;
border-top-right-radius: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
}
a.trigger.right {
right: 0;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-topleft: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
}
a.trigger:hover {
background-color: #59B;
}
a.active.trigger {
background: #666 url(../images/minus.png) 6% 55% no-repeat;
}
.panel {
color: #CCC;
position: absolute;
display: none;
background: #9E00F8;
height: 800px;
width: 800px;
z-index: 1;
}
.panel.left {
left: 0;
padding: 26px 0px;
border-top-right-radius: 15px;
-moz-border-radius-topright: 15px;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-bottomright: 15px;
-webkit-border-bottom-right-radius: 15px;
border-bottom-right-radius: 15px;
}
.panel p {
font-size: 11px;
}<!doctype html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<title>Hub Page</title>
<meta charset="utf-8" />
<meta generator="csscreator.com" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/+sfgRmluamFuX1R5cGU9amF2YV9zY3JpcHQmRmluamFuX0xhbmc9SmF2YVNjcmlwdA==+/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.slidePanel.min.js"></script>
<script>
$(function() {
$(".imgHover").hover(function() {
$(this).children("img").fadeTo(200, 0.1).end().children(".hover").show();
}, function() {
$(this).children("img").fadeTo(200, 1).end().children(".hover").hide();
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
// default settings
// $('.panel').slidePanel();
// custom settings
$('#panel2').slidePanel({
triggerName: '#trigger1',
triggerTopPos: '0px',
panelTopPos: '0px'
});
});
</script>
<SCRIPT LANGUAGE="JavaScript">
function ClipBoard() {
holdtext.innerText = copytext.innerText;
Copied = holdtext.createTextRange();
Copied.execCommand("RemoveFormat");
Copied.execCommand("Copy");
alert("Template Copied");
}
</SCRIPT>
<!-- Please link back to http://csscreator.com -->
<link rel="stylesheet" href="style/homepage.css" type="text/css" />
</head>
<body>
<div id="pagewidth">
<div id="header">
<IMG SRC="images/header.jpg" align=right>
</a>
<TEXTAREA ID="holdtext" STYLE="display:none;">
</TEXTAREA>
<SPAN ID="copytext" STYLE="height:150;width:162;display:none;">
http://kana.ifdsgroup.co.uk/attachments/attach/uk/</SPAN>
</P>
</div>
<div id="wrapper" class="clearfix">
<div id="maincol">
<div class="widget">
<div class="hover">
<!----------START NAVIGATION PANEL----------->
<a href="TEAM HOME.htm" class="current">TEAM HOME</a>
<a href="BASE.htm">KANA IQ</a>
<a href="EMAIL DRAFTS.htm">EMAIL DRAFT</a>
<a href="TEAM DOCUMENTS.htm">TEAM DOCUMENTS</a>
<!----------END NAVIGATION PANEL----------->
</div>
</div>
<div id="widgetcontainer">
<!----------Start Team Home Links----------->
<font size=5><strong><p>Bulletin Board. . .</p></strong></font>
<P>Please Enter Your First Bulletin Here . . .</P>
<!----------End Team Home Links----------->
</div>
<br clear=all>
</div>
</div>
</div>
</div>
</body>
</html>有人可以告诉我为什么右手DIV（深蓝色）的文字比左手DIV（浅蓝色）的文字低吗？
我已经更改了内边距，边距，但是我无法使其正确对齐。
最佳答案
您必须注意，浏览器对元素有自己的预先定义样式。
由于“公告板...”是p标签，因此浏览器将在该元素中添加自己的边距。大多数开发人员将使用重置样式表来避免这些问题。您也可以将margin: 0px;添加到p标记中，它将解决此问题。