CSS3の実践的な開発: 写真wall_html/css_WEB-ITnoseの実践的な開発を段階的に教えます
「CSS3 2D 変換技術 - トランスレートの実践的な開発」 の記事では、CSS3 の 2D 変換メソッド
1.1.
1. をリストしました。 4. skew() 5. matrix()
同時に、最初のメソッドtranslate()について非常に詳しく説明し、全員が実際にナビゲーションバーを開発できるように導きました。翻訳を知らない、またはあまり詳しくない場合は、私のブログ投稿
「CSS3 2D 変換技術 - 翻訳の実践開発」 を読んでください。
知識ポイントを説明する前に、プログラマーの中には、transform を適用した後になぜ機能しないのかを尋ねる方もいます。実際、CSS3 のtransform はブロックレベルの要素またはインライン要素に対してのみ機能します。 。
この章では、今日の
フォトウォールの実践的な開発を探っていきます。さて、さっそく今日のテーマにいきましょう。
回転は、名前が示すように、回転を意味します。つまり、ブロック要素またはインライン要素に回転を適用すると、回転効果が得られます。
構文:
-webkit-transform: rotate(20deg); /*兼容chrome与safari*/-moz-transform: rotate(20deg); /*兼容firefox*/-o-transform: rotate(20deg); /*兼容opera*/-ms-transform: rotate(20deg); /*兼容IE9*/transform: rotate(20deg); /*标准语法*/
rotate
メソッドのパラメータが正の数の場合、それは時計回りを意味します回転。負の場合は反時計回りの回転を意味します。
文法の説明が終わったので、次はフォト ウォールを作成する方法を段階的に説明します。効果は次のとおりです。
さて、レンダリングに従って、表示領域: 1 つの領域には木の板の背景が表示され、3 つの領域には対応する写真が表示されます。ステップごとに説明します:
1. 表示領域を定義します
!DOCTYPE html><html><head> <meta charset=”utf-8″> <link href=”styles.css” rel=”stylesheet”> <!? css,css3,html,html5,javascript,div,jquery,nodejs,extjs,bootstrap,pure ?> <title>CSS3 2D转换技术之rotate实战开发</title> </head> <body> <a href="http://www.itdriver.cn">实战互联网</a> <div> <div> <img src=”http://pic1.win4000.com/wallpaper/a/53900aafbf5d6.jpg” width=”256″ height=”200″> <p>那一刻，我在这儿感受世外桃源的安逸</p> <p>作者: 陌上花会开</p> </div> <div> <img src=”http://image.tianjimedia.com/uploadImages/2013/259/8XYI3I1E88WN_1000x500.jpg” width=”256″ height=”200″> <p>喜欢你的微笑，喜欢阳光下的味道</p> <p>作者: 陌上花会开</p> </div> <div> <img src=”http://image.tianjimedia.com/uploadImages/2013/308/N8457O6CJS7W_1000x500.jpg” width=”256″ height=”200″> <p>漫山的葵花盛开了</p> <p>作者: 陌上花会开</p> </div> </div> </body></html>
この時点での実行効果:
2. スタイルを実装しますフォトウォール用 photo_wall 、背景画像を適用し、フォト ウォールの余白を設定し、CSS3 を使用して流動的なレイアウトを設定して、フォト ウォールに写真を表示します。
CSS3の流動的なレイアウトを知らない、または慣れていない場合は、私の他のブログ投稿を読んでください。きっとこの機能に習熟できると思います
「CSS3 実践開発: フレキシブル ボックス モデルのレスポンシブ WEB インターフェイス デザイン」。
*{ /*清空所有元素默认的外边距和内边距*/ margin:0; padding:0;} .photo_wall{ background:url(bg.jpg); /*定义照片墙的默认背景*/ background-size:cover; /*使照片墙的背景填充照片墙*/ width:1200px; /*设置照片墙的宽高*/ height:800px; margin:40px auto; /*设置照片墙的外边距*/ display:-webkit-box; /*使用CSS3的盒模型之流式布局*/ display:-moz-box; display:box; -webkit-box-align:center; /*定义盒模型内部元素在垂直方向上居于中间位置*/ -moz-box-align:center; box-align:center; -webkit-box-pack:center; /*定义盒模型内部元素在水平方向上居于中间位置*/ -moz-box-pack:center; box-pack:center;}
この時のランニングエフェクト:
3番目に、スタイル
photo_frame
を写真に適用し、写真の余白とサイズを設定します。テキストの写真内に影効果を追加します。
.photo_wall .photo_frame{ text-align:center; /*照片内的文字都是居中显示*/ padding:10px 10px 30px 10px; /*定义照片的内补白*/ /*设置照片的背景颜色*/ font-size:.8em; /*照片内文字的大小*/ box-shadow:.2em .2em .8em #130c0e; /*给照片添加阴影效果，富有立体感*/} .photo_frame p{ margin-top:10px; /*设置照片内显示文字段落的外上边距*/}
この時のランニング効果:
ここまでで、写真の基本的な外観が見えてきました。今日学んだことを応用してみましょうコンテンツ、回転を追加写真効果を追加すると、写真がより階層化され、よりパーソナライズされたものになります。
4. スタイル photo01、photo02、photo03 をそれぞれ写真に適用します。各写真は、独自に設定された回転基点に基づいて回転されます。コードは次のとおりです:
.photo01{ -webkit-transform-origin:right bottom; /*定义照片1的旋转基点为 右下角*/ -moz-transform-origin:right bottom; transform-origin:right bottom; -webkit-transform:rotate(10deg); /*以基点为轴，在2D空间内顺时针旋转10度*/ -moz-transform:rotate(10deg); -o-transform:rotate(10deg); transform:rotate(10deg);} .photo02{ -webkit-transform-origin:right bottom; /*定义照片2的旋转基点为 右下角*/ -moz-transform-origin:right bottom; transform-origin:right bottom; -webkit-transform:rotate(-20deg); /*以基点为轴，在2D空间内逆时针旋转20度*/ -moz-transform:rotate(-20deg); -o-transform:rotate(-20deg); transform:rotate(-20deg);} .photo03{ -webkit-transform-origin:left top; /*定义照片3的旋转基点为 左上角*/ -moz-transform-origin:left top; transform-origin:left top; -webkit-transform:rotate(40deg); /*以基点为轴，在2D空间内顺时针旋转40度*/ -moz-transform:rotate(40deg); -o-transform:rotate(40deg); transform:rotate(40deg);}
この時点での実行効果:
この時点で、
「CSS3 実践開発: ステップバイステップのフォトウォール実装を教えます」戦争と開発』が終了しました。読んでくださった皆様、ありがとうございました。
もっと面白い実践的なチュートリアルを次々に更新していきますので、お楽しみに！
インターネット技術交換 QQ グループへようこそ: 62329335
個人的な声明: 共有されたブログ投稿は完全にオリジナルであり、私たちは実践的なデモンストレーションを通じてあらゆる知識ポイントを検証するよう努めています。🎜 🎜
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7720
15
1642
14
1396
52
1289
25
1233
29
Windows 11 で写真をお気に入り順に並べ替える方法
Mar 18, 2024 am 09:37 AM
この記事では、Windows 11のお気に入り機能を使って写真を並べ替える方法を説明します。 Windows のフォト アプリには、特定の写真やビデオをお気に入りまたは環境設定としてマークできる便利な機能が備わっています。これらのアイテムをお気に入りとしてマークすると、自動的に別のフォルダーに整理されるため、写真ライブラリ全体を探し回らなくても、お気に入りのコンテンツを簡単に参照できるようになります。この機能を使用すると、お気に入りの写真やビデオにすばやくアクセスして管理できるため、時間と労力を大幅に節約できます。通常、お気に入りフォルダー内の写真は日付の降順に並べ替えられ、最新の写真が最初に表示され、その後に古い写真が表示されます。ただし、集中したい場合は、
iPhone で非表示にした写真や最近削除した写真に対して Face ID または Touch ID を無効にする方法
Mar 04, 2024 pm 04:40 PM
Apple の写真アプリには、隠しアルバムと最近削除したアルバムに写真をロックして、覗き見から確実に隠せる機能が備わっています。これにより、これらのアルバムに保存されている機密性の高い写真やビデオは iPhone の Face ID、Touch ID、またはデバイスのパスコードでロックされているため、追加の保護層が提供されます。このロック機能を使用して非表示アルバムや最近削除したアルバムにアクセスするのが難しい場合は、ロック機能を無効にしてコンテンツにアクセスしやすくすることを検討してください。この記事では、iPhoneの写真アプリのFaceIDまたはTouchID認証を無効にする方法を詳しく説明します。写真アプリの Face ID または Touch ID を無効にする方法 必須: iOS 16 以降を実行している
iPhoneの「写真」アプリに「アップロードできません」というメッセージが表示された場合はどうすればよいですか？
Feb 28, 2024 pm 09:00 PM
iCloud写真機能をオンにすると、iPhoneで撮影した写真やビデオがAppleサーバーに同期されて保存されます。ただし、iCloud への同期プロセス中に、「アップロードできません」というプロンプトまたはアルバムが表示される場合があります。通常、このステータスは iPhone の写真アプリの下部に表示され、「[数字] 個のアイテムを iCloud に同期できません」というプロンプトが表示されます。 「写真」アプリに「アップロードできません」という名前の新しいアルバムが追加されます。これらの写真やビデオを iCloud 写真に追加するには、写真 App からエクスポートして、再インポートしてみてください。ただし、これらの写真やビデオに以前に適用した編集やキーワードは失われることに注意してください。 iPhoneの場合
Meitu Cameraで写真を白黒にする方法
Mar 28, 2024 am 09:11 AM
このカラフルな世界では、時にはシンプルな白と黒の美しさに憧れることもあります。古典的な画像処理方法である白黒フィルターは、写真にレトロでエレガントな雰囲気を与えるだけでなく、コントラストや明暗の変化を通じて写真のテーマや感情を際立たせることができます。 Meitu Xiuxiu は人気のある画像処理ソフトウェアとして、白黒フィルターを簡単に追加する機能を提供します。追加したいけど追加方法がまだわからないというユーザーのために、この Web サイトの編集者が詳細なステップバイステップの紹介を以下に提供します。この記事に従って追加してください。携帯電話で写真を白黒にする方法 Meitu Xiuxiu. まず、携帯電話で Meitu Xiuxiu を開く必要があります. メインインターフェイスに入った後、「写真を美しくする」を選択し、変更する必要がある写真を選択します. 2. 次に、 をクリックします
おすすめのAI支援プログラミングツール4選
Apr 22, 2024 pm 05:34 PM
この AI 支援プログラミング ツールは、急速な AI 開発のこの段階において、多数の有用な AI 支援プログラミング ツールを発掘しました。 AI 支援プログラミング ツールは、開発効率を向上させ、コードの品質を向上させ、バグ率を減らすことができます。これらは、現代のソフトウェア開発プロセスにおける重要なアシスタントです。今日は Dayao が 4 つの AI 支援プログラミング ツールを紹介します (すべて C# 言語をサポートしています)。皆さんのお役に立てれば幸いです。 https://github.com/YSGStudyHards/DotNetGuide1.GitHubCopilotGitHubCopilot は、より少ない労力でより迅速にコードを作成できるようにする AI コーディング アシスタントであり、問題解決とコラボレーションにより集中できるようになります。ギット
Douyin アルバムを開いたときに携帯電話で写真が見つからない場合はどうすればよいですか? Douyin アルバムに写真が表示されない理由は何ですか?
Mar 21, 2024 pm 05:20 PM
デジタル時代において、写真やビデオは私たちにとって生活を記録し、感情を表現する重要な手段となっています。中国有数のショートビデオプラットフォームであるDouyinを使用すると、ユーザーはショートビデオの形で自分の生活を簡単に共有できます。一部のユーザーは、Douyin アルバムを開いたときに携帯電話で写真が見つからないことに気づき、間違いなく何らかの問題を経験します。では、この状況をどう解決すればいいのでしょうか？何が原因でこれが起こるのでしょうか？この記事では、これら 2 つの問題について詳しく説明します。 1. Douyin アルバムを開いたときに携帯電話で写真が見つからない場合はどうすればよいですか?携帯電話上の Douyin アルバムで写真が見つからない場合、ユーザーは問題を解決するために次の方法を試すことができます。 写真の許可を確認する: 携帯電話の設定で Douyin アプリがアルバムへのアクセスを許可されていることを確認してください。
iOS 17.4の新しい高度な機能「盗難デバイス保護」の使い方を教えます
Mar 10, 2024 pm 04:34 PM
Appleは火曜日にiOS 17.4アップデートを公開し、iPhoneに多数の新機能と修正をもたらした。このアップデートには新しい絵文字が含まれており、EU ユーザーは他のアプリ ストアから絵文字をダウンロードすることもできます。さらに、このアップデートでは iPhone のセキュリティ制御も強化され、より多くの「盗難デバイス保護」設定オプションが導入され、ユーザーにより多くの選択肢と保護が提供されます。 「iOS17.3では、「盗難デバイス保護」機能が初めて導入され、ユーザーの機密情報のセキュリティが強化されています。ユーザーが自宅やその他の身近な場所から離れている場合、この機能ではユーザーは最初に生体認証情報を入力する必要がありますApple ID パスワードの変更や盗難デバイス保護の無効化など、特定のデータにアクセスして変更するには、情報を再度入力する必要があります。
どのAIプログラマーが一番優れているでしょうか? Devin、Tongyi Lingma、SWE エージェントの可能性を探る
Apr 07, 2024 am 09:10 AM
世界初の AI プログラマー Devin の誕生から 1 か月も経たない 2022 年 3 月 3 日、プリンストン大学の NLP チームはオープンソース AI プログラマー SWE-agent を開発しました。 GPT-4 モデルを利用して、GitHub リポジトリの問題を自動的に解決します。 SWE ベンチ テスト セットにおける SWE エージェントのパフォーマンスは Devin と同様で、平均 93 秒かかり、問題の 12.29% を解決しました。専用端末と対話することで、SWE エージェントはファイルの内容を開いて検索したり、自動構文チェックを使用したり、特定の行を編集したり、テストを作成して実行したりできます。 (注: 上記の内容は元の内容を若干調整したものですが、原文の重要な情報は保持されており、指定された文字数制限を超えていません。) SWE-A
