我正在创建一个网站作为投资组合,以介绍我在IT领域的发展道路,但是我的问题是我的导航栏在其本身与页面的其余部分之间有一个空格。
我试过使用border,margin,width但没有用
body {
background-color : #B31854;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #900C3F;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #740A33;
}
h1 {
font-family : Schluber;
color : #D7BDE2 ;
}
p {
color : #D7BDE2 ;
width:300px;
margin : auto;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="file:///F:/Site%20web/Exemple%20css.css">
<style>
</style>
</head>
<body>
<ul>
<li><a class="active" href="#accueil">Accueil</a></li>
<li><a href="#monparcours">Mon Parcours</a></li>
<li><a href="#mesprojets">Mes Projets</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<center><h1>Bienvenue sur mon portfolio !</h1></center>
</body>
</html>
预期结果类似于以下网站navbar:http : //axel-chapelain.com/
实际结果是这样的:https : //www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_black
我认为您正在寻找删除默认的正文边距。尝试使用以下方法重置它:
body {margin:0;}
将规则添加到CSS的顶部。
演示:
body {
margin: 0; /* reset happened here */
background-color : #B31854;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #900C3F;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #740A33;
}
h1 {
font-family : Schluber;
color : #D7BDE2 ;
}
p {
color : #D7BDE2 ;
width:300px;
margin : auto;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="file:///F:/Site%20web/Exemple%20css.css">
<style>
</style>
</head>
<body>
<ul>
<li><a class="active" href="#accueil">Accueil</a></li>
<li><a href="#monparcours">Mon Parcours</a></li>
<li><a href="#mesprojets">Mes Projets</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<center><h1>Bienvenue sur mon portfolio !</h1></center>
</body>
</html>
另外,您可能想重置更多默认值。请参阅CSS工具:重置CSS。有关堆栈溢出的更多信息:CSS重置-它到底是做什么的?或默认<body>
边距有多宽?。
如果您查看源代码,将会发现:
html, body { /* I cut a lot of tags here */
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
除了完全重置外,您可能希望跨浏览器标准化CSS。检查Normalize.css
如果您查看源代码,将会发现:
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
我认为值得一提的是,另一个可行的解决方案是在包装整个HTML的包装器中添加负边距。请不要那样做。没有人愿意处理这种骇人的解决方法。不要打架浏览器; 重置它。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句