H5 と CSS3 を使用してフォトアルバムを作成するコード例-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

H5 と CSS3 を使用してフォトアルバムを作成するコード例

Y2J

May 17, 2018 am 10:59 AM

css3html5フォトアルバム

純粋な CSS3 でフォトアルバム効果を作成できます。最も重要なことは、js を 1 行も使用していないことです。今日、自分のコンピュータにそのような例があることを偶然発見しました。いつダウンロードしたか覚えていませんが、学習した日々が懐かしいです。フロントデスクに伺いましたので、シェアさせていただきます。

レンダリング:

エフェクトはまだ非常に優れていると思いませんか? 最も重要なことは、js の行が使用されていないことです。
最初に HTML ファイルを見てください:

コードは次のとおりです:

<body> 
<p id="g
all
ery"> 
<h1 id="纯CSS-相册效果">纯CSS3相册效果</h1> 
<ul> 
<li> 
<span class="touch"><img  src="/static/imghwm/default1.png"  data-src="images/pic1.jpg"  class="lazy"  / alt="H5 と CSS3 を使用してフォト アルバムを作成するコード例" ></span> 
<p style="
display
: block;"> 
<img  src="/static/imghwm/default1.png"  data-src="images/pic1.jpg"  class="lazy"  / alt="H5 と CSS3 を使用してフォト アルバムを作成するコード例" > 
</p> 
</li> 
<li> 
<span><img  src="/static/imghwm/default1.png"  data-src="images/pic2.jpg"  class="lazy"  / alt="H5 と CSS3 を使用してフォト アルバムを作成するコード例" ></span> 
<p> 
<img  src="/static/imghwm/default1.png"  data-src="images/pic2.jpg"  class="lazy"  / alt="H5 と CSS3 を使用してフォト アルバムを作成するコード例" > 
</p> 
</li> 
<li> 
<span><img  src="/static/imghwm/default1.png"  data-src="images/pic3.jpg"  class="lazy"  / alt="H5 と CSS3 を使用してフォト アルバムを作成するコード例" ></span> 
<p> 
<img  src="/static/imghwm/default1.png"  data-src="images/pic3.jpg"  class="lazy"  / alt="H5 と CSS3 を使用してフォト アルバムを作成するコード例" > 
</p> 
</li> 
<li> 
<span><img  src="/static/imghwm/default1.png"  data-src="images/pic4.jpg"  class="lazy"  / alt="H5 と CSS3 を使用してフォト アルバムを作成するコード例" ></span> 
<p> 
<img  src="/static/imghwm/default1.png"  data-src="images/pic4.jpg"  class="lazy"  / alt="H5 と CSS3 を使用してフォト アルバムを作成するコード例" > 
</p> 
</li> 
<li> 
<span><img  src="/static/imghwm/default1.png"  data-src="images/pic5.jpg"  class="lazy"  / alt="H5 と CSS3 を使用してフォト アルバムを作成するコード例" ></span> 
<p> 
<img  src="/static/imghwm/default1.png"  data-src="images/pic5.jpg"  class="lazy"  / alt="H5 と CSS3 を使用してフォト アルバムを作成するコード例" > 
</p> 
</li> 
</ul> 
<p class="
clear
fix"></p> 
</p> 
</body>

簡単な説明:
1. ul の li は写真の数を決定します
2 ul はスタイル float :right を使用します。 , width:140px ; アルバムの右側の領域に表示されます
3. li の float : left で、li に保存されている大きな画像の p を左に移動できます。位置は絶対であり、デフォルトのp#gallaryに従って配置されます。最初の1つだけが表示されます4.マウスがliの上に移動すると、li spam imgの透明度を変更し、li pの表示が大きく表示されます。画像次のステップは CSS ファイルです:

コードは次のとおりです:

<style type="text/css"> 
body 
{ 
font-family
: "微软雅黑"; 
} 
#gallery 
{ 
width: 700px; 
position: relative; 
margin
: 20px auto 0; 
background-color
: #000; 
min-height
: 400px; 
padding
: 20px; 
} 
/*标题*/ 
#gallery h1 
{ 
color: #fff; 
font-size
: 2em; 
font-weight
: bold; 
} 
#gallery ul 
{ 
width: 140px; 
float: right; 
margin: 10px 0 20px; 
} 
#gallery ul li 
{ 
float: left; 
margin: 20px 8px 0 0; 
} 
#gallery ul li span 
{ 
display: block; 
position: relative; 
width: 60px; 
height: 80px; 
border: 1px solid #fff; 
-moz-border-radius: 4px; 
-webkit-border-radius: 4px; 
-ms-border-radius: 4px; 
-o-border-radius: 4px; 
border-radius: 4px; 
overflow
: hidden; 
} 
#gallery ul li span img 
{ 
position: relative; 
top
: -200px; 
left: -100px; 
filter: alpha(opacity=30); 
opacity: 0.3; 
} 
#gallery ul li span.touch img, #gallery ul li
:hover
 span img 
{ 
opacity: 1; 
filter: alpha(opacity=100); 
} 
#gallery ul li:hover p 
{ 
display: block; 
} 
#gallery ul li p img 
{ 
width: 460px; 
height: 288px; 
} 
#gallery ul li p 
{ 
display: none; 
position: absolute; 
top: 100px; 
left: 30px; 
border: 5px solid #fff; 
} 
.clearfix 
{ 
clear: both; 
} 
</style>

