3

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

在此处输入图像描述

我是 CSS 新手。

我的问题：

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

5 回答 5

4

您可以按照您的描述在底部添加 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。如果不是，我可以说它是一种类似的无衬线字体。

于 2013-01-29T04:22:00.070 回答
3

使用 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;
}

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

于 2013-01-29T04:30:35.170 回答
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;

    }
于 2013-01-29T04:32:53.690 回答
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>
于 2013-01-29T04:35:33.267 回答
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>
于 2013-01-30T09:50:46.437 回答