Question

我发现菜单显示底部边框，我想学习如何操作，但我不明白它是如何完成的，是有一种更简单的方法可以达到同样的目的吗？以下是网址：https://codepen.io/atomas/pen/zBoEZe?editors=1100

HTML ：

docker logs <containerid>

CSS ：

<ul>
  <li class="elm selected">Home</li>
  <li class="elm">Services</li>
  <li class="elm">About</li>
  <li class="elm bar">Contact</li>
</ul>

Answer 1

如果您只想在菜单的底部上找到 border ，则可以使用border-bottom:

body, html {
    margin: 0;
    padding: 0;
}
header {
    background-color: #eee;
}
ul {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
    border-bottom: 5px solid #ccc;
}
ul>li {
    display: inline-block;
    padding: 0 15px 0 15px;
    margin-left: -4px;
}
ul>li:first-child {
    margin-left: 0;
}
ul>li>a {
    display: block;
    color: #333;
    text-decoration: none;
    padding: 5px 0 5px 0;
}
ul>li:hover {
    border-bottom: 5px solid #555;
    margin-bottom: -5px
}

<header>
    <nav>
        <ul>
            <li class="active"><a href="#" title="Home">Home</a>
            </li>
            <li><a href="#" title="About">About</a>
            </li>
            <li><a href="#" title="Contact">Contact</a>
            </li>
        </ul>
    </nav>
</header>

Answer 2

＆＃13;

* {  box-sizing: border-box;}
ul { 
  padding: 0;
  list-style: none;
  color: #000;
  }
li {
    float: left;
    padding: 15px;
    font-size: 18px;
    font-family: Roboto;
    font-weight: 700;
    text-align: center;
  
    border-bottom: 4px solid #555; 
    transition: all 0.3s;
}
li:hover {
    border-bottom: 4px solid red;
}

＆＃13;

<ul>
  <li class="elm selected">Home</li>
  <li class="elm">Services</li>
  <li class="elm">About</li>
  <li class="elm bar">Contact</li>
</ul>

＆＃13;

Answer 3

这个css不仅仅是在底部添加边框。

您在底部看到的灰色边框显示在：

li {
    float: left;
    padding: 15px;
    font-size: 18px;
    font-family: Roboto;
    font-weight: 700;
    width: percentage($width);
    text-align: center;
    cursor: pointer;
    ***border-bottom: 4px solid #555***;
  }

但是，css还添加了一个组件，该组件突出显示正在悬停的特定li元素，使边框底部变为红色。

顶部的width属性只是确保每个li元素在浏览器中水平占空间：

$elementsNumber: 4; 
$width: 1/$elementsNumber;

为了实现与您的codepen所示相同的红色悬停，您需要编写一些css，例如li：hover等，以模仿相同的效果。

你拥有的css肯定比它需要的更复杂但是为了预期目的而工作。在这里查看w3schools链接应该有助于您了解CSS中的悬停属性和其他有用属性。

希望这有帮助！

是否有一种更简单的方法，这对初学者来说是可以理解的？

3 个答案: