Question

所以我试着创建一个网站，我有一个导航栏（使用了一个没有组织的列表）然后我又做了一个我要写的杂志菜单（就像一个目录基本上）。我使用＆lt; div>元素然后我得到导航栏上的点，并不知道如何解决它。任何帮助修复点问题或修复我的代码将不胜感激。谢谢。我的代码将在下面。注意：我是堆叠溢出的新手，并且不知道如何使用它，所以我很抱歉我的愚蠢错误。

<!--DOCTYPE html-->
<!--Decleration-->
<html lang="fr">
<head>
<meta charset="utf-8">
<title>
Accès Magazine-Début</title>
</head>
<body>
<!--Navigation Bar-->
<div class="nav">
<nav>
<ul>
<h1 id="n_title">Accès Magazine</h1>
<input type="text" placeholder="Cherche...">
<li><a class="active" href="home.html">Début</a></li>
 <li><a href="magazines.html">Magazines</a></li>
 <li><a href="t_news.html">Actualites Tendances</a></li>
 <li><a href="sub.html">Abonner</a></li>
 <li><a href="contact.html">Contacte Nous!</a></li>
 </ul>
 </nav>
 </div>
 <!--Start of Body-->
 <h1 id="first_title">Lecture d'Ajourd Hui</h1>
 <hr  />
 <!--Start of Magazine-->
 <h1 id="m_title">Jeudi, Mars 15<sup>ème</sup>, 2018</h1>
 <p>Par: .</p>
 <img src="https://www.pixilart.com/images/art//f93e748af187b11.png?v=1520646930" alt="Coverture de Magazine" title="Accès Magazine. Jeudi Mars 15<sup>ème<sup>, 2018" width="500" height="450">
<p>
  <figcaption>
    Premier page
   </figcaption>
  </p>
<hr  />
<!--Next Page-->
<h3>Sommaire</h3>
<div class="sum">
<ul>
  <li>Technologie</li>
  <li>La Meteo</li>
  <li></li>
  <li></li>
  <li><li>
  <li>Petits Anonces</li>
</ul>
  </div>
//CSS
.nav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
 }
.nav li {
float: left;
}
.nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
 }
.nav li a:hover {
 background-color: #111;
 }
 .nav .active {
 background-color: #4CAF50;
 }
 #n_title {
 color: white;
 }
 input[type=text] {
 float: left;
 padding: 6px;
 border: none;
 marging-top: 10px;
 marging-right: 20px;
 font-size: 17px;
 }
 .nav {
 position: -webkit-sticky;
 position: sticky;
 top: 0;
 }
 body {
 background-color: white;
 } 
 p {
 background-color: null;
 } 
 #first_title {
 color: black;
 text-align: center;
 }
 .sum {
 text-align: left;
 }

Answer 1

应在list-style-type上使用

<ul>属性。

在下面添加

.nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

/* added */
.nav ul {
  list-style: none;
}

.nav li {
  float: left;
}

.nav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.nav li a:hover {
  background-color: #111;
}

.nav .active {
  background-color: #4CAF50;
}

#n_title {
  color: white;
}

input[type=text] {
  float: left;
  padding: 6px;
  border: none;
  marging-top: 10px;
  marging-right: 20px;
  font-size: 17px;
}

.nav {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

body {
  background-color: white;
}

p {
  background-color: null;
}

#first_title {
  color: black;
  text-align: center;
}

.sum {
  text-align: left;
}

<!--Navigation Bar-->
<div class="nav">
  <nav>
    <ul>
      <h1 id="n_title">Accès Magazine</h1>
      <input type="text" placeholder="Cherche...">
      <li><a class="active" href="home.html">Début</a></li>
      <li><a href="magazines.html">Magazines</a></li>
      <li><a href="t_news.html">Actualites Tendances</a></li>
      <li><a href="sub.html">Abonner</a></li>
      <li><a href="contact.html">Contacte Nous!</a></li>
    </ul>
  </nav>
</div>
<!--Start of Body-->
<h1 id="first_title">Lecture d'Ajourd Hui</h1>
<hr />
<!--Start of Magazine-->
<h1 id="m_title">Jeudi, Mars 15<sup>ème</sup>, 2018</h1>
<p>Par: .</p>
<img src="https://www.pixilart.com/images/art//f93e748af187b11.png?v=1520646930" alt="Coverture de Magazine" title="Accès Magazine. Jeudi Mars 15<sup>ème<sup>, 2018" width="500" height="450">
<p>
  <figcaption>
    Premier page
  </figcaption>
</p>
<hr />
<!--Next Page-->
<h3>Sommaire</h3>
<div class="sum">
  <ul>
    <li>Technologie</li>
    <li>La Meteo</li>
    <li></li>
    <li></li>
    <li>
      <li>
        <li>Petits Anonces</li>
  </ul>
</div>

Answer 2

将list-style-type: none;添加到li，您可以添加任意数量的CSS规则来为您的网页添加样式。请做一些研究，并从下面的片段中获取一些参考。

＆＃13;

.nav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
 }
nav ul{
display: block;
}
.nav li {
float: left;
list-style-type: none;
}
.nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
 }
.nav li a:hover {
 background-color: #111;
 }
 .nav .active {
 background-color: #4CAF50;
 }
 #n_title {
 color: white;
 }
 input[type=text] {
 float: left;
 padding: 6px;
 border: none;
 marging-top: 10px;
 marging-right: 20px;
 font-size: 17px;
 }
 .nav {
 position: -webkit-sticky;
 position: sticky;
 top: 0;
 }
 body {
 background-color: white;
 } 
 p {
 background-color: null;
 } 
 #first_title {
 color: black;
 text-align: center;
 }
 .sum {
 text-align: left;
 }

＆＃13;

<body>
<!--Navigation Bar-->
<div class="nav">
<nav>
<h1 id="n_title">Accès Magazine</h1>
<input type="text" placeholder="Cherche...">
<div style="clear:both;"></div>
<ul>
<li><a class="active" href="home.html">Début</a></li>
 <li><a href="magazines.html">Magazines</a></li>
 <li><a href="t_news.html">Actualites Tendances</a></li>
 <li><a href="sub.html">Abonner</a></li>
 <li><a href="contact.html">Contacte Nous!</a></li>
 </ul>
 </nav>
 </div>
 <!--Start of Body-->
 <h1 id="first_title">Lecture d'Ajourd Hui</h1>
 <hr  />
 <!--Start of Magazine-->
 <h1 id="m_title">Jeudi, Mars 15<sup>ème</sup>, 2018</h1>
 <p>Par: .</p>
 <img src="https://www.pixilart.com/images/art//f93e748af187b11.png?v=1520646930" alt="Coverture de Magazine" title="Accès Magazine. Jeudi Mars 15<sup>ème<sup>, 2018" width="500" height="450">
<p>
  <figcaption>
    Premier page
   </figcaption>
  </p>
<hr  />
<!--Next Page-->
<h3>Sommaire</h3>
<div class="sum">
<ul>
  <li>Technologie</li>
  <li>La Meteo</li>
  <li></li>
  <li></li>
  <li><li>
  <li>Petits Anonces</li>
</ul>
  </div>

＆＃13;

如何在html和css中设置两个不同的列表

2 个答案: