为什么我的导航中有黑点? (HTML / CSS)

时间:2017-08-30 09:11:03

标签: html css nav

我会很快。我知道代码没有调试,我只有一个小时,而且我已经有了一个错误而且我不知道如何修复它,我按照代码中显示的方式创建了一个导航。我使用text-decoration:none;隐藏下划线但显示了一些黑点,我不知道它是文字装饰还是什么。

这是HTML:               

<!doctype html>

<html>

<head>
<link rel="stylesheet" type="text/css"     href="style.css">
<title>stdd</title>
</head>

<body>

<h2>FRASE PAGINA WEB</h2>
<h1>TITULO PAGINA WEB</h1>

<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Albumes</a></li>
<li><a href="#">Centerfolder</a><li>
</ul>
</nav>

<div id="leftbox">
<article><img src="1.jpg"><p><b>Explora y sobrevive en la oscuridad de un mundo de pesadilla.</b></p></article>
<article><img src="2.jpg"><p><b>Salva la galaxia con tu nave y con la ayuda los gatitos espaciales!</b></p></article>
<article><img src="3.jpg"><p><b>Tus acciones cuenta soladado! La guerra nunca habia sido tan real.</b></p></article>
</div>

<aside>
<p>Aqui pueden ir anuncios, tags, comentarios de redes sociales, un buscador, la radio, cualquier gadget, algun javascript, una imagen, un gif, puntuacion, suscribirse por correo, hora, calendario, miniblog...</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<div id="rightbox">
<article><img src="4.jpg"><p><b>Todos tenemos nuestro lado psicopata... Acaba con todos de mil maneras!</b>.</p></article>
<article><img src="5.jpg"><p><b>Sin manos, sin piernas, grandes cualidades.</b></p><br></article>
<article><img src="6.jpg"><p><b>Desde naves hasta estaciones espaciales, el espacio en manos de tu ingenio!</b></p></article>

<footer>
</footer>

</body>
</html>

CSS:

*{padding:0; margin:0; text-decoration:none;}

