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

これも試してみてください

<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 に答える
1

フォントは確かに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>
于 2013-01-29T04:35:33.267 に答える