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

这个问题在这里已经有了答案:

  • 需要一个没有任何项目符号的无序列表23个答案

  • 默认的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>

    检查, nav ul li{float:left; list-style-type: none;} 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>

    只需添加'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>
    链接地址: http://www.djcxy.com/p/29969.html

    上一篇: Why are black dots in my nav? (HTML/CSS)

    下一篇: bullet points from <ul>