html - 想要在我的导航栏下有一条虚线，但边框底部样式：虚线；不为我做吗？

Question

我正在为学校作业建立一个主页，现在 homestyle 有一条虚线，现在我想在我的导航栏下使用虚线使用 (border-bottom-style: dotted;) 在我的导航栏下没有给我一条虚线，希望有人可以告诉我为什么它不工作？

谢谢！

                           /*Topnav*/
.topnav { 
    width: 100%; 
    float: center; 
    margin-bottom: 20px; 
    padding: 10px 0px 10px 0; 
    background-color: #C9FD99;
}

.topnav ul {
    text-align: center;
}

.topnav ul li {
    display: inline; 
    margin-left: 15px;
}

.topnav a {
    font-size: 20px; 
    font-weight: bold; 
    text-decoration: none;
}

.topnav a:visited {
    color: #FFF;
}

.topnav a:link {
    color :#9F257D;
}

.topnav a:hover {
    color:#7BFC06;
}

                           <!--Topnav-->
<div class="topnav">
	<nav>
	<ul>
	    <li><a href="aboutblank.html">varianten</a></li>
		<li><a href="aboutblank.html">recepten</a></li>
        <li><a href="aboutblank.html">abonneren</a></li>
		<li><a href="aboutblank.html">contact</a></li>
		<li><a href="aboutblank.html">over ons</a></li>
	</ul>
	</nav>
</div>

标签： htmlcssnavbar

Answer 1

使用border-bottom-style可以创建带有一些默认值的虚线底部边框。但我会定义所有需要的参数来获得预期的边界。

我用谷歌浏览器尝试了这个，得到了默认的 3px 边框宽度和黑色边框颜色。默认值在其他浏览器和其他项目上可能不同（使用normalize.css或类似的重置规则）。

您可以使用 定义边框border-bottom。border-bottom您可以设置底部边框的宽度（）border-bottom-width、样式（border-bottom-style）和颜色（border-bottom-color）。

.topnav { 
  width: 100%; 
  float: center; 
  margin-bottom: 20px; 
  padding: 10px 0px 10px 0; 
  background-color: #C9FD99;
  border-bottom: 3px dotted black;
}
.topnav ul {
  text-align: center;
}
.topnav ul li {
  display: inline; 
  margin-left: 15px;
}
.topnav a {
  font-size: 20px; 
  font-weight: bold; 
  text-decoration: none;
}
.topnav a:visited {
  color: #FFF;
}
.topnav a:link {
  color :#9F257D;
}

.topnav a:hover {
  color:#7BFC06;
}

<div class="topnav">
  <nav>
    <ul>
      <li><a href="aboutblank.html">varianten</a></li>
      <li><a href="aboutblank.html">recepten</a></li>
      <li><a href="aboutblank.html">abonneren</a></li>
      <li><a href="aboutblank.html">contact</a></li>
      <li><a href="aboutblank.html">over ons</a></li>
    </ul>
  </nav>
</div>