Question

这是我的第一个问题，我希望我能在这里得到一些帮助。

我制作了这个主要有5个DIV的HTML页面：

标题
内容
页脚

内容包含
左
右键

Left和Right Div分别在左右浮动。当我将带有H1标签的内容div 放入时，div会变得有些失真并且我得到一个约。标题和内容部分之间的间距为10px，有点像这样：

然而原来应该是：

        <body>
<a target="_blank"><div id="main" >
<div id="header" >

<a style="color:#000000" href="home.html">Home</a>
<a style="color:#000000" href="about.html">about</a>
<a style="color:#000000" href="Our customers.html">Our Customers</a>
<a style="color:#000000" href="Career.html">Careers</a>
<a style="color:#000000" href="Contact us.html">Contact us</a>
</div>
<div id="content">
<div id="left" ></div>
<div id="right" ></div>
Home
</div>
<div id="footer">
<a style="color:#FFFFFF" href="home.html">Privacy Policy</a>|
<a style="color:#FFFFFF" href="Feedback.html">Feedback</a>|
<a style="color:#FFFFFF" href="disclaimer.html">Disclaimer</a>|
<a style="color:#FFFFFF" href="Manadatory.html">Manadatory Disclosure</a>|
<a style="color:#FFFFFF" href="sitemap.html">Site Map</a>|
</div>
</div></body>

这是我的CSS代码：

#main
{
height:900px;
background-color:#000000;
}
#header
{
    height:100px;
background-color:#00FF00;
padding:70px;
    padding-right:70px;
    font-size:30px;
    text-align:center;
    background-image:url(Images/text3.jpg);
    padding: 50px;
}
#content

{
height:700px;
background-color:#FFFFFF;
}
#left
{
float:left;
 height:700px;
 background-color:#FF0000;
 width:150px;
 background-image:url(Images/navbar2.jpg);
}
   #right
{
float:right;
 height:700px;
 background-color:#FF0000;
 width:150px;
  background-image:url(Images/navbar2.jpg);
}


#footer
{
padding:50px;
padding-right:70px;
font-size:20px;
text-align:center;
height:100px;
background-image:url(Images/footer.jpg);
}

div使用位置的固定位置没有帮助。感谢您提前提供任何帮助：）

Answer 1

右键单击并检查浏览器上的元素并检查div。你应该看看它发生了什么。最有可能的是一些默认样式会带来一些利润。这就是为什么大多数人使用某种reset.css作为干净的基础。我想默认的css是将边距应用于<p>和<h1>标记。

也许尝试添加类似的内容：

h1 {
    margin:0;
}

显然，您只能指定某些边距而不是全部或.content h1 {}才能将样式应用于内容块中的标题。

如何防止HTML中的分区标记解除

1 个答案: