个人中心
gpt4 book ai didi

html - 如何防止 HTML 中的 Division 标签扭曲

转载 作者：行者123 更新时间：2023-11-28 02:59:25 25 4
gpt4 key购买 nike

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

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

  • 标题

  • 内容

  • 页脚

    内容包含

  • 左

  • 对

Left 和 Right Div 分别在 Left 和 right float 。标题和内容部分之间有 10px 的空间，有点像这样:

Disorted

然而原来的应该是:

Original 

        <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 的使用位置没有帮助。提前感谢您的帮助:)

最佳答案

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

也许可以尝试添加如下内容:

h1 {
    margin:0;
}

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

关于html - 如何防止 HTML 中的 Division 标签扭曲，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35315607/

25 4 0
文章推荐： c++ - 直方图格式
文章推荐： c++ - 具有指向同一类对象的指针的类
文章推荐： asp.net - 如何获取RadioButtonList的innerText
文章推荐： javascript - FBJS 文本区域倒计时