CSSインターレースカラー変更チュートリアル

HTML では、ul リストと li リストの前に色の違いのレイアウト効果が必要であることはわかっています。では、CSS を使用して ul li の色を 1 行おきに変更するにはどうすればよいでしょうか。今日は例を挙げて説明します。

プログラム呼び出しに影響を与えず、プログラムをシンプルにするために、ul li リスト レイアウトを使用して上記の間隔の背景色レイアウトを実現すると同時に、li の上にマウスを置くと背景色が変更されます。通常は 2 つの方法があります。

最初の方法: 背景画像、背景画像素材の狭い垂直ストリップを切り取り、背景画像を UL 背景として使用し、背景画像を UL 背景として使用し、上下左右に並べて簡単に配置します。間隔効果を実現します。

2 番目のタイプ: これを実現するには、JQ 特殊効果 を使用します。JS 特殊効果を通じて、背景色が分離され、マウスが背景色の変更効果の上を通過します。多くの特殊効果コードがあり、JS ファイルとコードを導入する必要があります。 。

次に、これら 2 つの方法を、写真、テキスト、オンライン デモンストレーションで例とともに紹介します。

<ul class="licss"> 
<li><a href="//m.sbmmt.com/">欢迎您访问</a></li> 
<li><a href="//m.sbmmt.com/">欢迎您访问</a></li> 
<li><a href="//m.sbmmt.com/">欢迎您访问</a></li> 
<li><a href="//m.sbmmt.com/">欢迎您访问</a></li> 
<li><a href="//m.sbmmt.com/">欢迎您访问</a></li> 
</ul>

background:url(ul-bg.gif); text-align:left}

text-indent

/ * 高さは計算する必要があり、レイアウト画像と特定の関係があります */ ul.licss li:hover{ background:#EBEBEB} /* 背景色を動的に変更するには、 hover pseudo-class for li */

here ul には別のクラスを設定します。説明: 実際のレイアウトでは、ul li レイアウトが多くの場所で使用されます。他の場所での ul の使用を区別するために、ここでのクラスには別の名前が付けられています。

CSS 拡張子: マウスが li 上に移動したときに色を変更したい場合は、CSS ul.licss li:hover{背景色を設定} を設定できます。

柔軟な使用法: 例によれば、ul li レイアウトのスキルを非 li レイアウトに拡張して、リスト型レイアウトの背景間隔の色を実装できます。

2D および 3D HTML を変換する方法

HTML5 ビデオ オーディオの実装手順

以上がCSSインターレースカラー変更チュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。