使用CSS为框添加下划线

Question

使用CSS为框添加下划线

css

3

我希望能够通过 CSS 达到以下效果：

enter image description here

我对 CSS 不是很了解。

我的问题：

我该如何添加下方的绿色线？我需要在包含文本的 div 下面添加一个小的 div 并将其背景设置为绿色吗？虽然有很多方法可以实现它，但我只想学习最佳实践。
这个字体是 Arial 吗？

- Thiem Nguyen

1

如果您已经收到答案，请选择一个答案。 - isherwood

5个回答

3

使用CSS精灵图可以帮助您使用图像实现此效果。通常，在标记菜单时使用UL和LI标签，然后为功能适当地进行样式设置。然后，使用:hover选择器将其设置为在鼠标悬停在LI上时更改背景精灵。我建议将精灵表创建为与所有默认菜单按钮外观完全相同的图像（水平扩展）。然后，在同一图像下面做另一个版本，具有悬停版本的外观。您可以为任何其他版本重复此过程，例如活动、禁用等。只需确保为每个版本偏移背景位置的Y值即可，如下所示：

li { background-position: 0px 0px; }
li:hover { background-position: 0px -100px; }
li:active { background-position: 0px -200px; }

请查看这篇文章，了解有关标记和设计方面的更多信息： http://line25.com/tutorials/how-to-create-a-css-menu-using-image-sprites 编辑：如果您不想使用精灵表，我在这里提供了一个纯CSS3的方式来完成它： http://jsfiddle.net/uBhKF/ HTML标记：

<ul>
   <li>FOLLOWING</li>
   <li>FOLLOWERS</li>
</ul>

CSS3:

ul {
    width: 100%;
    padding: 0px;
    margin: 0px;
    list-style-type: none;
    float: left;
}

li {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    float: left;
    width: 50%;
    height: 50px;
    display: block;
    margin: 0px;
    background-color: #444;
    border-left: 1px dotted #DDD;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    font-size: 24px;
    text-align: center;
    line-height: 50px;
    color: #888;
}
li:first-of-type {
    border-left: none;
}
li:hover {
    color: #55E000;
    border-bottom: 5px solid #55E000;
    background-color: #333;
}

但我无法正确设置字体族。:(

- CP510

1

我不确定为什么有人要用图片来复杂化一个如此简单的设计。你的理由是什么？ - isherwood

不多，这只是对初学者来说更容易的开始。此外，跨浏览器的一致性也更容易实现。并非所有的CSS3效果都会呈现相同的效果。如果菜单看起来很简单，那么建议使用纯CSS3。但如果有一些复杂的图形（例如闪光、纹理、渐变），则使用精灵模型更容易。此外，它还可以缓存。 - CP510

2

使用这个

.header
    {
        margin-left: auto;
        margin-right: auto;
        height: 102px;
        background-color: #F0F0F0;
        width:500px

    }
    .header .header-first
    {
        float: left;

        width: 216px;
        border-bottom: 3px solid #3CA2DF;
    }

    .header .header-last
    {
         width: 216px;
         float:right;

    }

- Pawan Lakhara

1

字体肯定不是Arial，我相信它是Calibri，尝试使用这段代码解决问题

<html>
<body>
<div style="border-bottom: 3px solid #00ff00; 
     background:#000; 
     height: 50px; 
     width:400px; 
     color:#00ff00; 
     text-align:center;">
FOLLOWERS
</div>
</body>
</html>

- N Khan

1

也可以尝试这个。

<html>
<head>
<style>
td
{
width:400px;
background:#000; 
color:#fff; 
text-align:center;
height: 100px;
font-size:20px;
}
td:hover
{
text-decoration: underline;
border-bottom: 3px solid #00ff00;
color:#00ff00;
}
</style>
</head>
<body>
<table style="margin:0 auto;">
<tr>
<td>Following</td>
<td>Followers</td>
</tr>
</table>
</body>
</html>

- N Khan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- isherwood · Accepted Answer

您可以选择按照您所述的在底部添加div，或者使用边框。无论哪种情况，您都需要进行一些高度的调整。这没有什么大不了的。 http://jsfiddle.net/PQgH3/2

div {
    width: 50%;
    padding-top: 10px;
    font-size: 24px;
    text-align: center;
    font-family: arial, sans-serif;
}
.followers {
    background-color: #777;
    float: right;
    height: 75px;
    color: #ccc;
}
.following {
    background-color: #555;
    float:left;
    height: 70px;
    color: #ccc;
    border-bottom: 5px solid lime;
}

<div class="followers">Followers</div>
<div class="following">Following</div>

我无法确定那种字体是否是Arial。但如果不是的话，我可以说它是一种类似的无衬线字体。