Question

我希望通过CSS实现这样的目标：

enter image description here

我是CSS的新手。

我的问题：

如何在底部添加绿线如下？我是否必须在包含文字的div下添加一个小div并将其背景设置为绿色？我知道有很多方法可以做到，但我只想学习最佳实践。
这个字体是Arial吗？

Answer 1

您可以按照描述在底部添加div，也可以使用边框。在任何一种情况下，你都可以调整一些高度。没什么大不了。

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。我可以说它是一个类似的无衬线字体，如果不是。

Answer 2

使用CSS精灵表。它们将帮助您使用图像实现此效果。通常，当您对菜单执行标记时，请使用UL和LI标记，然后根据功能进行适当的样式设置。然后将其设置为在鼠标结束时使用：hover选择器更改背景精灵。我建议将精灵表创建为您希望所有默认菜单按钮看起来像（横向跨越）的精确图像。然后在具有悬停版本外观的同一图像上执行下面的另一个版本。您可以对所需的任何其他版本（如活动，禁用等）重复此过程。只需确保为每个版本偏移背景位置的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的jsFiddle方式在这里做： 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;
}

但是我无法正确使用font-family。：（

Answer 3

使用此

.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;

    }

Answer 4

字体肯定不是Arial，我相信它的校准，并为您解决此代码

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

Answer 5

也试试这个

<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>

在带有CSS的框中添加“下划线”

5 个答案: