疫病のせいで家にこもりきりで、頭がおかしくなりそうなので、パソコンを起動して頭を働かせてみました。今日は、CSS3 マークアップ参照のソースと起源を調べる方法を皆さんに紹介します。 新しいテクノロジーの出現は、多くの場合、生産性の新たな向上を意味します。 HTML5 と CSS3 の普及により、以前は非常に複雑なコードで実行されていた問題を、ますます多くの新しい方法でシンプルかつ簡単に解決できるようになりました。たとえば、HTML5 のダウンロードやプレースホルダー、CSS3 の計算機やカウンターなどの機能の登場により、Web 開発者の作業負荷は大幅に軽減されました。これらの機能の登場により、多くの労力が節約されるからです。ここでは、CSS3 の content と attr 技術を使用して、引用の著者や引用元を巧みにマークする方法を紹介します。 記事の中で他の人の言葉を引用したり、本の一節を引用したりする場合は、引用の後にその人の名前または本のタイトルを記載する必要があります。これは礼儀正しさだけでなく、敬意の表れでもあります。通常、引用の右下隅にソースを表示するには float:right を使用します。しかし、CSS3 のコンテンツと属性のテクノロジーにより、これをより巧妙に実現できます。以下は CSS3 によって実現される効果図です。 HTMLコード
blockquote 要素の cite 属性に気づきました。ソースを表示するために別の要素を使用するのではなく、blockquote 自体のプロパティを活用します。これは文法的にはより明確でシンプルであり、意味的にもより意味があります。 CSSコード 次に、cite 属性のコンテンツを適切な場所に表示するために、CSS の小さな部分を使用する必要があります。そのためには、CSS3 の content と attr を使用する必要があります。 ブロック引用[引用]:after { 背景色: #666666; 境界線: 1px 実線 #000000; 色: #EEEEEE; コンテンツ: attr(cite); 表示: ブロック; フォントサイズ: 小さい; フォントスタイル: 通常; パディング: 0 0.2em; 位置: 絶対; 右: 0.5em; } 実際には、:after 疑似要素を使用してオリジン情報を表示します。追加の Web 要素は追加されません。絶対位置指定を使用して右下隅に配置すると、一定の階層感も示されます。とても美しい。 要件が特に厳しくない限り、引用のソースまたは出典を示すこの方法は非常に効果的です。しかし、本へのリンクを追加する必要があるなど、非現実的な側面もあります。この使用法は、Firefox、Google Chrome、Apple Chrome などの最新のブラウザでサポートされています。IE9 はこの方法を完全にサポートしています。 要約する CSS3 参照の起源とソースをマークする賢い方法についての記事はこれで終わりです。より関連性の高い CSS3 参照とソース コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。皆様が今後も 123WORDPRESS.COM を応援してくれることを願っています。 |
<<: 純粋な HTML ページを送信し、パラメータを渡し、ID を確認する方法
>>: ウェブサイトアイコンを追加するにはどうすればいいですか?
目次長すぎて読めないコンポーネントスタイルの分離デモテスト優先度ページの分離構成参考文献ネイティブ ...
コンテナの起動コマンドを取得する方法コンテナはすでに作成されていますが、その起動パラメータ(データが...
目次1. 問題のあるSQL文たとえば、次の図のような質問をした人がいました。 問題は次のように要約で...
目次1. コンポーネントとは何ですか? 2. グローバルコンポーネントを作成する方法1 1. Vue...
これは、VPS サーバー用の一般的なワンクリック パフォーマンス テスト スクリプトです。マシンの構...
序文この記事を始める前に、複数選択の質問をしてみましょう。フロントエンド開発でビルド ツールを使用す...
目次序文困難クロスドメイン定義nginxの機能リバースプロキシ静的と動的の分離達成しようとする最終結...
最近MySQLを5.7にアップグレードしましたが、WordPressでデータのインポート時にエラーが...
Mysqlは3種類のロック構造をサポートしていますテーブルレベルのロック、低オーバーヘッド、高速ロッ...
この記事では、カルーセルマップの効果を実現するためのjsの具体的なコードを参考までに共有します。具体...
1. 概要MySQL データベースの日常的な操作とメンテナンスにおいて、ユーザーが誤ってデータを削...
Nginx の動的および静的分離の概要Nginx は静的処理能力が強力ですが、動的処理能力が不十分で...
目次序文一般的な方法1. 親コンポーネントを介して子コンポーネントの発行イベントをリッスンしてpro...
数日前、私のウェブサイトがいくつかの IP アドレスから大量の悪意のある標的型スキャンを受け、ブルー...
環境: MacOS_Cetalina_10.15.1、Mysql8.0.18、Docker_2.0....