网站顶部的白边

时间:2014-06-10 20:57:23

标签: html css

我已经阅读了很多不同的问题,指的是网站顶部的白边,我还没有找到帮助的答案。

http://codepen.io/WikiWookie/pen/DijrI

这是我的代码。我刚刚开始学习html / css,我试图像bootstrap一样进行导航。我试图从头开始,所以我可以学到更多东西

噢,是的,我试图弄乱一些边缘元素,但无济于事。谢谢你们!

3 个答案:

答案 0 :(得分:2)

从ul标签中删除边距

ul{
  margin: 0;
}

答案 1 :(得分:0)

您的<ul>边距正在通过标题“流血”并创建空白区域。设置:

header ul {margin-top: 0;}

或者

header nav {overflow: hidden;}

或类似的clearfix包含标题内的边距。

答案 2 :(得分:0)

作为旁注,当您使用codepen时,除了身体标记之间的内容之外,您不会在html区域中添加任何代码。 Codepen设置为自动链接到您的css&amp; javascript文件。

只要导航栏位于网站的最左上角,您就可以完全定位下面显示的元素。

header nav
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

请记住,如果绝对定位导航栏,则需要更改后续下一个元素的位置。了解定位的一个好方法是使用浏览器中的开发人员工具并选择您有兴趣了解的区域。你将能够看到所有的html&amp; css揭示网站的开发者如何构建他们的页面。希望这可以帮助。在我第一次开始编码时,这里有一些帮助我的链接。

CSS Tricks: Absolute Positioning

Explaining CSS Positioning