CSS3 の実踐的な開発: コーナーeffectの開発方法を段階的に教えます_html/css_WEB-ITnose
Jun 24, 2016 pm 12:00 PM
皆さんこんにちは、花會(huì)開です。今日の記事では、純粋な CSS 折り畳み効果 のセットを開発する方法を段階的に説明します。いつものように、コードのダウンロードは提供しませんが、チュートリアルのコードをローカル コンピューターにコピーする限り、私が示したものと同じ効果が確実に得られることを保証します。私の意図を理解していただければ幸いです。
それでは、今日のチュートリアルを直接始めましょう。まず第一に、今日の実際的な事例の効果をお見せしましょう:
これは何だという人もいるでしょう。これが今日の実際の開発です。上の図の右上隅にある折りたたみエフェクトを開発します。
説明を終える前に、難しくて信じられないと思う人もいるかもしれません。お伝えしたいのは、とても簡(jiǎn)単なことです。以下の內(nèi)訳に従って、段階的に學(xué)習(xí)してください。
まず、次のコードで青い領(lǐng)域を作成します:
<!DOCTYPE html><html><head><meta charset="utf-9"><meta name="keywords" content="css,css3,實(shí)戰(zhàn)互聯(lián)網(wǎng),教程"><meta name="description" content="css3實(shí)現(xiàn)折角效果,折角效果,css3實(shí)戰(zhàn)盡在實(shí)戰(zhàn)互聯(lián)網(wǎng)" ><link rel="stylesheet" href="styles_2014080901.css"><title>CSS3實(shí)現(xiàn)折角效果實(shí)戰(zhàn)開發(fā)</title></head><body><div class="note"></div></body></html>
接著我們給.note元素應(yīng)用樣式：
*{ /*清除所有元素的內(nèi)外邊距*/margin:0;padding:0;}.note { /*設(shè)置折疊樣式基本屬性*/width:480px;height:400px;margin:2em auto; /*調(diào)整.note元素的外邊距*/padding:2em;background:#53A3B4;} それでは、この時(shí)點(diǎn)のランニングエフェクトを見てみましょう:
この折り畳みエフェクトを?qū)g現(xiàn)するにはどうすればよいでしょうか?以下の手順に注意してください。
今度は CSS3 の擬似要素を使用して、コンテンツの一部をページに挿入します。
.note:before {content:"";display:block; /*偽元素默認(rèn)是行內(nèi)元素，所以如果要設(shè)定寬高，這必須顯性設(shè)置為block*/border-width:0 16px 16px 0; /*設(shè)置邊框?qū)挾?/border-color:#fff #fff transparent transparent; background:transparent;border-style:solid; /*設(shè)置邊框?yàn)楣腆w的*/width:0; /*設(shè)定新創(chuàng)建的元素*/}
ここで、疑似要素について簡(jiǎn)単に説明します。 :before 疑似要素はコンテンツを指定する必要があります。そうでない場(chǎng)合は、疑似要素はインライン要素であるため、コンテンツを設(shè)定する必要があります。デフォルトでは、幅と高さを設(shè)定する場(chǎng)合は、これを明示的にブロックに設(shè)定する必要があります。相対的な疑似要素についてさらに詳しい情報(bào)をお持ちの場(chǎng)合は、私のスペースに注目してください。
疑似要素が作成されましたが、作成した要素を .note 領(lǐng)域の右上隅に配置したいと考えています。さて、position の相対 (相対位置決め) と絶対位置 (絶対位置決め) を通じて要素の位置を調(diào)整できます。
position:relative (相対配置) を .note に適用します:
.note { /*設(shè)置折疊樣式基本屬性*/width:480px;height:400px;margin:2em auto; /*調(diào)整.note元素的外邊距*/padding:2em;background:#53A3B4;<strong> position:relative;</strong>}
次に、絶対配置屬性を使用して、新しく作成したオブジェクトをコンテナの右上隅に配置します:
.note:before {content:"";display:block; /*偽元素默認(rèn)是行內(nèi)元素，所以如果要設(shè)定寬高，這必須顯性設(shè)置為block*/border-width:0 16px 16px 0; /*設(shè)置邊框?qū)挾?/border-color:#fff #fff transparent transparent; background:transparent;border-style:solid; /*設(shè)置邊框?yàn)楣腆w的*/width:0; /*設(shè)定新創(chuàng)建的元素*/ position:absolute; /*相對(duì)于父容器絕對(duì)定位，設(shè)置偏移父容器邊框距離*/ top:0; right:0;} この時(shí)點(diǎn)で、もう一度見てみましょう 効果:
素晴らしい、欠けていた角が実現(xiàn)されました。冒頭で、折り畳まれた角には影の効果があると言いました。次に、.note:before に影のスタイルを追加しましょう。
/*設(shè)置元素的陰影效果*/-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);-moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
次に、影のスタイルを追加した後の効果を見てみましょう。
この時(shí)點(diǎn)で、純粋な CSS3 を使用して折り畳み効果を?qū)g現(xiàn)するのは非常に簡(jiǎn)単であることがわかりました。
表示用なので高さを固定に設(shè)定していますが、自由に設(shè)定したい場(chǎng)合は屬性を解除してください。
より実踐的なチュートリアルについては、引き続き私のスペースに注目してください。読んでいただきありがとうございます。
インターネット技術(shù)交換グループへようこそ: 62329335
個(gè)人的な聲明: 共有されたブログ投稿は完全にオリジナルであり、私たちは実踐的なデモンストレーションを通じてあらゆる知識(shí)ポイントを検証するよう努めています。
ホットAIツール
Undress AI Tool
脫衣畫像を無(wú)料で
Undresser.AI Undress
リアルなヌード寫真を作成する AI 搭載アプリ
AI Clothes Remover
寫真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無(wú)料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡(jiǎn)単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無(wú)料のコードエディター
SublimeText3 中國(guó)語(yǔ)版
中國(guó)語(yǔ)版、とても使いやすい
ゼンドスタジオ 13.0.1
強(qiáng)力な PHP 統(tǒng)合開発環(huán)境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ユーザーがまれに発生する不具合: Samsung Watch スマートウォッチで突然白い畫面の問(wèn)題が発生する
Apr 03, 2024 am 08:13 AM
スマートフォンの畫面に緑色の線が表示されるというトラブルに遭遇したことがある方もいると思いますし、見たことはなくても、関連する寫真をインターネット上で見たことがあるはずです。では、スマートウォッチの畫面が白くなってしまう狀況に遭遇したことはありますか？ CNMOは4月2日、海外メディアから、Redditユーザーがサムスンウォッチシリーズのスマートウォッチの畫面が白くなっている寫真をソーシャルプラットフォームで共有したことを知った。ユーザーは、「出発時(shí)に充電していましたが、戻ってきたらこのようになっていました。再起動(dòng)しようとしましたが、再起動(dòng)プロセス中も畫面はまだこのままでした?！筍amsung Watch スマートウォッチの畫面が白くなりました。 Reddit ユーザーはスマート ウォッチを指定していません。特定のモデルです。しかし、寫真から判斷すると、Samsung Watch5のはずです。以前、別のRedditユーザーも報(bào)告しました
おすすめのAI支援プログラミングツール4選
Apr 22, 2024 pm 05:34 PM
この AI 支援プログラミング ツールは、急速な AI 開発のこの段階において、多數(shù)の有用な AI 支援プログラミング ツールを発掘しました。 AI 支援プログラミング ツールは、開発効率を向上させ、コードの品質(zhì)を向上させ、バグ率を減らすことができます。これらは、現(xiàn)代のソフトウェア開発プロセスにおける重要なアシスタントです。今日は Dayao が 4 つの AI 支援プログラミング ツールを紹介します (すべて C# 言語(yǔ)をサポートしています)。皆さんのお役に立てれば幸いです。 https://github.com/YSGStudyHards/DotNetGuide1.GitHubCopilotGitHubCopilot は、より少ない労力でより迅速にコードを作成できるようにする AI コーディング アシスタントであり、問(wèn)??題解決とコラボレーションにより集中できるようになります。ギット
九州風(fēng)神アサシン4Sラジエターレビュー 空冷「アサシンマスター」スタイル
Mar 28, 2024 am 11:11 AM
ASSASSINといえば、プレイヤーの皆さんは必ず『アサシン クリード』に登場(chǎng)するマスターアサシンを思い浮かべると思いますが、彼らは熟練しただけではなく、「闇に身を捧げ、光に仕える」という信條を持っています。 - アプライアンス ブランド DeepCool の冷卻ラジエーターが互いに一致します。このたび、シリーズ最新作「ASSASSIN4S」が登場(chǎng)し、上級(jí)者に新たな空冷體験をもたらす『スーツの暗殺者 アドバンスト』。外観はディテールに富んでいます. Assassin 4S ラジエーターはダブルタワー構(gòu)造 + シングルファン內(nèi)蔵設(shè)計(jì)を採(cǎi)用しています. 外側(cè)は立方體狀のフェアリングで覆われており, 全體的な印象が強(qiáng)いです. ホワイトとブラックの2色が用意されています.さまざまな色に合う色。
Huntkey MX750P フルモジュール電源レビュー: 750W の集中プラチナ強(qiáng)度
Mar 28, 2024 pm 03:20 PM
コンパクトなサイズで究極の獨(dú)自の美しさを追求する多くのプレイヤーを魅了するITXプラットフォームは、製造プロセスの改善と技術(shù)の進(jìn)歩により、インテルの第14世代CoreおよびRTX40シリーズのグラフィックスカードの両方がITXプラットフォーム上で強(qiáng)みを発揮することができ、ゲーマーも SFX 電源にはより高い要件があります。ゲーム愛好家である Huntkey は、高性能要件を満たす ITX プラットフォームにおいて、最大 750W の定格電力を備え、80PLUS プラチナ レベルの認(rèn)証を取得した、新しい MX シリーズ電源を発売しました。以下にこの電源の評(píng)価を示します。 Huntkey MX750P フルモジュール電源は、シンプルでファッショナブルなデザインコンセプトを採(cǎi)用しており、プレイヤーに合わせて選択できるブラックとホワイトの 2 つのモデルがあり、どちらもマットな表面処理が施されており、シルバーグレーとレッドのフォントで質(zhì)感が優(yōu)れています。
どのAIプログラマーが一番優(yōu)れているでしょうか? Devin、Tongyi Lingma、SWE エージェントの可能性を探る
Apr 07, 2024 am 09:10 AM
世界初の AI プログラマー Devin の誕生から 1 か月も経たない 2022 年 3 月 3 日、プリンストン大學(xué)の NLP チームはオープンソース AI プログラマー SWE-agent を開発しました。 GPT-4 モデルを利用して、GitHub リポジトリの問(wèn)題を自動(dòng)的に解決します。 SWE ベンチ テスト セットにおける SWE エージェントのパフォーマンスは Devin と同様で、平均 93 秒かかり、問(wèn)題の 12.29% を解決しました。専用端末と対話することで、SWE エージェントはファイルの內(nèi)容を開いて検索したり、自動(dòng)構(gòu)文チェックを使用したり、特定の行を編集したり、テストを作成して実行したりできます。 (注: 上記の內(nèi)容は元の內(nèi)容を若干調(diào)整したものですが、原文の重要な情報(bào)は保持されており、指定された文字?jǐn)?shù)制限を超えていません。) SWE-A
Go 言語(yǔ)を使用してモバイル アプリケーションを開発する方法を?qū)Wぶ
Mar 28, 2024 pm 10:00 PM
Go 言語(yǔ)開発モバイル アプリケーション チュートリアル モバイル アプリケーション市場(chǎng)が活況を続ける中、ますます多くの開発者が Go 言語(yǔ)を使用してモバイル アプリケーションを開発する方法を検討し始めています。シンプルで効率的なプログラミング言語(yǔ)として、Go 言語(yǔ)はモバイル アプリケーション開発でも大きな可能性を示しています。この記事では、Go 言語(yǔ)を使用してモバイル アプリケーションを開発する方法を詳しく紹介し、読者がすぐに始めて獨(dú)自のモバイル アプリケーションの開発を開始できるように、具體的なコード例を添付します。 1. 準(zhǔn)備 始める前に、開発環(huán)境とツールを準(zhǔn)備する必要があります。頭
4K HD映像がわかりやすい！この大規(guī)模なマルチモーダル モデルは、Web ポスターのコンテンツを自動(dòng)的に分析するため、作業(yè)者にとって非常に便利です。
Apr 23, 2024 am 08:04 AM
PDF、Web ページ、ポスター、Excel グラフの內(nèi)容を自動(dòng)的に分析できる大型モデルは、アルバイトにとってはあまり便利ではありません。上海 AILab、香港中文大學(xué)、その他の研究機(jī)関が提案した InternLM-XComposer2-4KHD (略稱 IXC2-4KHD) モデルは、これを?qū)g現(xiàn)します。解像度制限が 1500x1500 以下である他のマルチモーダル大型モデルと比較して、この作業(yè)ではマルチモーダル大型モデルの最大入力畫像が 4K (3840x1600) 解像度を超え、任意のアスペクト比と 336 ピクセルをサポートし、 4K 動(dòng)的解像度の変更。発売から3日後、このモデルはHuggingFaceのビジュアル質(zhì)疑応答モデルの人気ランキングで1位となった。扱いやすい
春の絶妙な光と影のアート、Haqu H2 は費(fèi)用対効果の高い選択肢です
Apr 17, 2024 pm 05:07 PM
春の到來(lái)とともにあらゆるものが生き返り、あらゆるものが生命力と活力に満ち溢れます。この美しい季節(jié)、家庭生活に彩りを加えるにはどうすればよいでしょうか? Haqu H2 プロジェクターは、絶妙なデザインと超コストパフォーマンスで、この春に欠かせない美しさになりました。コンパクトでありながらスタイリッシュなH2プロジェクター。リビングルームのテレビキャビネットの上に置いても、寢室のベッドサイドテーブルの隣に置いても、美しい風(fēng)景になります。乳白色のマットな質(zhì)感のボディは、プロジェクターの高級(jí)感を演出するだけでなく、觸り心地も向上させたデザインです。ベージュのレザー風(fēng)の素材が全體の外観に溫かみとエレガントさを加えます。この色と素材の組み合わせは、現(xiàn)代の住宅の美的傾向に準(zhǔn)拠しているだけでなく、住宅に統(tǒng)合することもできます。