body{background:#cb8015;}

h1{color:yellow; text-align:center; font-size:50px;}

h2{color:yellow; text-align:center; margin-top:6px;     font-size:40px;}

article img{width:100%; border-top:solid white 3px;     border-bottom:solid white 3px;}

#leftbox{width:39%; float:left;}
#leftbox p{text-align:right; margin-right:10%; margin-    left:10%; margin-bottom:10px; font-size:23px;}

aside{background:black; width:22%; float:left;}
aside p{color:white; padding:10px; font-size:30px;}

#rightbox{width:39%; float:left;}
#rightbox p{text-align:left; margin-right:10%;     margin-left:10%; margin-bottom:10px; font-size:23px;}


nav{overflow:hidden; border-top:solid orange 3px;}
nav ul li{float:left;}
nav ul li a{display:block; font-size:28px; color:white; padding:1px 5px;}
nav ul li a:hover{background:black;}

<br>业余修复或坏颜色这样的事情只是暂时的,看它是怎么回事。

4 个答案:

答案 0 :(得分:1)

默认ul代码会在列表项中使用项目符号。您可以使用nav ul {list-style: none;}删除此内容。查看下面的更新代码段。

*{padding:0; margin:0; text-decoration:none;}

body{background:#cb8015;}

h1{color:yellow; text-align:center; font-size:50px;}

h2{color:yellow; text-align:center; margin-top:6px;     font-size:40px;}

article img{width:100%; border-top:solid white 3px;     border-bottom:solid white 3px;}

#leftbox{width:39%; float:left;}
#leftbox p{text-align:right; margin-right:10%; margin-    left:10%; margin-bottom:10px; font-size:23px;}

aside{background:black; width:22%; float:left;}
aside p{color:white; padding:10px; font-size:30px;}

#rightbox{width:39%; float:left;}
#rightbox p{text-align:left; margin-right:10%;     margin-left:10%; margin-bottom:10px; font-size:23px;}


nav{overflow:hidden; border-top:solid orange 3px;}
nav ul {list-style: none;}
nav ul li{float:left;}
nav ul li a{display:block; font-size:28px; color:white; padding:1px 5px;}
nav ul li a:hover{background:black;}
<h2>FRASE PAGINA WEB</h2>
<h1>TITULO PAGINA WEB</h1>

<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Albumes</a></li>
<li><a href="#">Centerfolder</a><li>
</ul>
</nav>

<div id="leftbox">
<article><img src="1.jpg"><p><b>Explora y sobrevive en la oscuridad de un mundo de pesadilla.</b></p></article>
<article><img src="2.jpg"><p><b>Salva la galaxia con tu nave y con la ayuda los gatitos espaciales!</b></p></article>
<article><img src="3.jpg"><p><b>Tus acciones cuenta soladado! La guerra nunca habia sido tan real.</b></p></article>
</div>

<aside>
<p>Aqui pueden ir anuncios, tags, comentarios de redes sociales, un buscador, la radio, cualquier gadget, algun javascript, una imagen, un gif, puntuacion, suscribirse por correo, hora, calendario, miniblog...</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<div id="rightbox">
<article><img src="4.jpg"><p><b>Todos tenemos nuestro lado psicopata... Acaba con todos de mil maneras!</b>.</p></article>
<article><img src="5.jpg"><p><b>Sin manos, sin piernas, grandes cualidades.</b></p><br></article>
<article><img src="6.jpg"><p><b>Desde naves hasta estaciones espaciales, el espacio en manos de tu ingenio!</b></p></article>

<footer>
</footer>

答案 1 :(得分:0)

检查一下,nav ul li{float:left; list-style-type: none;}

*{padding:0; margin:0; text-decoration:none;}

body{background:#cb8015;}

h1{color:yellow; text-align:center; font-size:50px;}

h2{color:yellow; text-align:center; margin-top:6px;     font-size:40px;}

article img{width:100%; border-top:solid white 3px;     border-bottom:solid white 3px;}

#leftbox{width:39%; float:left;}
#leftbox p{text-align:right; margin-right:10%; margin-    left:10%; margin-bottom:10px; font-size:23px;}

aside{background:black; width:22%; float:left;}
aside p{color:white; padding:10px; font-size:30px;}

#rightbox{width:39%; float:left;}
#rightbox p{text-align:left; margin-right:10%;     margin-left:10%; margin-bottom:10px; font-size:23px;}


nav{overflow:hidden; border-top:solid orange 3px;}
nav ul li{float:left; list-style-type: none;}
nav ul li a{display:block; font-size:28px; color:white; padding:1px 5px;}
nav ul li a:hover{background:black;}
<h2>FRASE PAGINA WEB</h2>
<h1>TITULO PAGINA WEB</h1>

<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Albumes</a></li>
<li><a href="#">Centerfolder</a><li>
</ul>
</nav>

<div id="leftbox">
<article><img src="1.jpg"><p><b>Explora y sobrevive en la oscuridad de un mundo de pesadilla.</b></p></article>
<article><img src="2.jpg"><p><b>Salva la galaxia con tu nave y con la ayuda los gatitos espaciales!</b></p></article>
<article><img src="3.jpg"><p><b>Tus acciones cuenta soladado! La guerra nunca habia sido tan real.</b></p></article>
</div>

<aside>
<p>Aqui pueden ir anuncios, tags, comentarios de redes sociales, un buscador, la radio, cualquier gadget, algun javascript, una imagen, un gif, puntuacion, suscribirse por correo, hora, calendario, miniblog...</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<div id="rightbox">
<article><img src="4.jpg"><p><b>Todos tenemos nuestro lado psicopata... Acaba con todos de mil maneras!</b>.</p></article>
<article><img src="5.jpg"><p><b>Sin manos, sin piernas, grandes cualidades.</b></p><br></article>
<article><img src="6.jpg"><p><b>Desde naves hasta estaciones espaciales, el espacio en manos de tu ingenio!</b></p></article>

<footer>
</footer>

答案 2 :(得分:0)

添加'list-style:none'css属性:

*{padding:0; margin:0; text-decoration:none;}

body{background:#cb8015;}

h1{color:yellow; text-align:center; font-size:50px;}

h2{color:yellow; text-align:center; margin-top:6px;     font-size:40px;}

article img{width:100%; border-top:solid white 3px;     border-bottom:solid white 3px;}

#leftbox{width:39%; float:left;}
#leftbox p{text-align:right; margin-right:10%; margin-    left:10%; margin-bottom:10px; font-size:23px;}

aside{background:black; width:22%; float:left;}
aside p{color:white; padding:10px; font-size:30px;}
ul li{
  list-style:none;
}
#rightbox{width:39%; float:left;}
#rightbox p{text-align:left; margin-right:10%;     margin-left:10%; margin-bottom:10px; font-size:23px;}


nav{overflow:hidden; border-top:solid orange 3px;}
nav ul li{float:left;}
nav ul li a{display:block; font-size:28px; color:white; padding:1px 5px;}
nav ul li a:hover{background:black;}
<body>

<h2>FRASE PAGINA WEB</h2>
<h1>TITULO PAGINA WEB</h1>

<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Albumes</a></li>
<li><a href="#">Centerfolder</a><li>
</ul>
</nav>

<div id="leftbox">
<article><img src="1.jpg"><p><b>Explora y sobrevive en la oscuridad de un mundo de pesadilla.</b></p></article>
<article><img src="2.jpg"><p><b>Salva la galaxia con tu nave y con la ayuda los gatitos espaciales!</b></p></article>
<article><img src="3.jpg"><p><b>Tus acciones cuenta soladado! La guerra nunca habia sido tan real.</b></p></article>
</div>

<aside>
<p>Aqui pueden ir anuncios, tags, comentarios de redes sociales, un buscador, la radio, cualquier gadget, algun javascript, una imagen, un gif, puntuacion, suscribirse por correo, hora, calendario, miniblog...</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<div id="rightbox">
<article><img src="4.jpg"><p><b>Todos tenemos nuestro lado psicopata... Acaba con todos de mil maneras!</b>.</p></article>
<article><img src="5.jpg"><p><b>Sin manos, sin piernas, grandes cualidades.</b></p><br></article>
<article><img src="6.jpg"><p><b>Desde naves hasta estaciones espaciales, el espacio en manos de tu ingenio!</b></p></article>

答案 3 :(得分:0)

尝试添加此css:

nav ul {
  list-style-type: none;
}