コードをコピー
コードは以下の通りであります：
<！DOCTYPE HTML PUBLIC " - // W3C // DTD XHTML 1.0過渡// EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTMLのxmlns = "HTTP ：//www.w3.org/1999/xhtml ">
<HEAD>
<META HTTP-当量=" Content-Typeの」コンテンツ= "text / htmlの;のcharset = UTF-8" />
<タイトル>片悬停放大</タイトル>
<スタイル>
* {マージン：0;パディング：0;}
本体{マージントップ：80px;フォントサイズ：12ピクセル、フォントファミリ： "微软雅黑"、ゴシック、サンセリフ;色： ＃9C9C91;背景：#FFF;}
{色：＃333;テキスト装飾：なし;}
：ホバー{色：＃1 F00;}
.wrap {幅：720px;背景：＃f2f2f2;マージン：0自動。 }
ul.works {リストスタイル：なし;マージン：0;パディング：0;}
ul.works李{フロート：左;表示：インライン;マージン：0 20ピクセル20ピクセル0;幅：158px;高さ：150ピクセル;}
ul.works李{テキスト装飾：なし;表示：ブロック;幅：158px;高さ：150ピクセル、背景：#FFFは;}
IMGのLiをul.works {：;：140px;ボーダー：高さ150ピクセル幅0;}
ul.worksのLiが.imgthumb {位置：相対;背景：#EFEFEFは;}
;：-3px;左：トップ対Li .imgthumb span.thumb_shadow_right {位置ul.works -3pxと、ディスプレイ：ブロック;ボーダー：1ピクセル固体＃1 BCBEC0;背景：#FFF;パディング：3px;テキスト整列：センター;}
ul.worksリチウムA .intro {表示：なし;マージントップ：5pxの;高さ：80px;色：＃9C9C91;行の高さ：1.5;}
ul.worksリチウム.intro P {ボーダー底：1ピクセル固体#DEDEDD;オーバーフロー：隠された;}
ul.worksのLi A：ホバー{位置：絶対; z屈折率：5;マージン：-60px -計6Px -220px -30px;幅：210px;高さ：273px;背景：＃CFE798;カーソル：ポインタ;}
ul.worksリチウムのA：ホバー.shadow {位置：相対;表示：ブロック;パディング：4PXは;}
;：ホバー■は{ボーダー背景1ピクセル固体＃9FCF30：リチウムul.works #FFF;パディング：10pxの15ピクセル15ピクセル15ピクセル;}
ul.worksのLi A：ホバー.intro {表示：ブロック;}
</スタイル>
</ head>
<body>
<DIV CLASS = "ラップ">
<ULクラス= "作品">
<LI> <A HREF = "＃"> <DIV CLASS = "影"> <DIV CLASS = "ボックス"> <DIV CLASS = "imgthumb"> <スパンクラス= "thumb_shadow_right"> <IMG SRC = "wall_s1.jpg" /> < /スパン> </ div> <divのクラス= "イントロ"> <P>服务客户：好搜</ p> <p>この项目类别：企业VI设计</ p> <p>この所在行业：互联网</ P > <P>创作时间：2015.03 </ P> </ div> </ DIV> </ DIV> </a>の</ LI>
<LI> <a href="#">の<divクラス = "影"> <DIV CLASS = "ボックス"> <DIV CLASS = "imgthumb"> <スパンクラス= "thumb_shadow_right"> <IMG SRC =「wall_s3。 JPG "/> </ span>を </ div> <divのクラス="イントロ「> <P> 顧客サービス：Baiduの検索</ p> <p>このアイテムのカテゴリ：ハードウェアファイアウォール</ p> <p>この業界：インターネット</ p> <p>この作成：2015.03 </ p型> </ div> </ div> </ div>の</a>の</ LI>
<LI> <a href="#"> <divのクラス= "影"> <divのクラス = "ボックス"> <DIV CLASS = "imgthumb"> <スパンクラス= "thumb_shadow_right"> <IMG SRC = "wall_s4.jpg" /> </ span>を</ div> <div要素クラス= "イントロ"> <P > 顧客サービス：金融</ p> <p>このアイテムのカテゴリ：企業VIデザイン</ p> <p>この業界：金融セクターます。</ p> <p>作成：2015.04 </ p型> </ div> </ div> </ div>の</a>の</ LI>
<LI> <a href="#">の<divクラス= "影"> <DIV CLASS = "ボックス"> <DIV CLASS = "imgthumb"> <スパンクラス= "thumb_shadow_right"> <IMG SRC = "wall_s5.jpg" /> </ span>を</ div> < DIV CLASS = "イントロ"> < P> 顧客サービス：テンセントニュース</ p> <p>このアイテムのカテゴリ：企業VIデザイン</ p> <p>この業界：インターネットます。</ p> <p>作成：2015.05 </ P> </ div> </ div> </ div> </a>の</ LI>
</ UL>imgthumb "> <スパンクラス=" thumb_shadow_right "> <IMG SRC =" wall_s5.jpg "/> </ span>を</ div> <divのクラス=" イントロ「> <P>カスタマーサービス：テンセントニュース</ P> <P>商品カテゴリ：企業VIデザイン</ p> <p>この業界：インターネットます。</ p> <p>作成：2015.05 </ P> </ div> </ div> </ div> </ A > </ LI> </ UL>imgthumb "> <スパンクラス=" thumb_shadow_right "> <IMG SRC =" wall_s5.jpg "/> </ span>を</ div> <divのクラス=" イントロ「> <P>カスタマーサービス：テンセントニュース</ P> <P>商品カテゴリ：企業VIデザイン</ p> <p>この業界：インターネットます。</ p> <p>作成：2015.05 </ P> </ div> </ div> </ div> </ A > </ LI> </ UL>
</ div>
</ BODY>
</ HTML>
フロントエンドの学習qun438905713を作成し、グループのほとんどは、ゼロベースの学習者である、私たちはお互いにお答えし、また学習教材の多くを準備するために、お互いを助けるには、為替のゼロベースのジュニアパートナーを歓迎しました。
本稿では、期待して助けにWebページのデザイン
