ホームページ > 記事 > ウェブフロントエンド > CSSインターレースカラー変更チュートリアル

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

php中世界最好的语言オリジナル: 2017-11-29 09:43:332922ブラウズ

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

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

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

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

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

背景画像素材は、liリストの背景間隔の色を実現します

このDIV + CSSのケースは、シンプルで便利で、コードを節約し、マウスを上に移動したときに背景色の変更効果も実現できる推奨方法ですリー。

操作方法は以下の通りです

写真素材として幅1ピクセル、高さちょうど2色のliを切り抜きます

HTML対応ソースコード

<ul class="licss"> 
<li><a href="http://www.php.cn/">欢迎您访问</a></li> 
<li><a href="http://www.php.cn/">欢迎您访问</a></li> 
<li><a href="http://www.php.cn/">欢迎您访问</a></li> 
<li><a href="http://www.php.cn/">欢迎您访问</a></li> 
<li><a href="http://www.php.cn/">欢迎您访问</a></li> 
</ul>

上記がul liレイアウトの内容です。重要なのは、背後にある CSS コードの記述と説明を見ることです。

4. 対応する CSS コード

ul.licss{ margin:0 auto;

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

/* 背景のみの引用符他のパラメータを設定せずに、人物の写真をオブジェクト内で全画面に並べて表示できます*/

text-indent

:10px; height:34px;

/ * 高さは計算する必要があり、レイアウト画像と特定の関係があります */ 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 レイアウトに拡張して、リスト型レイアウトの背景間隔の色を実装できます。

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。