CSS にはありません。複雑なスタイルは説明しません。さらに、HTML にリセットスタイルの CSS

reset

.css を導入しました。使い慣れたリセットスタイルを使用することもできます。コードは次のとおりです。

html, body, p, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend{ margin: 0; padding: 0; font-size: 100%; border: 0; outline: 0; background: transparent; } ol, ul { list-style: none; } blockquote, q { quotes: none; } :focus { outline: 0; } table { border-collapse: collapse; border-spacing: 0; }

【関連する推奨事項】

Html5 の無料ビデオチュートリアル

QR コードのスキャンと解析を作成するための H5 コードの例

HTML5 ローカルデータベースのサンプルの詳細な説明

H5 マイクロシーンの実装方法を説明します

H5のカスタム属性データの詳細な説明-*

以上がH5 と CSS3 を使用してフォトアルバムを作成するコード例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

H5コード：Web開発者向けのベストプラクティスApr 16, 2025 am 12:14 AM

H5コードのベストプラクティスには以下が含まれます。1。正しいDoctype宣言と文字エンコーディングを使用します。 2。セマンティックタグを使用します。 3。HTTPリクエストを削減します。 4.非同期負荷を使用します。 5。画像を最適化します。これらのプラクティスは、Webページの効率、保守性、ユーザーエクスペリエンスを向上させることができます。

H5：Web標準とテクノロジーの進化Apr 15, 2025 am 12:12 AM

Web標準とテクノロジーは、これまでにHTML4、CSS2、および単純なJavaScriptから進化し、重要な開発を受けてきました。 1）HTML5は、CanvasやWebstorageなどのAPIを導入し、Webアプリケーションの複雑さと互換性を高めます。 2）CSS3はアニメーション関数とトランジション関数を追加して、ページをより効果的にします。 3）JavaScriptは、矢印関数やクラスなど、node.jsおよびES6の最新の構文を通じて開発効率とコードの読みやすさを向上させます。これらの変更により、パフォーマンスの最適化とWebアプリケーションのベストプラクティスの開発が促進されました。

H5はHTML5の速記ですか？詳細の調査Apr 14, 2025 am 12:05 AM

H5はHTML5の略語だけでなく、より広い最新のWeb開発テクノロジーエコシステムを表しています。1。H5にはHTML5、CSS3、JavaScript、および関連するAPIおよびテクノロジーが含まれます。 2.より豊かでインタラクティブでスムーズなユーザーエクスペリエンスを提供し、複数のデバイスでシームレスに実行できます。 3. H5テクノロジースタックを使用して、レスポンシブWebページと複雑なインタラクティブ機能を作成できます。

H5およびHTML5：Web開発で一般的に使用される用語Apr 13, 2025 am 12:01 AM

H5とHTML5は、同じこと、つまりHTML5を参照します。 HTML5はHTMLの5番目のバージョンであり、セマンティックタグ、マルチメディアサポート、キャンバスとグラフィックス、オフラインストレージ、ローカルストレージなどの新しい機能をもたらし、Webページの表現力と互換性を向上させます。

H5は何を参照していますか？コンテキストの探索Apr 12, 2025 am 12:03 AM

H5ReferStoHtml5、apivotaltechnologyinwebdevelopment.1）html5introduceSnewelementsandapisforrich、dynamicwebapplications.2）Itupp ortsmultimediawithoutplugins、endancingurexperiencecrossdevices.3）semanticelementsimprovecontentstructurendseo.4）H5'srespo

H5：ツール、フレームワーク、およびベストプラクティスApr 11, 2025 am 12:11 AM

H5開発で習得する必要があるツールとフレームワークには、Vue.JS、React、Webpackが含まれます。 1.Vue.jsは、ユーザーインターフェイスの構築に適しており、コンポーネント開発をサポートします。 2.複雑なアプリケーションに適した仮想DOMを介したページレンダリングを最適化します。 3.Webpackは、モジュールのパッケージングに使用され、リソースの読み込みを最適化します。

HTML5の遺産：現在のH5の理解Apr 10, 2025 am 09:28 AM

html5hassificlytransformdedwebdeveverment byintroducingsingingelements、endincemultimediasupport、およびrequrovingperformance.1）itmadewebsitesmoreaccessibleandseo-frendlywithsemantelementslike、and.2）

H5コード：アクセシビリティとセマンティックHTMLApr 09, 2025 am 12:05 AM

H5は、セマンティック要素とARIA属性を介して、WebページのアクセシビリティとSEO効果を改善します。 1.使用などを使用して、コンテンツ構造を整理し、SEOを改善します。 2。ARIA-LabelなどのARIA属性はアクセシビリティを強化し、支援技術ユーザーはWebページをスムーズに使用できます。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、