憧れるCSS効果_交流体験

著者: eoe
1. Xunxunmimi
http など
をコピーする前に、まず良い効果を見つける必要があります。 ://www.cssplay.co.uk/
http://www.cssbeauty.com A >
よく見かけます

今日うっかり cssplay の前を通ってしまいました
http:/ / www.cssplay.co.uk/menu/magnifier2.html
とても楽しそうです

トップスタイルを開いて試してみてください
楽しいスタイルを見ることをお勧めします~ 彼の CSS を急いで見ないでください ~ それは無意味です

2. 自分でやってください ~ 十分な食料と衣服を用意してください
ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">" target=_blank>http://www.w3.org/TR/xhtml1 /DTD/xhtml1-strict.dtd ">

" target=_blank> http://www.w3.org/1999/xhtml">

    
    

• http://www.rotui.net/lab/a/zoom/images/1.jpg" width="128" style="max-width:90%" alt="憧れるCSS効果_交流体験" />


• http://www.rotui.net/lab/a/zoom/images/2.jpg" width="128" style="max-width:90%" alt= "憧れるCSS効果_交流体験" />


• http://www.rotui.net/lab/a/zoom/images/3.jpg" width="128 " style="max-width:90%" alt="憧れるCSS効果_交流体験" />


• http://www.rotui.net/lab/a/zoom/images/4.jpg" width="128" style="max-width:90%" alt="憧れるCSS効果_交流体験" />


• http://www.rotui.net/lab/a/ zoom/images/5.jpg" width="128" height="128" alt="憧れるCSS効果_交流体験" />


• http://www. rotui.net/lab/a/zoom/images/6.jpg" width="128" style="max-width:90%" alt="憧れるCSS効果_交流体験" />


• http://www.rotui.net/lab/a/zoom/images/7.jpg" width="128" style="max-width:90%" alt="憧れるCSS効果_交流体験" />
  

ヒント：你可以先修改部分代码再运行

做完自我感觉还不错~~~

主要就是a:hover position: absolute; margin 三个~
不过做后才公開现~IE5のA失效了

3.欠点を補ってください
他の人のCSSを見てみましょう～`IE5のAでも無効ですが
#enlarge {padding:0; margin:2em auto; list-style-type:none; width :240px; 高さ:40px;}
#enlarge li {display:block; float:left; width:40px; height:40px;position:relative;}
#enlarge li a {display:block; width: 40px; 高さ: 40px; 背景:透明; オーバーフロー: 非表示; 位置:相対;}
#enlarge li a img {width:100%; height:100%; border:0;}
#enlarge li a :hover {position :absolute; left:-20px; top:-20px; width:80px; height:80px; z-index:100;}
ヒント: 実行前にコードの一部を変更できます
FT ~Write It には他の定義よりも 1 つ多くの定義があります~~
彼の方法は、左上でposition:relativeを使用することであり、どちらも負の値を使用します~

4. 1 つの例から推論を導き出す最近急に書こうと思った 車の掃除フォーラム～投稿下のページネーションはこんな感じで再生できます～
ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">" target=_blank>http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd">
" target=_blank>http://www .w3.org/1999/xhtml">

    
    

• 1


• 2


• 3


• 4


• 5


• 6


• 7

ヒント: 最初にコードの一部を変更してから実行できます
もっと楽しく ~IE はやめよう~
ttp://www.w3.org/TR/ xhtml1/ DTD/xhtml1-strict.dtd">" target=_blank>http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

" target=_blank>http://www.w3.org/1999/xhtml">

    
    

• 1


• 2


• 3


• 4


• 5


• 6


• 7