9 CSS3 マウスオーバー アルバム プレビュー エフェクトに基づく_html/css_WEB-ITnose
Jun 24, 2016 am 11:42 AM
9 つの CSS3 マウスオーバー アルバム プレビュー効果に基づいており、9 つの異なるアルバム拡張効果コードが含まれています。レンダリングは次のとおりです:
オンライン プレビュー ソース コードのダウンロード
実裝コード。
html コード:
<div class="albums"> <div class="albums-inner"> <div class="albums-tab"> <div class="albums-tab-thumb sim-anim-1"> <img src="images/studio_0001.jpg" class="all studio" /> <img src="images/studio_0002.jpg" class="all studio" /> <img src="images/studio_0003.jpg" class="all studio" /> <img src="images/studio_0004.jpg" class="all studio" /> <img src="images/studio_0005.jpg" class="all studio" /> <img src="images/studio_0006.jpg" class="all studio" /> <img src="images/studio_0001.jpg" class="all studio" /> </div> <div class="albums-tab-text">.sim-anim-1 <span>(7 pictures)</span></div> </div> <div class="albums-tab"> <div class="albums-tab-thumb sim-anim-2"> <img src="images/studio_0001.jpg" class="all studio" /> <img src="images/studio_0002.jpg" class="all studio" /> <img src="images/studio_0003.jpg" class="all studio" /> <img src="images/studio_0004.jpg" class="all studio" /> <img src="images/studio_0010.jpg" class="all studio" /> </div> <div class="albums-tab-text">.sim-anim-2 <span>(5 pictures)</span></div> </div> <div class="albums-tab"> <div class="albums-tab-thumb sim-anim-3"> <img src="images/studio_0001.jpg" class="all studio" /> <img src="images/studio_0002.jpg" class="all studio" /> <img src="images/studio_0003.jpg" class="all studio" /> <img src="images/studio_0004.jpg" class="all studio" /> <img src="images/studio_0005.jpg" class="all studio" /> <img src="images/studio_0006.jpg" class="all studio" /> <img src="images/studio_0007.jpg" class="all studio" /> <img src="images/studio_0008.jpg" class="all studio" /> <img src="images/studio_0011.jpg" class="all studio" /> </div> <div class="albums-tab-text">.sim-anim-3 <span>(9 pictures)</span></div> </div> <div class="albums-tab"> <div class="albums-tab-thumb sim-anim-4"> <img src="images/studio_0001.jpg" class="all studio" /> <img src="images/studio_0002.jpg" class="all studio" /> <img src="images/studio_0003.jpg" class="all studio" /> <img src="images/studio_0004.jpg" class="all studio" /> <img src="images/studio_0005.jpg" class="all studio" /> <img src="images/studio_0006.jpg" class="all studio" /> <img src="images/studio_0007.jpg" class="all studio" /> <img src="images/studio_0008.jpg" class="all studio" /> <img src="images/studio_0009.jpg" class="all studio" /> </div> <div class="albums-tab-text">.sim-anim-4 <span>(9 pictures)</span></div> </div> <div class="albums-tab"> <div class="albums-tab-thumb sim-anim-5"> <img src="images/studio_0001.jpg" class="all studio" /> <img src="images/studio_0002.jpg" class="all studio" /> <img src="images/studio_0003.jpg" class="all studio" /> <img src="images/studio_0004.jpg" class="all studio" /> <img src="images/studio_0005.jpg" class="all studio" /> </div> <div class="albums-tab-text">.sim-anim-5 <span>(5 pictures)</span></div> </div> <div class="albums-tab"> <div class="albums-tab-thumb sim-anim-6"> <img src="images/studio_0001.jpg" class="all studio" /> <img src="images/studio_0009.jpg" class="all studio" /> <img src="images/studio_0003.jpg" class="all studio" /> <img src="images/studio_0004.jpg" class="all studio" /> <img src="images/studio_0005.jpg" class="all studio" /> <img src="images/studio_0006.jpg" class="all studio" /> <img src="images/studio_0007.jpg" class="all studio" /> <img src="images/studio_0008.jpg" class="all studio" /> <img src="images/studio_0002.jpg" class="all studio" /> </div> <div class="albums-tab-text">.sim-anim-6 <span>(9 pictures)</span></div> </div> <div class="albums-tab"> <div class="albums-tab-thumb sim-anim-7"> <img src="images/studio_0001.jpg" class="all studio" /> <img src="images/studio_0002.jpg" class="all studio" /> <img src="images/studio_0003.jpg" class="all studio" /> <img src="images/studio_0004.jpg" class="all studio" /> </div> <div class="albums-tab-text">.sim-anim-7 <span>(4 pictures)</span></div> </div> <div class="albums-tab"> <div class="albums-tab-thumb sim-anim-8"> <img src="images/studio_0001.jpg" class="all studio" /> <img src="images/studio_0002.jpg" class="all studio" /> <img src="images/studio_0009.jpg" class="all studio" /> <img src="images/studio_0004.jpg" class="all studio" /> <img src="images/studio_0005.jpg" class="all studio" /> <img src="images/studio_0006.jpg" class="all studio" /> <img src="images/studio_0007.jpg" class="all studio" /> <img src="images/studio_0008.jpg" class="all studio" /> <img src="images/studio_0003.jpg" class="all studio" /> </div> <div class="albums-tab-text">.sim-anim-8 <span>(9 pictures)</span></div> </div> <div class="albums-tab"> <div class="albums-tab-thumb sim-anim-9"> <img src="images/studio_0001.jpg" class="all studio" /> <img src="images/studio_0002.jpg" class="all studio" /> <img src="images/studio_0003.jpg" class="all studio" /> <img src="images/studio_0004.jpg" class="all studio" /> <img src="images/studio_0005.jpg" class="all studio" /> <img src="images/studio_0009.jpg" class="all studio" /> <img src="images/studio_0007.jpg" class="all studio" /> <img src="images/studio_0008.jpg" class="all studio" /> <img src="images/studio_0006.jpg" class="all studio" /> </div> <div class="albums-tab-text">.sim-anim-9 <span>(9 pictures)</span></div> </div> </div> </div>
via: http://www.w2bc.com/Article/43855
ホットAIツール
Undress AI Tool
脫衣畫像を無料で
Undresser.AI Undress
リアルなヌード寫真を作成する AI 搭載アプリ
AI Clothes Remover
寫真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中國語版
中國語版、とても使いやすい
ゼンドスタジオ 13.0.1
強(qiáng)力な PHP 統(tǒng)合開発環(huán)境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
HTMLで記事、セクション、および脇にセマンティック構(gòu)造を適用する
Jul 05, 2025 am 02:03 AM
HTMLでのセマンティックタグの合理的な使用は、ページ構(gòu)造の明確さ、アクセシビリティ、SEO効果を改善することができます。 1.ブログの投稿やコメントなどの獨(dú)立したコンテンツブロックに使用されると、自己完結(jié)型でなければなりません。 2。通常はタイトルを含む分類関連のコンテンツに使用され、ページのさまざまなモジュールに適しています。 3。サイドバーの推奨事項(xiàng)や著者プロファイルなど、メインコンテンツに関連する補(bǔ)助情報(bào)に使用されますが、コアではありません。実際の開発では、ラベルを組み合わせて、その他を組み合わせ、過度のネストを避け、構(gòu)造をシンプルに保ち、開発者ツールを使用して構(gòu)造の合理性を検証する必要があります。
Webページを構(gòu)築するための重要なHTML要素は何ですか？
Jul 03, 2025 am 02:34 AM
Webページ構(gòu)造は、Core HTML要素でサポートする必要があります。 1.ページの全體的な構(gòu)造は、メタ情報(bào)を保存してコンテンツを表示するルート要素であるルート要素で構(gòu)成されています。 2。コンテンツ組織は、組織構(gòu)造とSEOを改善するために、タイトル（ - ）、パラグラフ（）、およびブロックタグ（など）に依存しています。 3.ナビゲーションは実裝され、実裝され、一般的に使用される組織にはリンクされ、ARIA-CURRENT屬性が補(bǔ)完され、アクセシビリティが強(qiáng)化されます。 4。フォームインタラクションは、、、完全なユーザー入力と提出機(jī)能を確保するための、、および、、、、および、これらの要素を適切に使用すると、ページの明確さ、メンテナンス、検索エンジンの最適化が向上する可能性があります。
HTML屬性を使用したクライアント側(cè)フォーム検証の実裝。
Jul 03, 2025 am 02:31 AM
client-sideformvalidationcanbedonewithoutjavascriptbyusinghtmlattributes.1）userequedtoeenforcemandatoryfields.2）validateemailsandurlswitttributeslikemailorurl、orusepatternwithregexforcustomformats.3）
HTMLを使用して選択したドロップダウン內(nèi)でオプションをグループ化する方法は？
Jul 04, 2025 am 03:16 AM
HTMLのタグを使用して、ドロップダウンメニューにオプションをグループ化します。特定の方法は、次のような要素のグループを包み、ラベル屬性を介してグループ名を定義することです。1。リンゴ、バナナ、オレンジなどのオプションが含まれます。 2。ニンジン、ブロッコリーなどのオプションが含まれています。 3。それぞれが獨(dú)立したグループであり、グループ內(nèi)のオプションは自動的にインデントされます。メモには以下が含まれます。 firsedグループ全體を無効にする屬性を介して無効にすることができます。 styleスタイルは制限されており、CSSまたはサードパーティライブラリと組み合わせて美化する必要があります。 select2などのプラグインを使用して機(jī)能を強(qiáng)化できます。
HTMLボタン要素を使用してクリック可能なボタンを?qū)g裝します
Jul 07, 2025 am 02:31 AM
HTMLボタン要素を使用してクリック可能なボタンを?qū)g現(xiàn)するには、まずその基本的な使用法と一般的な予防策を習(xí)得する必要があります。 1.デフォルトで送信されるタイプ屬性（ボタン、送信、リセットなど）を使用してタグを使用してボタンを作成し、動作を定義します。 2. JavaScriptを介してインタラクティブな関數(shù)を追加します。これは、IDを介してインラインまたはバインドイベントリスナーを作成してメンテナンスを改善することができます。 3. CSSを使用して、バックグラウンドカラー、ボーダー、丸いコーナー、ホバー/アクティブステータス効果などのスタイルをカスタマイズして、ユーザーエクスペリエンスを強(qiáng)化します。 4.一般的な問題に注意してください：無効な屬性が有効になっていないことを確認(rèn)し、JSイベントが正しくバインドされ、レイアウトオクルージョンがあり、開発者ツールのヘルプを使用して例外をトラブルシューティングします。これをマスターします
HTMLヘッド要素內(nèi)のドキュメントメタデータの構(gòu)成
Jul 09, 2025 am 02:30 AM
htmlheadのメタデータは、SEO、ソーシャル共有、ブラウザの動作にとって重要です。 1.ページのタイトルと説明を設(shè)定し、使用して簡潔で一意に保ちます。 2.オープングラフとツイッターのカード情報(bào)を追加してソーシャル共有効果を最適化し、畫像サイズに注意を払い、デバッグツールを使用してテストします。 3.文字セットとビューポート設(shè)定を定義して、多言語サポートがモバイル端末に適合していることを確認(rèn)します。 4.著者の著作権、ロボット制御、および標(biāo)準(zhǔn)的な防止コンテンツなどのオプションのタグも合理的に構(gòu)成する必要があります。
一般的なHTML検証エラーのデバッグ。
Jul 03, 2025 am 02:41 AM
HTML検証エラーに遭遇した場合、最初に問題を明確にし、仕様に従って修正する必要があります。 1.必要な屬性が欠落している場合、SRCとALTとIMGのHREFを完了する必要があります。 2。タグネストが正しくない場合、構(gòu)造を明確にし、タグを正しく閉じている必要があります。 3.無効または破棄されたタグを使用する場合、MDNドキュメントを參照して、センターやフォントをCSSに置き換えるなどの最新の執(zhí)筆方法に置き換える必要があります。 4.文字エンコードの問題の場合、Metacharset = "UTF-8"を追加し、ファイルがUTF-8形式で保存されてそれを解決することを確認(rèn)します。
HTMLフィギュアとFigcaption要素を使用して、キャプションを畫像やメディアに関連付ける方法は？
Jul 07, 2025 am 02:30 AM
HTML合計(jì)を使用すると、直感的でセマンティックな明確さが可能になり、畫像またはメディアにキャプションテキストを追加できます。 1。寫真、ビデオ、コードブロックなどの獨(dú)立したメディアコンテンツをラップするために使用されます。 2。説明テキストとして配置され、メディアの上または下に配置できます。 3.ページ構(gòu)造の明確さを改善するだけでなく、アクセシビリティとSEO効果も向上します。 4.それを使用する場合、虐待を避けるために注意を払い、通常の裝飾的な寫真ではなく、説明を強(qiáng)調(diào)し、伴う必要があるコンテンツに適用する必要があります。 5.無視できないalt屬性。これはfigcaptionとは異なります。 6.フィマは柔軟で、必要に応じて図の上または下部に配置できます。これらの2つのタグを正しく使用すると、セマンティックで理解しやすいWebコンテンツの構(gòu)築に役立ちます。
