css Keqiji コミュニティ アバター表示効果_JavaScript スキル

コードの説明:

この段落では、大きなブロック DIV が定義されており、以下の 4 つのタグが設定されています。 CSS これらの 4 つのタグは、目的の効果を実現するために使用されます。

/blogview.asp?logID=553">64d / 47 ヒット pixu
....
次の段落では、Web ページの基本コンテンツとリンクのスタイルを定義します。 family:Verdana、Arial、Sans; 背景:#FFF; マージン:50px; }
a:link a:visited{color:#000099; text-decoration:Underline;}
a:hover,a:active{color:#000;text-decoration: none ;}
次の行は、各 LI は幅の 14% を占めます。14% は 100% を 7 ブロックで割ったものに相当します。この文は中央に表示されます。 FIREFOX;

#zishu_test li{ float:left; width:14%; text-align:center; margin:0 auto; list-style:none }
次の行は A タグを一律に定義します; 境界線、幅、背景など; 実際には、この時点では境界線が存在しますが、Web ページの背景色を変更すると見えなくなります。効果は達成されています。 :block;padding-top:10px; margin:auto}
以下は画像の端に空白効果と境界効果を追加します。 width:75px; height:75px; text-align:center; margin:3px; border:1px; 次の行はコンテンツを非表示にしますSPAN タグ内;

#zishu_test li span{display:none;}
次の行は、主に SPAN のコンテンツを表示するための効果を定義します。 SPAN コンテンツの位置; 注: この方法で SPAN の位置を定義すると、最後に 2 行のコードがあることにも注意してください。
#zishu_test li a:hover span{ margin-top:-10px;display:block; border-right:1px plain color:#FA9000; :#FFF; Position:absolute; }
以下の 2 行は、主に IE6 と IE7 で同じ効果が得られるように記述されています。なぜ前の行に IMPORTANT を記述しないのかと疑問に思う人もいます。試してみるとわかります。IE6 と IE7 を変更するには、これ以上の方法が思いつきません。 zishu_test li a:hover span {margin-left:- 8px; } /* IE6 */
* html #zishu_test li a:hover scan {margin-left:-8px; }/* IE7*/
最後の行は単純で、境界線の色を変更するだけです。マウスを上に移動すると変化があるような印象を与えます。ボーダーボトム:1px ソリッド #D8A18B; 幅:100px; 高さ:110px; 表示:ブロック:10px;}







zishu.cn テスト

body{ font-size:12px; font-family:Verdana, Arial,sans; 背景:#666; 0; リストスタイル: なし; a:リンク、a:訪問済み{色:#000099;テキスト装飾:下線;} a:hover,a:active{color:#000;text-decoration:なし;} #zishu_test li{ float:left; text-align:center:0 auto; #zishu_test li a{ボーダー右:1pxソリッド#fff;ボーダーボトム:1px幅:100px;背景:#fff;パディングトップ:10px; #zishu_test li img{ 幅: 75px; 高さ: 75px; テキスト整列: 中央; 余白: 1px; } #zishu_test リ スパン{表示:なし;}#zishu_test li a:hover span{ margin-top:-10px;display:block; border-bottom:1px ソリッド #666;ボーダー右:1px ソリッド #666;背景:#FA9000;幅:100ピクセル;色:#FFF;位置:絶対; } * html #zishu_test li a:ホバー スパン {margin-left:-8px; } /* IE6 */ * html #zishu_test li a:ホバー スパン {margin-left:-8px; }/* IE7*/ #zishu_test li a:hover{ border-right:1px ソリッド #D8A18B;border-bottom:1px ソリッド #D8A18B;幅:100ピクセル;高さ:110ピクセル;背景:#F5F5F5;表示:ブロック;パディングトップ:10px;}

• 64d / 47 ヒットpixu
• 24 日 / 35 ヒット秀才
• 66d / 87 ヒット透露
• 40d / 34 ヒットリビッド
• 47 日 / 56 ヒット老孟
• 42d / 36hits小玉
• 63d / 67 ヒットpixu

出典地址はhttp://www.zishu.cn/blogview.asp?logID=553